# Migrating to Google Sans Flex

This guide helps you migrate from Sharp Grotesk typography to Google Sans Flex (GSF).

## Overview

Google Sans Flex is the new typography system. Sharp Grotesk remains available for backward compatibility but is frozen and will not receive updates.

## Migration steps

### 1. Update font loading

**Before (Sharp Grotesk):**

```typescript
import '@mindvalley/design-system/typography/mindvalley/fonts.css'
```

**After (Google Sans Flex):**

Option A - Add to your HTML `<head>`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
```

Option B - CSS @import (Tailwind v4):

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

@import "tailwindcss";

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

> See [Setup Guide](setup.md) for detailed framework examples.

### 2. Update Tailwind plugin

**Before:**

```typescript
import typography from '@mindvalley/design-system/tailwind/plugins/typography'
```

**After:**

```typescript
import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
```

### 3. Test your app

Class names remain the same - your existing markup should work without modification:

```html
<!-- These classes work with both plugins -->
<h1 class="title-bold-1">Heading</h1>
<p class="body">Body text</p>
<button class="button-text">Click me</button>
```

---

## What changed

### Font family

| System | Font Family |
|--------|-------------|
| Sharp Grotesk | `'Sharp Grotesk Cyr Book 19', Helvetica, Arial, sans-serif` |
| Google Sans Flex | `'Google Sans Flex', Helvetica, Arial, sans-serif` |

### Responsive breakpoints

| System | Breakpoints |
|--------|-------------|
| Sharp Grotesk | 2-tier: mobile, desktop |
| Google Sans Flex | 3-tier: mobile, tablet (768px), desktop (1024px) |

### Font weights

GSF uses CSS `font-weight` values instead of multiple font family files:

| Weight | Sharp Grotesk | Google Sans Flex |
|--------|---------------|------------------|
| Regular | `Sharp Grotesk Cyr Book 19` | `font-weight: 400` |
| Medium | `Sharp Grotesk Cyr Medium 20` | `font-weight: 500` |
| Semibold | `Sharp Grotesk Cyr Semibold 20` | `font-weight: 600` |
| Bold | - | `font-weight: 700` |

### Variable font axes

GSF is a variable font with two axes:

| Axis | CSS Property | Description |
|------|--------------|-------------|
| `wdth` | `font-variation-settings` | Width (92 for body, 100 for titles) |
| `slnt` | `font-variation-settings` | Slant (-10 for italics) |

### New italic variants (GSF only)

GSF introduces italic variants:

- `body-italic`, `body-bold-italic`
- `body-large-italic`, `body-large-bold-italic`
- `body-small-italic`, `body-small-bold-italic`
- `body-xs-italic`

---

## Running both systems

> **Note:** The recommended approach is to migrate fully from Sharp Grotesk to Google Sans Flex. Running both systems simultaneously is not recommended for production use, but is shown here as a technique for gradual migration or A/B testing.

If needed, you can run both typography systems side-by-side using prefixes:

```javascript
// tailwind.config.js
const sharpGrotesk = require('@mindvalley/design-system/tailwind/plugins/typography').default
const googleSansFlex = require('@mindvalley/design-system/tailwind/plugins/typography-gsf').default

module.exports = {
  plugins: [
    sharpGrotesk(), 
    googleSansFlex({ prefix: 'gsf-' }), // or whatever prefix you need.
  ],
}
```

> **Warning:** Both plugins generate identical class names (`.body`, `.title-1`, etc.). Using prefixes is **required** when running both systems together to avoid conflicts. Without prefixes, the second plugin will override the first.

```html
<!-- Sharp Grotesk -->
<h1 class="title-bold-1">Heading</h1>

<!-- Google Sans Flex -->
<h1 class="gsf-title-bold-1">Heading</h1>
```

---

## Troubleshooting

### Font not loading

Ensure you've added the Google Fonts link to your HTML `<head>`.

### Missing tablet breakpoint styles

The GSF plugin supports 3-tier responsive. Ensure you're using the latest version of the design system.

### Class names not generated

Check that your Tailwind content paths include files using typography classes so the JIT compiler includes them.

---

## Related

- [Setup Guide](setup.md) - Complete setup instructions
- [Typography Overview](README.md) - Class reference
