# [4.7.0](https://github.com/mindvalley/mv-design-system/compare/v4.6.0...v4.7.0) (2026-05-25)


### Bug Fixes

* **components:** Reapply CRF-861 cleanups to CRF-1170 chip variants [CRF-1170] ([49a409c](https://github.com/mindvalley/mv-design-system/commit/49a409c3027b315395c9dfcce42cbc971367c158)), closes [#6366f1](https://github.com/mindvalley/mv-design-system/issues/6366f1)


### Features

* **vue-components:** Add Chip KeyboardInteractions story for autodocs [CRF-1170] ([49a409c](https://github.com/mindvalley/mv-design-system/commit/49a409c3027b315395c9dfcce42cbc971367c158))
* **components:** Make TagChipLarge an interactive toggle [CRF-1170] ([49a409c](https://github.com/mindvalley/mv-design-system/commit/49a409c3027b315395c9dfcce42cbc971367c158))

# Changelog

All notable changes to this project will be documented in this file.

# [4.5.0](https://github.com/mindvalley/mv-design-system/compare/v4.4.0...v4.5.0) (2026-05-07)

### Features

* **wordmarks:** Add 374 new topic wordmarks covering Mastery (22), Certification (9), Quest in 7 languages (337 total across English, Spanish, German, French, Russian, Italian, Portuguese), and standalone topics (6). Browse the full set in [docs/wordmarks/topics.md](https://github.com/mindvalley/mv-design-system/blob/main/docs/wordmarks/topics.md) ([ebdbea6](https://github.com/mindvalley/mv-design-system/commit/ebdbea6b3595e231c76ad74c711ad74b000ece57))
* **wordmarks:** Add 127 new trainer wordmarks (including 15 left-orientation variants) and refresh 170 existing trainer wordmarks. Browse the full set in [docs/wordmarks/trainers.md](https://github.com/mindvalley/mv-design-system/blob/main/docs/wordmarks/trainers.md) ([ebdbea6](https://github.com/mindvalley/mv-design-system/commit/ebdbea6b3595e231c76ad74c711ad74b000ece57))


### Documentation

* Fix grammar and capitalization typos in `README.md`, `CONTRIBUTING.md`, and `docs/usage.md` ([e3d1559](https://github.com/mindvalley/mv-design-system/commit/e3d1559c804b388cb03fc964ceae4cf3b689bc53))


## [4.4.0](https://github.com/mindvalley/mv-design-system/compare/v4.3.0...v4.4.0) - Sub-package changes (2026-04-20)

> These changes only affect sub-packages still in development (`@mindvalley/css`, `@mindvalley/tokens`). No action required - the root package (`@mindvalley/design-system`) was not modified.

* **css:** Filter Supernova duplicate `_N` token entries ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **css:** Restore original package description ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **css:** Add CSS custom properties generation for color tokens ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **css:** Add shadcn-compatible CSS variable layer for both brands ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **css:** Add shadcn-style theme layer with dark mode and component grouping ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **css:** Add space design token CSS custom properties generation ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))
* **tokens:** Revert b2b token changes to match main ([6f8bb26](https://github.com/mindvalley/mv-design-system/commit/6f8bb2697bbc20fa776a3025648d7c3638a328a6))

## [4.3.0](https://github.com/mindvalley/mv-design-system/compare/v4.2.1...v4.3.0) - Sub-package changes (2026-04-06)

> These changes only affect sub-packages still in development (`@mindvalley/icons`, `@mindvalley/react-icons`, `storybook-react`). No action required - the root package (`@mindvalley/design-system`) was not modified.

* **icons:** Resolve biome warnings in integration test ([81b7502](https://github.com/mindvalley/mv-design-system/commit/81b7502a68fe825203e1fa002f87d82b6e8b04b3))
* **react-icons:** Add react-icons package with icon asset updates ([81b7502](https://github.com/mindvalley/mv-design-system/commit/81b7502a68fe825203e1fa002f87d82b6e8b04b3))
* **storybook-react:** Add Storybook app for React icon components ([81b7502](https://github.com/mindvalley/mv-design-system/commit/81b7502a68fe825203e1fa002f87d82b6e8b04b3))

## [4.2.1](https://github.com/mindvalley/mv-design-system/compare/v4.2.0...v4.2.1) (2026-03-02)

### CI improvements

- Add missing final newline to all SVG files ([4e4f0f8](https://github.com/mindvalley/mv-design-system/commit/4e4f0f8fd66b20bd8e20c6a5f6735b47ac66e531))
- **ci:** Generate token files before type-check instead of using artifacts ([d65db28](https://github.com/mindvalley/mv-design-system/commit/d65db283bb21291065337525d1e4fe2bafe1816b))
- **ci:** Remove --if-present flag from pnpm build command ([4e4f0f8](https://github.com/mindvalley/mv-design-system/commit/4e4f0f8fd66b20bd8e20c6a5f6735b47ac66e531))
- **ci:** Replace pnpm/action-setup with corepack enable ([4e4f0f8](https://github.com/mindvalley/mv-design-system/commit/4e4f0f8fd66b20bd8e20c6a5f6735b47ac66e531))
- **ci:** Switch to pnpm exec ([d65db28](https://github.com/mindvalley/mv-design-system/commit/d65db283bb21291065337525d1e4fe2bafe1816b))

## [4.2.0](https://github.com/mindvalley/mv-design-system/compare/v4.1.2...v4.2.0) (2026-02-19)

### Features

- Add new body-medium typography ([#151](https://github.com/mindvalley/mv-design-system/issues/151)) ([6671adf](https://github.com/mindvalley/mv-design-system/commit/6671adffb99fe2a78a40e264f773d96ac7eef337))
- Updated body-large variants fontSize (20px) and lineHeight (28px) ([6671adf](https://github.com/mindvalley/mv-design-system/commit/6671adffb99fe2a78a40e264f773d96ac7eef337))

## [4.1.2](https://github.com/mindvalley/mv-design-system/compare/v4.1.1...v4.1.2) (2026-02-06)

### Features

- **icons:** Added 46 new icons across both Mindvalley and B2B brands ([3ad5c5b](https://github.com/mindvalley/mv-design-system/commit/3ad5c5b17e7390409ceba05cef3691dff2de6369))

  | Category         | Icons                                                                                                                                                  |
  | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | AI & Voice       | ai-chat, ai-chat-2, ai-sparkle, ai-sparkle-2, ai-sparkle-3, ai-voice, ai-voice-2, ai-voice-3                                                           |
  | Media & Playback | airplay, audio-2, loop-1, loop-2, music-x, record-circle, replay-circle, stop, vocal                                                                   |
  | Content & UI     | caption-2, caption-2-x, caption-bubble, caption-bubble-x, content-collapse-2, content-collapse-3, content-expand-2, content-expand-3, flip, pin-remove |
  | Objects & Items  | bar-code, books, devices, guide, herb, pills, salad, star-circle                                                                                       |
  | Calendar         | calendar-add-minimal, calendar-past                                                                                                                    |
  | Communication    | eve-send-1, eve-send-2                                                                                                                                 |
  | Phone            | phone-ai                                                                                                                                               |
  | User             | user-sparkle                                                                                                                                           |
  | Brand            | hynosis, mv-u, threads                                                                                                                                 |

  All icons include both `filled` and `outlined` variants. Some media icons also include `on-filled` and `on-outlined` states.

### Improvements

- **icons:** SVGO optimizations applied to 2,638 existing icons ([3ad5c5b](https://github.com/mindvalley/mv-design-system/commit/3ad5c5b17e7390409ceba05cef3691dff2de6369))
  - Attribute reordering (`xmlns` moved to front)
  - `fill` attribute positioned inline
  - Minor path syntax cleanup
  - No visual changes — purely optimization

### Bug Fixes

- **icons:** Update docs template for GitHub markdown rendering ([3ad5c5b](https://github.com/mindvalley/mv-design-system/commit/3ad5c5b17e7390409ceba05cef3691dff2de6369))

## [4.1.1](https://github.com/mindvalley/mv-design-system/compare/v4.1.0...v4.1.1) (2026-02-05)

### Bug Fixes

- Correct broken documentation links in README ([a129688](https://github.com/mindvalley/mv-design-system/commit/a129688a1b6f336938275076d01d3aa673e3cabb))

## [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)

### Features

- **Google Sans Flex Typography Plugin**: New Tailwind CSS plugin with 3-tier responsive support
  - Automatic responsive breakpoints: mobile (base) → tablet (768px) → desktop (1024px)
  - Variable font support with `wdth` (width) and `slnt` (slant) axes
  - 90+ typography utility classes with responsive behavior
  - New italic variants: `body-italic`, `body-bold-italic`, `body-large-italic`, etc.
  - See [Typography Setup Guide](./docs/typography/setup.md) for usage

- **Tailwind CSS v4 Support**: Full compatibility with Tailwind v4's CSS-first approach
  - Works with the `@config` directive
  - CSS `@import` for Google Fonts supported

### Migration

- **1:1 Class Name Compatibility**: All typography class names are identical between Sharp Grotesk and Google Sans Flex — no markup changes required when migrating
- **Side-by-Side Support**: Both typography systems can [run together](./docs/typography/migration.md#running-both-systems) in the same project for gradual migration
- **3-Tier vs 2-Tier Responsive**: GSF includes tablet breakpoint (768px) that Sharp Grotesk does not have

| System                 | Responsive Breakpoints                              |
| ---------------------- | --------------------------------------------------- |
| Sharp Grotesk (legacy) | mobile → desktop (2-tier)                           |
| Google Sans Flex (new) | mobile → tablet (768px) → desktop (1024px) (3-tier) |

See the [Migration Guide](./docs/typography/migration.md) for detailed instructions.

### Deprecation

- **Sharp Grotesk Typography**: Now frozen and will not receive future updates. New projects should use the `typography-gsf` plugin. Existing projects can continue using Sharp Grotesk or migrate at their own pace.

**Quick Start (Tailwind v3):**

```typescript
// tailwind.config.ts
import typography from "@mindvalley/design-system/tailwind/plugins/typography-gsf";

export default {
  plugins: [typography({ brands: ["mindvalley"] })],
};
```

**Quick Start (Tailwind v4):**

```css
/* app.css */
@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap";

@import "tailwindcss";

@config "./tailwind.config.js";
```

```javascript
// tailwind.config.js
import typography from "@mindvalley/design-system/tailwind/plugins/typography-gsf";

export default {
  plugins: [typography({ brands: ["mindvalley"] })],
};
```

### Improvements

- Improved internal fontFamily extraction for TypeScript format in font-face generator

### Documentation

- Added `AGENTS.md` and reorganized typography docs under `docs/typography/`
- Added [Typography Setup Guide](./docs/typography/setup.md) with framework examples (Next.js, Vite, Vue, Phoenix)
- Added [Migration Guide](./docs/typography/migration.md) for transitioning from Sharp Grotesk to Google Sans Flex

## [4.0.1](https://github.com/mindvalley/mv-design-system/compare/v4.0.0...v4.0.1) (2026-01-05)

### Bug fixes

- Patched b2b back colors to how they were in v3.4.2 ([#142](https://github.com/mindvalley/mv-design-system/issues/142)) ([1d03f74](https://github.com/mindvalley/mv-design-system/commit/1d03f745d908aa762669b9066b7702eabd849141))

## [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)

### Features

- **Typography Font Loading**: New utility to generate `@font-face` CSS declarations for typography tokens
  - Automatic font-face generation for both Mindvalley and B2B brands
  - Outputs CSS, JS, and TypeScript declaration files
  - Maps Sharp Grotesk fonts to Fastly CDN URLs
  - See [Typography Font Loading Guide](./docs/typography-fonts.md) for usage
  - New exports: `@mindvalley/design-system/typography/mindvalley/fonts.css` and `/b2b/fonts.css`

### 📝 Typography changes

#### Mindvalley brand

**New Typography Tokens:**

| Token               | Font Family                   | Size | Letter Spacing | Line Height | Weight |
| ------------------- | ----------------------------- | ---- | -------------- | ----------- | ------ |
| `body-italic`       | Sharp Grotesk Cyr Book Itl 19 | 16px | 0.35px         | 24px        | 400    |
| `body-large-italic` | Sharp Grotesk Cyr Book Itl 19 | 20px | 0.25px         | 30px        | 400    |
| `body-small-italic` | Sharp Grotesk Cyr Book Itl 19 | 14px | 0.35px         | 20px        | 400    |
| `body-xs-italic`    | Sharp Grotesk Cyr Book 19     | 12px | 0.35px         | 16px        | 400    |
| `body-xs`           | Sharp Grotesk Cyr Book 19     | 12px | 0.35px         | 16px        | 400    |
| `body-large-bold`   | Sharp Grotesk Cyr Medium 19   | 20px | 0.25px         | 30px        | 500    |

**Font Family Corrections:**

| Token                       | Before                            | After                             |
| --------------------------- | --------------------------------- | --------------------------------- |
| All `title-bold-*` variants | Sharp Grotesk Cyr Semibold **21** | Sharp Grotesk Cyr Semibold **20** |
| `body-bold`                 | Sharp Grotesk Cyr Semibold 20     | Sharp Grotesk Cyr Medium 19       |
| `body-small-bold`           | Sharp Grotesk Cyr Semibold 20     | Sharp Grotesk Cyr Medium 19       |

**Line Height Updates:**

| Token                                  | Before  | After | Notes                                 |
| -------------------------------------- | ------- | ----- | ------------------------------------- |
| `title-2-mobile`                       | 38px    | 40px  | Increased spacing                     |
| `title-4-desktop`                      | 34px    | 36px  | Increased spacing                     |
| `title-bold-6` through `title-bold-11` | Various | 0px   | Browser-calculated (mobile & desktop) |

**Token Consolidation:**

- `title-7`, `title-8`, `title-9`, `title-10`, `title-11`: Merged from separate mobile/desktop variants into single responsive tokens

#### B2B brand

**Line Height Updates:**

| Token                           | Before  | After | Notes                                 |
| ------------------------------- | ------- | ----- | ------------------------------------- |
| `heading-1` through `heading-5` | Various | 0px   | Browser-calculated (mobile & desktop) |
| `display-3-mobile`              | 58px    | 56px  | Reduced spacing                       |

**Token Consolidation:**

- `heading-9`, `heading-10`: Merged from separate mobile/desktop variants into single responsive tokens

**Font Weight Addition:**

- All B2B typography tokens now include explicit `fontWeight: 500`

### 🔧 Code quality

- **TypeScript**: Comprehensive type improvements throughout the codebase
  - Proper interfaces for typography tokens (no more `any` types)
  - Enhanced Zod schema validation
  - Better type safety for Style Dictionary v5 APIs
- **Testing**: All 386 tests passing with updated expectations for opacity suffixes
- **Formatting**: Applied Biome 2.3.4 formatting across all files

### 📚 Documentation

- Added comprehensive [Typography Font Loading Guide](./docs/typography-fonts.md) with framework examples (Next.js, Vite, Vue, Phoenix, etc.)
- Updated USAGE.md with new font loading instructions

### 📦 Package updates

- Updated `@biomejs/biome` to 2.3.4
- Enhanced package.json exports for typography font files

### ⚠️ Breaking changes

- Reported b2b colors issues. Fixed in v.4.0.1.

## [3.4.2](https://github.com/mindvalley/mv-design-system/compare/v3.4.1...v3.4.2) (2025-10-22)

### Bug fixes

- Disable npm provenance for private repository ([#138](https://github.com/mindvalley/mv-design-system/issues/138)) ([df21279](https://github.com/mindvalley/mv-design-system/commit/df212796ce7bfaa60dcc8792649112b977a99456))

## [3.4.0](https://github.com/mindvalley/mv-design-system/compare/v3.3.4...v3.4.0) (2025-09-03)

### Bug fixes

- Improve type safety by removing 'any' types and defining proper interfaces ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Move validation script to bin directory for CI ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Restore typography plugin imports to use source files ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Update test helper to handle TypeScript module imports ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))

### Features

- Add TypeScript support to webpack configuration ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Configure Jest for TypeScript testing ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Convert entry points to TypeScript ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Convert helper utilities to TypeScript ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Convert SVG import utilities to TypeScript ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Convert typography plugin to TypeScript ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
- Update build system to generate TypeScript token files ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))

## [3.3.4](https://github.com/mindvalley/mv-design-system/compare/v3.3.3...v3.3.4) (2025-06-26)

### ⚠ Updates

- **Rebrand**: Workway to Mindvalley Business rebrand implementation. Purple is now the PRIMARY brand color replacing red as part of the company-wide rebranding initiative ([#127](https://github.com/mindvalley/mv-design-system/issues/127)) ([374745a](https://github.com/mindvalley/mv-design-system/commit/374745aa781174ecfd359b0d796b7b491d1caaac))

### Brand color hierarchy changes

**New Mindvalley Business Brand Identity:**

- **Purple is now PRIMARY**: `color.primary.purple.*` - Purple color scale (50-900) now serves as the main brand palette
- **Red demoted to SECONDARY**: `color.secondary.red.*` - Red color scale (50-900) now serves as accent/supporting color

### New colors

- **Purple Alpha Colors**: Added 6 new purple alpha transparency variants for enhanced brand consistency ([374745a](https://github.com/mindvalley/mv-design-system/commit/374745aa781174ecfd359b0d796b7b491d1caaac))

| New Token  | Value       | Opacity |
| ---------- | ----------- | ------- |
| purple-4a  | `#9e94f10a` | 4%      |
| purple-8a  | `#9e94f114` | 8%      |
| purple-12a | `#9e94f11f` | 12%     |
| purple-18a | `#9e94f12e` | 18%     |
| purple-28a | `#9e94f147` | 28%     |
| purple-70a | `#9e94f1b2` | 70%     |

#### Design references

- [B2B Foundations Design System](https://www.figma.com/design/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?node-id=1-395&t=CbV3RJzhIYPsHL0t-1)

## [3.3.3](https://github.com/mindvalley/mv-design-system/compare/v3.3.2...v3.3.3) (2025-03-26)

### Bug fixes

- Added new SVG icons for UI components for b2b and mindvalley core ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
- Cleaned up and optimized SVG sprites for better performance and added new icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
- Optimizes and cleaned up SVG icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
- Removed white fill on facebook icon ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
- Updated broken unmute icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
- Updated mindvalley audio SVG icons for consistency ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))

## [3.3.2](https://github.com/mindvalley/mv-design-system/compare/v3.3.1...v3.3.2) (2025-02-05)

### Updates

- **typography:** Update typography tokens for B2B and Mindvalley ([8889725](https://github.com/mindvalley/mv-design-system/commit/88897253eeb345e343a8bc92074979456466a399))

| Brand            | Update                                                                         |
| ---------------- | ------------------------------------------------------------------------------ |
| B2b              | Added heading 10 typography                                                    |
| Mindvalley & B2b | Updated letter spacing to use newly updated pixel values (No impact on output) |

- **Color:** Added `red-70a` color token (ff6d5cb2) into B2b alpha color set

## [3.3.1](https://github.com/mindvalley/mv-design-system/compare/v3.3.0...v3.3.1) (2024-12-18)

### Features

- **Colors:** Added alpha-based accent colors for black and white ([86c8a5e](https://github.com/mindvalley/mv-design-system/commit/86c8a5ee6f832596292cefead4e5f9820cf3bd6e))

  | Color     | Alpha | Hex Value   |
  | --------- | ----- | ----------- |
  | black-24a | 24%   | `#0000003d` |
  | black-40a | 40%   | `#00000066` |
  | black-50a | 50%   | `#00000080` |
  | black-60a | 60%   | `#00000099` |
  | black-80a | 80%   | `#000000cc` |
  | black-90a | 90%   | `#000000e5` |
  | white-4a  | 4%    | `#ffffff0a` |
  | white-6a  | 6%    | `#ffffff0f` |
  | white-40a | 40%   | `#ffffff66` |
  | white-50a | 50%   | `#ffffff80` |
  | white-60a | 60%   | `#ffffff99` |
  | white-80a | 80%   | `#ffffffcc` |

- **B2b colors:** Added alpha-based brown accent color for B2B `dark-brown-4a` (4% opacity) [#87796](https://github.com/mindvalley/mv-design-system/issues/87796)f0a ([86c8a5e](https://github.com/mindvalley/mv-design-system/commit/86c8a5ee6f832596292cefead4e5f9820cf3bd6e)), closes [#87796f0](https://github.com/mindvalley/mv-design-system/issues/87796f0)

## [3.3.0](https://github.com/mindvalley/mv-design-system/compare/v3.2.5...v3.3.0) (2024-10-22)

### Features

- **Icon Organization:** Introduced new brand-based icon structure ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))
  - Add namespaced paths for brand-specific icons:
    - Mindvalley: `./src/assets/brands/mindvalley/icons/`
    - B2B: `./src/assets/brands/b2b/icons/`
  - ⚠️ Legacy paths will be deprecated in future versions
  - For details, see [Icon Usage Guide](./docs/USAGE.md#️-icons)

- **Mindvalley Core Icons:**
  - Added new icons ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712)):

  | Category | Icons                                                            |
  | -------- | ---------------------------------------------------------------- |
  | ui icons | audio, mic, pause, google, filter, polls, share, archive, gender |
  - Updated existing UI icons ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712)):

  | Category | Icons                                             |
  | -------- | ------------------------------------------------- |
  | ui icons | unmute, pause-circle, facebook, pods, trending-up |

- **SVG Assets:** Generated brand-specific sprite files ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))
  - Mindvalley brand sprites
  - B2B sprites
  - Legacy MV icon sprites

### Bug fixes

- **Build:** Updated clean:docs script with glob pattern support ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))\* **Mindvalley Core Icons:**

### Documentation

- **Icons:**
  - Added comprehensive migration guide for new icon structure
  - Updated documentation with brand-specific paths
  - Revised markdown files for B2B and Mindvalley icons

## [3.2.5](https://github.com/mindvalley/mv-design-system/compare/v3.2.4...v3.2.5) (2024-07-15)

### Added

#### Typography

- Added new body font to mindvalley core design system - `body-large`

| Style      | Font Family               | Font Size | Letter Spacing | Line Height |
| ---------- | ------------------------- | --------- | -------------- | ----------- |
| body-large | Sharp Grotesk Cyr Book 19 | 20px      | 0.25px         | 30px        |

#### Color

- New alpha colors added to b2b. Here is the full list.

| Color name     | Color hex |
| -------------- | --------- |
| brown-8a       | #f9f8f414 |
| brown-12a      | #f9f8f41f |
| brown-24a      | #f9f8f43d |
| brown-90a      | #f9f8f4e5 |
| dark-brown-8a  | #87796f14 |
| dark-brown-12a | #87796f1f |
| dark-brown-24a | #87796f3d |
| dark-brown-80a | #87796fcc |
| red-4a         | #ff6d5c0a |
| red-8a         | #ff6d5c14 |
| red-12a        | #ff6d5c1f |
| red-18a        | #ff6d5c2e |
| red-28a        | #ff6d5c47 |

## [3.2.4](https://github.com/mindvalley/mv-design-system/compare/v3.2.3...v3.2.4) (2024-03-28)

### Added

- Introduced a comprehensive suite of typography settings tailored for both Mindvalley Core and B2B platforms, enhancing visual consistency across applications.
- Refreshed font face definitions across our design system.

### Mindvalley Core typography

| Style                   | Font Family                   | Font Size | Letter Spacing | Line Height |
| ----------------------- | ----------------------------- | --------- | -------------- | ----------- |
| body                    | Sharp Grotesk Cyr Book 19     | 16px      | 0.35px         | 24px        |
| body-small              | Sharp Grotesk Cyr Book 19     | 14px      | 0.35px         | 20px        |
| body-bold               | Sharp Grotesk Cyr Semibold 20 | 16px      | 0.35px         | 24px        |
| body-small-bold         | Sharp Grotesk Cyr Semibold 20 | 14px      | 0.35px         | 20px        |
| body-2xs                | Sharp Grotesk Cyr Book 19     | 10px      | 0.50px         | 15px        |
| body-3xs                | Sharp Grotesk Cyr Book 19     | 8px       | 0.50px         | 12px        |
| timer-text              | Sharp Grotesk Cyr Book 19     | 44px      | 0.25px         | 52px        |
| timer-text-medium       | Sharp Grotesk Cyr Book 19     | 36px      | 0.25px         | 44px        |
| timer-text-small        | Sharp Grotesk Cyr Book 19     | 28px      | 0.25px         | 34px        |
| caption-disclaimer      | Sharp Grotesk Cyr Book 19     | 12px      | 0.50px         | 16px        |
| overline-text           | Sharp Grotesk Cyr Medium 20   | 14px      | 0.50px         | 20px        |
| button-text             | Sharp Grotesk Cyr Medium 20   | 16px      | 0.25px         | 20px        |
| button-text-medium      | Sharp Grotesk Cyr Medium 20   | 14px      | 0.25px         | 18px        |
| button-text-small       | Sharp Grotesk Cyr Medium 20   | 12px      | 0.35px         | 16px        |
| title-bold-1 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 48px      | 0.25px         | 56px        |
| title-bold-1 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 72px      | 0.25px         | 80px        |
| title-bold-2 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 36px      | 0.25px         | 44px        |
| title-bold-2 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 60px      | 0.25px         | 68px        |
| title-bold-3 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 30px      | 0.25px         | 36px        |
| title-bold-3 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 48px      | 0.25px         | 56px        |
| title-bold-4 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 28px      | 0.25px         | 34px        |
| title-bold-4 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 36px      | 0.25px         | 44px        |
| title-bold-5 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 24px      | 0.25px         | 30px        |
| title-bold-5 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 28px      | 0.25px         | 34px        |
| title-bold-6 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 22px      | 0.25px         | 26px        |
| title-bold-6 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 24px      | 0.25px         | 30px        |
| title-bold-7 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 20px      | 0.25px         | 24px        |
| title-bold-7 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 22px      | 0.25px         | 26px        |
| title-bold-8 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 18px      | 0.25px         | 22px        |
| title-bold-8 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 20px      | 0.25px         | 24px        |
| title-bold-9 (mobile)   | Sharp Grotesk Cyr Semibold 21 | 16px      | 0.25px         | 20px        |
| title-bold-9 (desktop)  | Sharp Grotesk Cyr Semibold 21 | 18px      | 0.25px         | 22px        |
| title-bold-10 (mobile)  | Sharp Grotesk Cyr Semibold 21 | 14px      | 0.25px         | 18px        |
| title-bold-10 (desktop) | Sharp Grotesk Cyr Semibold 21 | 16px      | 0.25px         | 20px        |
| title-bold-11 (mobile)  | Sharp Grotesk Cyr Semibold 21 | 12px      | 0.25px         | 16px        |
| title-bold-11 (desktop) | Sharp Grotesk Cyr Semibold 21 | 14px      | 0.25px         | 18px        |
| title-1 (mobile)        | Sharp Grotesk Cyr Medium 20   | 36px      | 0.25px         | 44px        |
| title-1 (desktop)       | Sharp Grotesk Cyr Medium 20   | 60px      | 0.25px         | 68px        |
| title-2 (mobile)        | Sharp Grotesk Cyr Medium 20   | 32px      | 0.25px         | 38px        |
| title-2 (desktop)       | Sharp Grotesk Cyr Medium 20   | 48px      | 0.25px         | 56px        |
| title-3 (mobile)        | Sharp Grotesk Cyr Medium 20   | 28px      | 0.25px         | 34px        |
| title-3 (desktop)       | Sharp Grotesk Cyr Medium 20   | 36px      | 0.25px         | 44px        |
| title-4 (mobile)        | Sharp Grotesk Cyr Medium 20   | 24px      | 0.25px         | 30px        |
| title-4 (desktop)       | Sharp Grotesk Cyr Medium 20   | 28px      | 0.25px         | 34px        |
| title-5 (mobile)        | Sharp Grotesk Cyr Medium 20   | 20px      | 0.25px         | 24px        |
| title-5 (desktop)       | Sharp Grotesk Cyr Medium 20   | 24px      | 0.25px         | 30px        |
| title-6 (mobile)        | Sharp Grotesk Cyr Medium 20   | 18px      | 0.25px         | 22px        |
| title-6 (desktop)       | Sharp Grotesk Cyr Medium 20   | 20px      | 0.25px         | 24px        |
| title-7 (mobile)        | Sharp Grotesk Cyr Medium 20   | 16px      | 0.25px         | 20px        |
| title-7 (desktop)       | Sharp Grotesk Cyr Medium 20   | 16px      | 0.25px         | 20px        |
| title-8 (mobile)        | Sharp Grotesk Cyr Medium 20   | 14px      | 0.25px         | 18px        |
| title-8 (desktop)       | Sharp Grotesk Cyr Medium 20   | 14px      | 0.25px         | 18px        |
| title-9 (mobile)        | Sharp Grotesk Cyr Medium 20   | 12px      | 0.35px         | 16px        |
| title-9 (desktop)       | Sharp Grotesk Cyr Medium 20   | 12px      | 0.35px         | 16px        |
| title-10 (mobile)       | Sharp Grotesk Cyr Medium 20   | 10px      | 0.35px         | 14px        |
| title-10 (desktop)      | Sharp Grotesk Cyr Medium 20   | 10px      | 0.35px         | 14px        |
| title-11 (mobile)       | Sharp Grotesk Cyr Medium 20   | 8px       | 0.35px         | 12px        |
| title-11 (desktop)      | Sharp Grotesk Cyr Medium 20   | 8px       | 0.35px         | 12px        |
| display-1 (mobile)      | Sharp Grotesk Cyr Bold 16     | 64px      | 0.25px         | 62px        |
| display-1 (desktop)     | Sharp Grotesk Cyr Bold 16     | 96px      | 0.25px         | 92px        |
| display-2 (mobile)      | Sharp Grotesk Cyr Bold 16     | 48px      | 0.25px         | 46px        |
| display-2 (desktop)     | Sharp Grotesk Cyr Bold 16     | 60px      | 0.25px         | 58px        |
| display-3 (mobile)      | Sharp Grotesk Cyr Bold 16     | 32px      | 0.25px         | 35px        |
| display-3 (desktop)     | Sharp Grotesk Cyr Bold 16     | 44px      | 0.25px         | 48px        |
| display-4 (mobile)      | Sharp Grotesk Cyr Bold 16     | 26px      | 0.25px         | 28px        |
| display-4 (desktop)     | Sharp Grotesk Cyr Bold 16     | 32px      | 0.25px         | 35px        |

### B2B typography

| Style               | Font Family                 | Font Size | Letter Spacing | Line Height |
| ------------------- | --------------------------- | --------- | -------------- | ----------- |
| display-1 (mobile)  | Sharp Grotesk Cyr Medium 22 | 80px      | 0.25px         | 96px        |
| display-1 (desktop) | Sharp Grotesk Cyr Medium 22 | 100px     | 0.25px         | 115px       |
| display-2 (mobile)  | Sharp Grotesk Cyr Medium 22 | 60px      | 0.25px         | 72px        |
| display-2 (desktop) | Sharp Grotesk Cyr Medium 22 | 80px      | 0.25px         | 96px        |
| display-3 (mobile)  | Sharp Grotesk Cyr Medium 22 | 48px      | 0.25px         | 58px        |
| display-3 (desktop) | Sharp Grotesk Cyr Medium 22 | 60px      | 0.25px         | 72px        |
| heading-1 (mobile)  | Sharp Grotesk Cyr Medium 22 | 32px      | 0.25px         | 40px        |
| heading-1 (desktop) | Sharp Grotesk Cyr Medium 22 | 48px      | 0.25px         | 60px        |
| heading-2 (mobile)  | Sharp Grotesk Cyr Medium 22 | 28px      | 0.25px         | 35px        |
| heading-2 (desktop) | Sharp Grotesk Cyr Medium 22 | 36px      | 0.25px         | 45px        |
| heading-3 (mobile)  | Sharp Grotesk Cyr Medium 22 | 24px      | 0.25px         | 30px        |
| heading-3 (desktop) | Sharp Grotesk Cyr Medium 22 | 28px      | 0.25px         | 35px        |
| heading-4 (mobile)  | Sharp Grotesk Cyr Medium 22 | 20px      | 0.25px         | 25px        |
| heading-4 (desktop) | Sharp Grotesk Cyr Medium 22 | 24px      | 0.25px         | 30px        |
| heading-5 (mobile)  | Sharp Grotesk Cyr Medium 22 | 18px      | 0.25px         | 23px        |
| heading-5 (desktop) | Sharp Grotesk Cyr Medium 22 | 20px      | 0.25px         | 25px        |
| heading-6 (mobile)  | Sharp Grotesk Cyr Medium 22 | 16px      | 0.25px         | 21px        |
| heading-6 (desktop) | Sharp Grotesk Cyr Medium 22 | 18px      | 0.25px         | 23px        |
| heading-7 (mobile)  | Sharp Grotesk Cyr Medium 22 | 14px      | 0.25px         | 19px        |
| heading-7 (desktop) | Sharp Grotesk Cyr Medium 22 | 16px      | 0.25px         | 21px        |
| heading-8 (mobile)  | Sharp Grotesk Cyr Medium 22 | 12px      | 0.25px         | 17px        |
| heading-8 (desktop) | Sharp Grotesk Cyr Medium 22 | 14px      | 0.25px         | 19px        |
| heading-9 (mobile)  | Sharp Grotesk Cyr Medium 22 | 10px      | 0.35px         | 14px        |
| heading-9 (desktop) | Sharp Grotesk Cyr Medium 22 | 12px      | 0.35px         | 17px        |

- _Note in the final versions of the output css the values are updated to relative units (rems)_

### Bug fixes

- Add missing mapping for b2b typography ([#89](https://github.com/mindvalley/mv-design-system/issues/89)) ([7a6a043](https://github.com/mindvalley/mv-design-system/commit/7a6a0438f5060fc6144364d2c74b5ef31c4302db))

### Breaking changes

- Starting from version 3.2.3 and 3.2.4 the font faces have been updated to the use the full typography fontface. Please adapt to the newly established font faces as outlined in the updated section on typography usage within our documentation.

## [3.2.3](https://github.com/mindvalley/mv-design-system/compare/v3.2.2...v3.2.3) (2024-03-27)

### Bug fixes

- Add fontFamily from comments ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))
- Update font-family names in USAGE.md ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))

## [3.2.2](https://github.com/mindvalley/mv-design-system/compare/v3.2.1...v3.2.2) (2024-02-29)

### Bug fixes

- Updated line height on body 2xs typography style to rem ([#84](https://github.com/mindvalley/mv-design-system/issues/84)) ([e04e518](https://github.com/mindvalley/mv-design-system/commit/e04e518090e3c1b9f43f19cd8fa7c396380ce4d1))

## [3.2.1](https://github.com/mindvalley/mv-design-system/compare/v3.2.0...v3.2.1) (2024-02-19)

### Added

- Added new icons ([e342c2f](https://github.com/mindvalley/mv-design-system/commit/e342c2fbcacadb84baeb7586f4a02709d8f8a80b))
- Added new wordmarks ([e342c2f](https://github.com/mindvalley/mv-design-system/commit/e342c2fbcacadb84baeb7586f4a02709d8f8a80b))
- Adding prefix and casing option ([440bc36](https://github.com/mindvalley/mv-design-system/commit/440bc362f7dfa659d1ed20828903184d701ae0f2))

| Classification Title  | Icons                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wordmark - Portuguese | wordmark-body-portuguese<br>wordmark-career-portuguese<br>wordmark-entrepreneurship-portuguese<br>wordmark-mind-portuguese<br>wordmark-parenting-portuguese<br>wordmark-partner-programs-portuguese<br>wordmark-relationships-portuguese<br>wordmark-soul-portuguese                                                                                                                                                                                                |
| UI Icons              | android<br>apple<br>calendar-reminder-filled<br>calendar-reminder-outlined<br>message-request-filled<br>message-request-outlined<br>messenger<br>playlist-filled<br>playlist-outlined<br>pods-filled<br>pods-outlined<br>share-arrow-filled<br>share-arrow-outlined<br>shorts<br>shuffle-filled<br>shuffle-outlined<br>sliders-2-filled<br>sliders-2-outlined<br>telegram<br>type-size-filled<br>type-size-outlined<br>unmute-filled<br>unmute-outlined<br>whatsapp |
| Topic Wordmarks       | coming-soon-becoming-irresistibly-sexy<br>coming-soon-develop-your-supplement-routine<br>coming-soon-gain-financial-freedom<br>coming-soon-gut-health<br>coming-soon-release-your-past-craft-a-new-future<br>coming-soon-the-champion-mindset<br>coming-soon-the-stage-effect                                                                                                                                                                                       |
| Trainers Wordmarks    | donna-eden-david-feinstein-left<br>dr-laura-berman-left<br>dr-laura-berman<br>dr-srikumar-rao-left<br>dr-srikumar-rao<br>florencia-andres-left<br>jeffrey-perlman<br>jimmy-naraine<br>john-lee-left<br>john-lee<br>left-anodea-judith<br>left-antwone-stigall<br>marisa-peer-left<br>marisha-lakhiani-left<br>marisha-lakhiani<br>nuseir-yassin                                                                                                                     |

## [3.2.0](https://github.com/mindvalley/mv-design-system/compare/v3.1.2...v3.2.0) (2024-02-06)

### Features

- Introduced `/b2b` namespace to facilitate access to B2B brand color palette.

  | Color Name | Color Value              |
  | ---------- | ------------------------ |
  | red-18a    | rgba(255, 109, 92, 0.18) |
  | red-12a    | rgba(255, 109, 92, 0.12) |
  | red-8a     | rgba(255, 109, 92, 0.08) |
  | red-4a     | rgba(255, 109, 92, 0.04) |
  | teal-50    | #f1fcfb                  |
  | teal-100   | #d1f6f3                  |
  | teal-200   | #a3ece8                  |
  | teal-300   | #6ddbda                  |
  | teal-400   | #3cbcbe                  |
  | teal-500   | #25a4a7                  |
  | teal-600   | #1b8186                  |
  | teal-700   | #1a6367                  |
  | teal-800   | #194448                  |
  | teal-900   | #09252a                  |
  | purple-50  | #f5f4fe                  |
  | purple-100 | #ecebfc                  |
  | purple-200 | #dad9fb                  |
  | purple-300 | #bfbbf7                  |
  | purple-400 | #9e94f1                  |
  | purple-500 | #7e68ea                  |
  | purple-600 | #664bca                  |
  | purple-700 | #4d2daa                  |
  | purple-800 | #40268c                  |
  | purple-900 | #26175e                  |
  | brown-50   | #f9f8f4                  |
  | brown-100  | #f3efe9                  |
  | brown-200  | #ede6de                  |
  | brown-300  | #d4c5ba                  |
  | brown-400  | #ae9f95                  |
  | brown-500  | #87796f                  |
  | brown-600  | #6f635c                  |
  | brown-700  | #574e48                  |
  | brown-800  | #3f3835                  |
  | brown-900  | #272221                  |
  | blue-50    | #f0f6fe                  |
  | blue-100   | #dce9fd                  |
  | blue-200   | #c2dafb                  |
  | blue-300   | #98c3f8                  |
  | blue-400   | #67a3f3                  |
  | blue-500   | #4380ee                  |
  | blue-600   | #3165e3                  |
  | blue-700   | #204bb4                  |
  | blue-800   | #192e75                  |
  | blue-900   | #121f54                  |
  | red-50     | #fff2f1                  |
  | red-100    | #ffe4e2                  |
  | red-200    | #ffada7                  |
  | red-300    | #ff8d82                  |
  | red-400    | #ff6d5c                  |
  | red-500    | #e85546                  |
  | red-600    | #d03c2f                  |
  | red-700    | #a83126                  |
  | red-800    | #782b24                  |
  | red-900    | #41120e                  |

- Enhanced design repository to accommodate both Mindvalley brand and B2B specific design tokens ([603713e](https://github.com/mindvalley/mv-design-system/commit/603713e80409a394c282515da935a3b7cca47029)).

- Integrated support for B2B typography tokens and refined core typography imports ([603713e](https://github.com/mindvalley/mv-design-system/commit/603713e80409a394c282515da935a3b7cca47029)).

- Add exports configuration to package.json ([603713e](https://github.com/mindvalley/mv-design-system/commit/603713e80409a394c282515da935a3b7cca47029))

- Added new ttypography styles for B2b

  | Style    | Description                                 |
  | -------- | ------------------------------------------- |
  | body 2xs | Sharp Grotesk Cyr Book 400 (new font added) |
  | body 3xs | Sharp Grotesk Cyr Book 400 (new font added) |
  | title-11 | New style                                   |

- Use nodejs node config for expandability to support brands ([603713e](https://github.com/mindvalley/mv-design-system/commit/603713e80409a394c282515da935a3b7cca47029))

- Added new accented colors

#### Black

| Color Name | Color Value |
| ---------- | ----------- |
| 4a         | #0000000a   |
| 6a         | #0000000f   |
| 8a         | #00000014   |
| 12a        | #0000001f   |
| 18a        | #0000002e   |
| 70a        | #000000b2   |

#### White

| Color Name | Color Value |
| ---------- | ----------- |
| 12a        | #ffffff1f   |
| 18a        | #ffffff2e   |
| 24a        | #ffffff3d   |
| 70a        | #ffffffb2   |
| 8a         | #ffffff14   |

### Breaking changes

- Updated `body-bold` typography: Adjusted letterSpacing from 1.56% to 2.19%.
- Removed the following accent colors

#### Black

| Name | Hex Value |
| ---- | --------- |
| 10a  | #0000001a |
| 20a  | #00000033 |
| 30a  | #0000004d |

#### White

| Name | Hex Value |
| ---- | --------- |
| 30a  | #ffffff4d |

## [3.1.2](https://github.com/mindvalley/mv-design-system/compare/v3.1.1...v3.1.2) (2023-11-14)

### Bug fixes

- Fix broken typography font family
- Remove rounding of typography values ([fb1fd1e](https://github.com/mindvalley/mv-design-system/commit/fb1fd1e4182625b72f406bc64a49aeabfc9f3d76))

### Documentation

- Added documentation for icons and wordmarks usage
- Added contribution docs on the icons and wordmark processing flow
- Update guide on how to update icons

### Builds

- Add easy way to fetch and format icons and wordmark svgs, sprite files
- Added a new way to access the icons see the usage guide for more details

## [3.1.1](https://github.com/mindvalley/mv-design-system/compare/v3.1.0...v3.1.1) (2023-11-09)

### Bug fixes

- Bundle the typography tokens with the package ([0def7ea](https://github.com/mindvalley/mv-design-system/commit/0def7eafb891427eec53d0cdcd65e2184cd2e9f7))

## [3.1.0](https://github.com/mindvalley/mv-design-system/compare/v3.0.3...v3.1.0) (2023-11-09)

### Features

- Add display 1 and display 2 typography ([abe73ae](https://github.com/mindvalley/mv-design-system/commit/abe73aef47d8bdc0af0bcfc1dcce173a4750531d))
  [Display typography](https://www.figma.com/file/IRHTWVpxofViHrYW3DiLDH/AQS-Brand-Components?type=design&node-id=1:355&mode=design&t=je1mmTFTLXm6Ea7S-1)

New typography classes added

- display-1
- display-2

### Notice

- A bug has been identified where typography tokens are not working as expected when the package is published to NPM. This issue is fixed in version 3.1.2.

## [3.0.3](https://github.com/mindvalley/mv-design-system/compare/v3.0.2...v3.0.3) (2023-11-09)

### Documentation

- Add documentation listing descriptions and example returns for custom transforms

### Code refactoring

- Replace typography plugin with refactored rewrite (0603ec5)
- Refactor function for processing typography to remove redundant logic (cb89d3b)

### Builds

- Replace hardcoded typography list in typography plugin with transformed assets from supernova (482a662, plugins)
- Introduce transformations to typography asset (bdef462, utilities)

### Notice

It has come to our attention that there is a bug affecting typography tokens due to a missing 'build' folder reference. This issue has been addressed in the subsequent 3.1.2 release.

## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)

### Bug fixes

- update title-bold-1 mobile letter spacing json value ([c20cbf2](https://github.com/mindvalley/mv-design-system/commit/c20cbf223b4bdf6dcf17fcd962c29a9399f20d1a))

## [3.0.1](https://github.com/mindvalley/mv-design-system/compare/v3.0.0...v3.0.1) (2023-09-18)

### Bug fixes

- **typography:** update title bold 1 letter spacing ([29e0622](https://github.com/mindvalley/mv-design-system/commit/29e062249a623c2ade78a91861edd9a3d95bcb47))

## [2.4.0] (2023-06-03)

Color updates

### New values

- New alpha colors added

| Name           | Color                    |
| -------------- | ------------------------ |
| purple-500-90a | rgba(186, 98, 253, 0.9)  |
| purple-500-20a | rgba(186, 98, 253, 0.2)  |
| purple-600-10a | rgba(122, 18, 212, 0.1)  |
| black-30a      | rgba(0, 0, 0, 0.3)       |
| black-20a      | rgba(0, 0, 0, 0.2)       |
| black-10a      | rgba(0, 0, 0, 0.1)       |
| white-90a      | rgba(255, 255, 255, 0.9) |
| white-30a      | rgba(255, 255, 255, 0.3) |
| white-10a      | rgba(255, 255, 255, 0.1) |

### ⚠ Breaking changes

#### Removed colors

- warm-gray colors are no longer used.

| Name          | Color   |
| ------------- | ------- |
| warm-grey-100 | #fafafa |
| warm-grey-150 | #f5f5f5 |
| warm-grey-200 | #ebebeb |
| warm-grey-250 | #d6d6d6 |
| warm-grey-300 | #c2c2c2 |
| warm-grey-350 | #b3b3b3 |
| warm-grey-400 | #999999 |
| warm-grey-450 | #808080 |
| warm-grey-500 | #666666 |
| warm-grey-550 | #4d4d4d |
| warm-grey-600 | #333333 |
| warm-grey-650 | #242424 |
| warm-grey-700 | #1a1a1a |
| cyan          | #00f2f2 |
| lemon         | #fff000 |
| lime          | #bced09 |
| magenta       | #fb03ff |
| rose          | #ff68a8 |

#### Updated name

| Color value | Old Name     | New Name    |
| ----------- | ------------ | ----------- |
| #9b37f2     | brand-accent | purple-tint |

## [2.3.0] (2023-03-22)

### Added

- Added `timerText`, `timerTextMedium` and `timerTextSmall` utility classes.

### Changed

- Updated some mobile typography

##### Heading styles

| Typography class | Font size    | Line height  |
| ---------------- | ------------ | ------------ |
| titleBold1       | 60px -> 48px | 68px -> 56px |
| titleBold2       | 44px -> 36px | 52px -> 44px |
| titleBold3       | 36px -> 30px | 44px -> 36px |
| titleBold4       | 32px -> 28px | 38px -> 34px |

##### Title styles

| Typography class | Font size    | Line height  |
| ---------------- | ------------ | ------------ |
| title1           | 48px -> 36px | 56px -> 44px |
| title2           | 36px -> 32px | 44px -> 38px |
| title3           | 32px -> 28px | 38px > 34px  |
| title4           | 28px -> 24px | 34px > 30px  |
| title5           | 24px -> 20px | 30px -> 24px |
| title6           | 20px -> 18px | 24px -> 22px |

### ⚠ Breaking changes

- Utility classes removed: `disclaimerText` and `caption`. They are now all `captionDisclaimer`.

**Note:** The above changes may impact the appearance of the website or application. Please review the changes before updating to this version.

Link to the update: - Update typography plugin (#30) 8b34a83

## [2.2.1] (2023-01-05)

### Bug fixes

- Fixed issues with typography plugin not generating classnames properly when kebab casing was selected.

### Additions

- Improved test coverage for casing and unit conversion helper functions.
- Updated documentation.

## [2.2.0] (2022-12-07)

### Features

- Added tailwindCSS an easy to use Typography plugin that generates the typography classes used in Mindvalley. See the [guide on how to use the plugin](https://github.com/mindvalley/mv-design-system/blob/main/docs/USAGE.md#%EF%B8%8F-typography)

## [2.1.0] (2022-11-03)

### Features

- Optimized icons: Changes made to the svg path for all icons. There is no visual change on the icons.
- Updated documentation on [how to generate icons from figma](./docs/CONTRIBUTION.md#how-to-generate-icons-from-figma-to-code).
- Added a way to see the rendered icons.

### ⚠ Breaking changes

- Renamed `ico-spiritual-outline.svg` to `spiritual-outline.svg`
- Renamed `icon-body.svg` to `body.svg`
- Renamed `icon-career.svg` to `career.svg`
- Renamed `icon-entrepreneurship.svg` to`entrepreneurship.svg`
- Renamed `icon-mind.svg` to `mind.svg`
- Renamed `icon-parenting.svg` to`parenting.svg`
- Renamed `icon-partner-programs.svg` to `partner-programs.svg`
- Renamed `icon-relationships.svg` to `relationships.svg`
- Renamed `icon-soul.svg` to `soul.svg`

## [2.0.0] (2022-09-27)

### Features

- Add Brand accent color `#9b37f2`: This color is only used in the purple gradient.
- Updated documentation on [how to use gradients](./docs/USAGE.md#gradients).
- Full list of [colors available as of v2.0.0](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=1213506650).

### Fixes

- `purple-500` color show correct value of `#ba62fd`
- Remove the _node engine_ value in mv-design system to support all node versions. Now repos running node version < `16.8.0` can use the package without warning or errors.

### ⚠ Breaking changes

- Removed wave colors defined using linear gradients. We no longer have brand blue and brand purple instead use blue-700 and purple-600. See guide on how to [use gradients](./docs/USAGE.md#gradients).
- Removed deprecated list of icon names. See [full list of available icons](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208) in v2.0.0.

## [1.3.0] (2022-07-20)

### ⚠ Breaking changes

- Renamed all icons with the name `stroke` to `outline`. E.g `activity-stroke` is now `activity-outline`.
- Renamed icons to follow the convention `<icons-name-type>` where type is `outline` or `filled`. E.g`alert-filled-circle` is now `alert-circle-filled`.
- Remove white space on icon names. E.g `carret - left-stroke` is now `carret-left-stroke`.

See comprehensive list of icon name changes [here](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208).

### Features

- Category Icons added: see [Category icons on Figma](https://www.figma.com/file/0b2swzflgtIMoELPgj4TVI/MV-Icons?node-id=32%3A3)
- See list of [icon names](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208)

## [1.2.0] (2022-07-19)

### ⚠ Breaking changes

- Dark naming for color has been removed to match the tailwind style 50-900 with the dark color being <color>-600. So dark pink is now pink-600, dark red is now red-600 etc.

- All base colors are now prefixed with a 500. So green is now green-500, orange is now orange-500 etc.
- Addition of yellow, orange, blue and purple gradients.
- We no longer have brand blue and brand purple instead use `blue-700` and `purple-600`.

  See the full list of [colors on figma](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257)

## [1.1.0] (2022-07-12)

- Removed references to brand.mindvalley.com: The team is no longer updating the online guide and is now working from Figma.

## [1.0.0] (2022-07-11)

### Bug fixes

- NPM TOKEN: edited readme with releases information [92dc7ee](https://github.com/mindvalley/mv-design-system/commit/92dc7eee8f4078c16ff0ece32deb225e8815f7ac)

### Features

- Icons: 🏗️ add pregenerated sprite from svgs [dcf133e](https://github.com/mindvalley/mv-design-system/pull/9/commits/dcf133e4009fd269b27fc1e34ae1608ac3b40239)
- Icons: add svg icons [38d10fa](https://github.com/mindvalley/mv-design-system/pull/9/commits/38d10fa65fa047b5642f47ff8497ad2c8401330b)