# google-material-color-palette-json

Google Material Design's color palette as a typed TypeScript/JavaScript module with full IntelliSense support.

Color values sourced from [Google Material Design Color System](https://material.io/design/color/the-color-system.html).

**[Interactive Color Palette](https://sravanrekandar.github.io/google-material-color-palette-json/)** — Browse all colors visually. Click any swatch to copy its palette accessor and hex code.

## Install

```bash
npm install google-material-color-palette-json
```

## Usage

This package provides three ways to access the Material Design color palette: **JavaScript/TypeScript**, **Sass/SCSS**, and **CSS utility classes**.

### JavaScript / TypeScript

#### ESM (TypeScript / modern JavaScript)

```typescript
import palette from 'google-material-color-palette-json';

// Access colors with full IntelliSense support
const primary = palette.blue.shade_500;       // '#2196f3'
const accent = palette.pink.shade_A200;       // '#ff4081'
const background = palette.grey.shade_100;    // '#f5f5f5'
const textColor = palette.white;              // '#FFFFFF'

// Use in a React component
const styles = {
  backgroundColor: palette.deepPurple.shade_700,  // '#512da8'
  color: palette.white,                            // '#FFFFFF'
  borderColor: palette.deepPurple.shade_200,       // '#b39ddb'
};

// Dynamic access via bracket notation
const colorName = 'red';
const shade = 'shade_500';
const dynamicColor = palette[colorName][shade];  // '#f44336'
```

#### CommonJS

```javascript
const { palette } = require('google-material-color-palette-json');

const bgColor = palette.red.shade_500;  // '#f44336'
const fgColor = palette.white;          // '#FFFFFF'
```

#### Named Exports & Types

```typescript
import { palette } from 'google-material-color-palette-json';
import type {
  MaterialColorPalette,
  ColorName,
  Shade,
  HexColor,
} from 'google-material-color-palette-json';

// Type-safe color picker
function getColor(color: ColorName, shade: Shade): HexColor {
  return palette[color][shade];
}
```

### Sass / SCSS

The package includes a `_palette.scss` file with all colors as Sass variables.

#### With `@use` (recommended)

```scss
@use 'google-material-color-palette-json/scss' as md;

.button {
  background-color: md.$md-red-500;
  color: md.$md-white;

  &:hover {
    background-color: md.$md-red-700;
  }
}

.card {
  background-color: md.$md-grey-50;
  border: 1px solid md.$md-grey-300;
  color: md.$md-grey-900;
}

.accent-text {
  color: md.$md-deep-purple-a200;
}
```

#### With `@import`

```scss
@import 'google-material-color-palette-json/scss';

.button {
  background-color: $md-blue-500;
  color: $md-white;
}
```

Variable naming convention: `$md-{color}-{shade}` where color names are kebab-case (e.g. `$md-deep-purple-a200`, `$md-light-blue-500`).

### CSS Utility Classes

The package includes a `palette.css` file with ready-to-use utility classes for all colors — no build step needed.

#### Setup

Include via a `<link>` tag:

```html
<link rel="stylesheet" href="node_modules/google-material-color-palette-json/dist/palette.css" />
```

Or import in a bundler (Webpack, Vite, etc.):

```javascript
import 'google-material-color-palette-json/css';
```

#### Usage

Each color provides two classes: one for **text color** and one for **background color**.

```html
<!-- Text color classes -->
<p class="palette-red-500">Error message in red</p>
<p class="palette-green-700">Success message in green</p>
<span class="palette-grey-500">Muted text</span>

<!-- Background color classes (suffix: -bg) -->
<div class="palette-blue-500-bg palette-white">White text on blue background</div>
<div class="palette-amber-100-bg palette-brown-900">Dark text on amber background</div>

<!-- Accent shades -->
<button class="palette-pink-a200-bg palette-white">Accent Button</button>

<!-- Black and white -->
<div class="palette-black-bg palette-white">Dark mode</div>
```

Class naming convention: `.palette-{color}-{shade}` for text color, `.palette-{color}-{shade}-bg` for background color (e.g. `.palette-deep-purple-a200`, `.palette-light-blue-500-bg`).

## Available Colors

### Color Groups with Accent Shades (14 shades each)

`red`, `pink`, `purple`, `deepPurple`, `indigo`, `blue`, `lightBlue`, `cyan`,
`teal`, `green`, `lightGreen`, `lime`, `yellow`, `amber`, `orange`, `deepOrange`

Shades: `shade_50`, `shade_100`–`shade_900`, `shade_A100`, `shade_A200`, `shade_A400`, `shade_A700`

### Color Groups without Accent Shades (10 shades each)

`brown`, `grey`, `blueGrey`

Shades: `shade_50`, `shade_100`–`shade_900`

### Standalone Colors

`black` (`#000000`), `white` (`#FFFFFF`)

## TypeScript Types

The package exports the following types:

| Type | Description |
|---|---|
| `MaterialColorPalette` | The full palette interface |
| `ColorWithAccents` | A color group with 14 shades |
| `ColorWithoutAccents` | A color group with 10 shades |
| `ColorName` | Union of all color group names |
| `ColorNameWithAccents` | Color names that have accent shades |
| `ColorNameWithoutAccents` | Color names without accent shades |
| `Shade` | Union of all shade keys |
| `BaseShade` | Base shade keys (50–900) |
| `AccentShade` | Accent shade keys (A100–A700) |
| `HexColor` | A hex color string |

## Migration from v2

- **ESM import**: `import palette from 'google-material-color-palette-json'` (was `require()`)
- **CJS require**: `const { palette } = require('google-material-color-palette-json')`
- **UMD removed**: The `palette-umd.js` build is no longer produced. Use a bundler or ESM.
- **JSON file removed**: `lib/palette.json` is no longer shipped. Import the module instead.
- **TypeScript types**: Full type definitions are now included.
- **Node.js**: Requires Node 18+.

## License

MIT