@mindvalley/design-system 4.1.0 → 4.1.2

package/CHANGELOG.md

@@ -1,39 +1,104 @@
-# [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)
+## [4.1.2](https://github.com/mindvalley/mv-design-system/compare/v4.1.1...v4.1.2) (2026-02-06)
 
 
 ### Bug Fixes
 
-* Improve fontFamily regex extraction for TypeScript format ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* **tokens:** Include paragraphIndent and paragraphSpacing in output ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* Patched b2b back colors to how they were in v3.4.2 ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* **tokens:** Resolve merge conflict with correct numeric fontWeight values ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* Update fontWidth to 100 for button, timer, and caption styles ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
+* **icons:** Update docs template for GitHub markdown rendering ([3ad5c5b](https://github.com/mindvalley/mv-design-system/commit/3ad5c5b17e7390409ceba05cef3691dff2de6369))
 
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [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
 
-* **style-dictionary:** Add tablet breakpoint output ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* **build:** Configure GSF typography output path ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
-* **tailwind:** Create typography-gsf plugin with 3-tier responsive support ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
+* **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
 
-### Reverts
+### Migration
 
-* **style-dictionary:** Restore typography description-to-comment preprocessor ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
+* **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
 
-# Changelog
+| System | Responsive Breakpoints |
+|--------|------------------------|
+| Sharp Grotesk (legacy) | mobile → desktop (2-tier) |
+| Google Sans Flex (new) | mobile → tablet (768px) → desktop (1024px) (3-tier) |
 
-All notable changes to this project will be documented in this file.
+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
+### 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)
+## [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
 
-### ✨ Features
+### 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
@@ -42,9 +107,9 @@ All notable changes to this project will be documented in this file.
   * 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
+### 📝 Typography changes
 
-#### Mindvalley Brand
+#### Mindvalley brand
 
 **New Typography Tokens:**
 
@@ -77,7 +142,7 @@ All notable changes to this project will be documented in this file.
 
 * `title-7`, `title-8`, `title-9`, `title-10`, `title-11`: Merged from separate mobile/desktop variants into single responsive tokens
 
-#### B2B Brand
+#### B2B brand
 
 **Line Height Updates:**
 
@@ -94,7 +159,7 @@ All notable changes to this project will be documented in this file.
 
 * All B2B typography tokens now include explicit `fontWeight: 500`
 
-### 🔧 Code Quality
+### 🔧 Code quality
 
 * **TypeScript**: Comprehensive type improvements throughout the codebase
   * Proper interfaces for typography tokens (no more `any` types)
@@ -108,7 +173,7 @@ All notable changes to this project will be documented in this file.
 * 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
+### 📦 Package updates
 
 * Updated `@biomejs/biome` to 2.3.4
 * Enhanced package.json exports for typography font files
@@ -119,13 +184,13 @@ All notable changes to this project will be documented in this file.
 
 ## [3.4.2](https://github.com/mindvalley/mv-design-system/compare/v3.4.1...v3.4.2) (2025-10-22)
 
-### Bug Fixes
+### 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)
+## [3.4.0](https://github.com/mindvalley/mv-design-system/compare/v3.3.4...v3.4.0) (2025-09-03)
 
-### Bug Fixes
+### 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))
@@ -148,7 +213,7 @@ All notable changes to this project will be documented in this file.
 
 * **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
+### Brand color hierarchy changes
 
 **New Mindvalley Business Brand Identity:**
 
@@ -168,13 +233,13 @@ All notable changes to this project will be documented in this file.
 | purple-28a | `#9e94f147` | 28% |
 | purple-70a | `#9e94f1b2` | 70% |
 
-#### Design References
+#### 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
+### 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))
@@ -248,7 +313,7 @@ All notable changes to this project will be documented in this file.
   * B2B sprites
   * Legacy MV icon sprites
 
-### Bug Fixes
+### Bug fixes
 
 * **Build:** Updated clean:docs script with glob pattern support ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))* **Mindvalley Core Icons:**
 
@@ -298,7 +363,7 @@ All notable changes to this project will be documented in this file.
 * 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
+### Mindvalley Core typography
 
 | Style | Font Family | Font Size | Letter Spacing | Line Height |
 |-------|-------------|-----------|----------------|-------------|
@@ -369,7 +434,7 @@ All notable changes to this project will be documented in this file.
 | 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
+### B2B typography
 
 | Style | Font Family | Font Size | Letter Spacing | Line Height |
 |-------|-------------|-----------|----------------|-------------|
@@ -400,24 +465,24 @@ All notable changes to this project will be documented in this file.
 
 * _Note in the final versions of the output css the values are updated to relative units (rems)_
 
-### Bug Fixes
+### 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 change
+### 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
+### 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
+### 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))
 
@@ -528,7 +593,7 @@ All notable changes to this project will be documented in this file.
   | 18a | #0000002e |
   | 70a | #000000b2 |
 
-#### white
+#### White
 
   | Color Name | Color Value |
   |------------|---------------|
@@ -538,12 +603,12 @@ All notable changes to this project will be documented in this file.
   | 70a | #ffffffb2 |
   | 8a | #ffffff14 |
 
-### Breaking change
+### Breaking changes
 
 * Updated `body-bold` typography: Adjusted letterSpacing from 1.56% to 2.19%.
 * Removed the following accent colors
 
-#### black
+#### Black
 
   | Name | Hex Value  |
   |------|------------|
@@ -551,7 +616,7 @@ All notable changes to this project will be documented in this file.
   | 20a  | #00000033 |
   | 30a  | #0000004d |
 
-#### white
+#### White
 
   | Name | Hex Value  |
   |------|------------|
@@ -559,7 +624,7 @@ All notable changes to this project will be documented in this file.
   
 ## [3.1.2](https://github.com/mindvalley/mv-design-system/compare/v3.1.1...v3.1.2) (2023-11-14)
 
-### Bug Fixes
+### Bug fixes
 
 * Fix broken typography font family
 * Remove rounding of typography values ([fb1fd1e](https://github.com/mindvalley/mv-design-system/commit/fb1fd1e4182625b72f406bc64a49aeabfc9f3d76))
@@ -577,11 +642,11 @@ All notable changes to this project will be documented in this file.
 
 ## [3.1.1](https://github.com/mindvalley/mv-design-system/compare/v3.1.0...v3.1.1) (2023-11-09)
 
-### Bug Fixes
+### 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)
+## [3.1.0](https://github.com/mindvalley/mv-design-system/compare/v3.0.3...v3.1.0) (2023-11-09)
 
 ### Features
 
@@ -603,7 +668,7 @@ New typography classes added
 
 * Add documentation listing descriptions and example returns for custom transforms
 
-### Code Refactoring
+### Code refactoring
 
 * Replace typography plugin with refactored rewrite (0603ec5)
 * Refactor function for processing typography to remove redundant logic (cb89d3b)
@@ -619,21 +684,21 @@ It has come to our attention that there is a bug affecting typography tokens due
 
 ## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)
 
-### Bug Fixes
+### 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
+### 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)
+## [2.4.0] (2023-06-03)
 
 Color updates
 
-### New Values
+### New values
 
 * New alpha colors added
 
@@ -649,9 +714,9 @@ Color updates
 | white-30a      | rgba(255, 255, 255, 0.3)    |
 | white-10a      | rgba(255, 255, 255, 0.1)    |
 
-### ⚠ BREAKING CHANGES
+### ⚠ Breaking changes
 
-#### Removed Colors
+#### Removed colors
 
 * warm-gray colors are no longer used.
 
@@ -676,13 +741,13 @@ Color updates
 | magenta          | #fb03ff |
 | rose             | #ff68a8 |
 
-#### Updated Name
+#### Updated name
 
 | Color value   |   Old Name   |  New Name   |
 | ------------- | ------------ | ----------- |
 |   #9b37f2     | brand-accent | purple-tint |
 
-# 2.3.0 (2023-03-22)
+## [2.3.0] (2023-03-22)
 
 ### Added
 
@@ -712,7 +777,7 @@ title4 | 28px -> 24px | 34px > 30px
 title5 | 24px -> 20px | 30px -> 24px
 title6 | 20px -> 18px | 24px -> 22px
 
-### ⚠ BREAKING CHANGES
+### ⚠ Breaking changes
 
 * Utility classes removed: `disclaimerText` and `caption`. They are now all `captionDisclaimer`.
 
@@ -720,24 +785,24 @@ title6 | 20px -> 18px | 24px -> 22px
 
 Link to the update: - Update typography plugin (#30) 8b34a83
 
-# 2.2.1 (2023-01-05)
+## [2.2.1] (2023-01-05)
 
-## Bug Fixes
+### Bug fixes
 
 * Fixed issues with typography plugin not generating classnames properly when kebab casing was selected.
 
-## Additions
+### Additions
 
 * Improved test coverage for casing and unit conversion helper functions.
 * Updated documentation.
 
-# 2.2.0 (2022-12-07)
+## [2.2.0] (2022-12-07)
 
-## Features
+### 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)
+## [2.1.0] (2022-11-03)
 
 ### Features
 
@@ -745,7 +810,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
 * 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
+### ⚠ Breaking changes
 
 * Renamed `ico-spiritual-outline.svg` to `spiritual-outline.svg`
 * Renamed `icon-body.svg` to `body.svg`
@@ -757,7 +822,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
 * Renamed `icon-relationships.svg` to `relationships.svg`
 * Renamed `icon-soul.svg` to `soul.svg`
 
-# 2.0.0 (2022-09-27)
+## [2.0.0] (2022-09-27)
 
 ### Features
 
@@ -770,14 +835,14 @@ Link to the update: - Update typography plugin (#30) 8b34a83
 * `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
+### ⚠ 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)
+## [1.3.0] (2022-07-20)
 
-### ⚠ BREAKING CHANGES
+### ⚠ 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`.
@@ -790,9 +855,9 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
 * 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)
+## [1.2.0] (2022-07-19)
 
-### ⚠ BREAKING CHANGES
+### ⚠ 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.
 
@@ -802,13 +867,13 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
 
   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)
+## [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)
+## [1.0.0] (2022-07-11)
 
-### Bug Fixes
+### Bug fixes
 
 * NPM TOKEN: edited readme with releases information [92dc7ee](https://github.com/mindvalley/mv-design-system/commit/92dc7eee8f4078c16ff0ece32deb225e8815f7ac)
 

package/README.md

@@ -23,7 +23,7 @@ The Mindvalley Design System provides reusable design tokens and assets for buil
 
 #### Getting started
 
-First, we recommend going through the [figma design system](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257). It captures our current views on how best to use the design in your daily work. In the case you don't have access to mentioned figma design system, you can reach out to the channel listed in the [help section](##🤷🏽‍♂️-need-help)
+First, we recommend going through the [figma design system](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257). It captures our current views on how best to use the design in your daily work. In the case you don't have access to mentioned figma design system, you can reach out to the channel listed in the [help section](#-need-help)
 and access will be granted.
 
 Then, you can read the following guides: