npm package: @rxbenefits/styles
Description: Global LESS stylesheets and Ant Design theme customization for RxBenefits applications
Author: RxBenefits
Latest version: 1.0.0

# @rxbenefits/styles

[![npm version](https://badge.fury.io/js/%40rxbenefits%2Fstyles.svg)](https://www.npmjs.com/package/@rxbenefits/styles)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

> Global LESS stylesheets and Ant Design theme customization for RxBenefits applications

## Overview

`@rxbenefits/styles` provides a consistent theme and styling foundation for RxBenefits applications that use Ant Design v4. It includes:

- **Custom color palette** - RxBenefits brand colors
- **Typography** - Roboto font family integration
- **Ant Design theme overrides** - Customized components
- **Component-specific styles** - Enhanced UI elements

## Installation

```bash
npm install @rxbenefits/styles
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install antd@^4.18.0 less@^4.0.0
```

**Important**: This package is designed for Ant Design v4 and is not compatible with Ant Design v5.

## Usage

### Basic Usage

Import the styles in your application's main entry file:

```typescript
// src/main.tsx or src/index.tsx
import '@rxbenefits/styles';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

That's it! The styles will be automatically applied to all Ant Design components in your application.

### Webpack Configuration

Your webpack configuration must include a LESS loader. Here's an example:

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};
```

### Next.js Configuration

For Next.js applications, you'll need to install `next-plugin-antd-less`:

```bash
npm install next-plugin-antd-less
```

Then configure your `next.config.js`:

```javascript
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // Your Next.js config
});
```

## Theme Customization

### Color Palette

The package defines the following brand colors:

```less
@blue-base: #335989; // Primary brand color
@cyan-base: #10aed6; // Info color
@green-base: #00a361; // Success color
@red-base: #f9423a; // Error color
@orange-base: #fa8c16; // Warning color
@yellow-base: #fdb61b; // Accent color
@lime-base: #90c400; // Secondary accent
```

### Typography

The default font family is **Roboto**, imported from Google Fonts:

```less
@font-family: 'Roboto', sans-serif;
@font-size-base: 16px;
```

### Component Overrides

The following Ant Design components have custom styling:

- **Buttons** - Custom sizing for small buttons
- **Collapse** - Enhanced border colors
- **Tables** - Optimized padding and sizing
- **Tooltips** - Custom colors and link styling
- **Select** - Custom selection and hover colors
- **Menu** - Dark theme customization
- **Pagination** - Mini size styling
- **Date Picker** - Disabled state colors
- **Steps** - Custom progress colors

## Advanced Usage

### Importing Individual LESS Files

If you need more control over which styles are imported, you can import individual LESS files:

```typescript
// Import only the theme variables (without Ant Design base styles)
import '@rxbenefits/styles/dist/lib/theme.less';

// Or import the main file explicitly
import '@rxbenefits/styles/dist/lib/main.less';
```

### Using with CSS Modules

If your project uses CSS Modules, you may need to configure your build system to handle global LESS imports:

```javascript
// webpack.config.js
{
  test: /\.less$/,
  exclude: /node_modules\/(?!@rxbenefits\/styles)/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: false, // Disable modules for RxBenefits styles
      },
    },
    'less-loader',
  ],
}
```

## Migration from Monorepo

If you're migrating from the RxBenefits monorepo, the import path remains the same:

```typescript
// Before (monorepo)
import '@rxbenefits/styles';

// After (npm package)
import '@rxbenefits/styles';
```

No code changes are required! The package maintains the same import path for seamless migration.

## Browser Support

This package supports the same browsers as Ant Design v4:

- Chrome (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)
- IE 11 (with polyfills)

## Package Contents

```
@rxbenefits/styles/
├── dist/
│   ├── index.js          # Compiled TypeScript entry point
│   ├── index.d.ts        # TypeScript declarations
│   └── lib/
│       ├── main.less     # Main LESS file
│       └── theme.less    # Theme variables and overrides
├── README.md
├── CHANGELOG.md
└── LICENSE
```

## Development

### Prerequisites

- Node.js >= 18.0.0
- npm >= 9.0.0

### Building

```bash
npm run build
```

### Testing

```bash
npm test
```

### Linting

```bash
npm run lint
```

### Formatting

```bash
npm run format
```

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

### Development Workflow

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/my-feature`
3. Make your changes
4. Run tests: `npm test`
5. Commit your changes: `git commit -m "Add my feature"`
6. Push to your fork: `git push origin feature/my-feature`
7. Open a pull request

## Versioning

This package follows [Semantic Versioning](https://semver.org/):

- **Major** version for incompatible API changes
- **Minor** version for backwards-compatible functionality additions
- **Patch** version for backwards-compatible bug fixes

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for a detailed history of changes.

## License

MIT © RxBenefits

See [LICENSE](LICENSE) for details.

## Support

- 📧 Email: dev@rxbenefits.com
- 🐛 Issues: [GitHub Issues](https://github.com/rxbenefits/rxbenefits-styles/issues)
- 📚 Documentation: [GitHub Wiki](https://github.com/rxbenefits/rxbenefits-styles/wiki)

## Related Packages

- [@rxbenefits/types](https://www.npmjs.com/package/@rxbenefits/types) - TypeScript type definitions
- [@rxbenefits/constants](https://www.npmjs.com/package/@rxbenefits/constants) - Application constants
- [@rxbenefits/utils](https://www.npmjs.com/package/@rxbenefits/utils) - Utility functions
- [@rxbenefits/icons](https://www.npmjs.com/package/@rxbenefits/icons) - Custom icons
- [@rxbenefits/ui](https://www.npmjs.com/package/@rxbenefits/ui) - UI component library

## Acknowledgments

- [Ant Design](https://ant.design/) - The amazing UI framework this package customizes
- [LESS](http://lesscss.org/) - The CSS preprocessor used for styling
- [RxBenefits Team](https://rxbenefits.com/) - For building and maintaining this package

---

Made with ❤️ by the RxBenefits Team