@rxbenefits/styles

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

npm install @rxbenefits/styles

Peer Dependencies

This package requires the following peer dependencies:

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:

// 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:

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:

npm install next-plugin-antd-less

Then configure your next.config.js:

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:

@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:

@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:

// 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:

// 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:

// 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

npm run build

Testing

npm test

Linting

npm run lint

Formatting

npm run format

Contributing

We welcome contributions! Please see our Contributing Guide 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:

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

Changelog

See CHANGELOG.md for a detailed history of changes.

License

MIT © RxBenefits

See LICENSE for details.

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📚 Documentation: GitHub Wiki

Related Packages

• @rxbenefits/types - TypeScript type definitions
• @rxbenefits/constants - Application constants
• @rxbenefits/utils - Utility functions
• @rxbenefits/icons - Custom icons
• @rxbenefits/ui - UI component library

Acknowledgments

• Ant Design - The amazing UI framework this package customizes
• LESS - The CSS preprocessor used for styling
• RxBenefits Team - For building and maintaining this package

Made with ❤️ by the RxBenefits Team