@mindvalley/design-system 4.0.1 → 4.1.1

package/dist/tailwind/plugins/typography-gsf.d.ts

@@ -0,0 +1,31 @@
+export interface TypographyToken {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    fontWeight?: number;
+    [key: string]: string | number | undefined;
+}
+export interface TypographySet {
+    [key: string]: TypographyToken;
+}
+export interface BreakpointsConfig {
+    tablet?: string;
+    desktop?: string;
+    [key: string]: string | undefined;
+}
+export interface TypographyPluginOptions {
+    casing?: 'snakeCase' | 'camelCase' | 'pascalCase' | 'kebabCase' | 'noCase';
+    breakpoints?: BreakpointsConfig;
+    prefix?: string;
+    brands?: string[];
+}
+declare const _default: {
+    (options: TypographyPluginOptions | undefined): {
+        handler: import("tailwindcss/types/config").PluginCreator;
+        config?: Partial<import("tailwindcss/types/config").Config>;
+    };
+    __isOptionsFunction: true;
+};
+export default _default;
+//# sourceMappingURL=typography-gsf.d.ts.map

package/dist/tailwind/plugins/typography-gsf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-gsf.d.ts","sourceRoot":"","sources":["../../../src/tailwind/plugins/typography-gsf.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAC3C;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAAA;CAC/B;AAeD,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IAC1E,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;;;;cAzCE,CAAC;;;;AAgPJ,wBAAmD"}

package/dist/tailwind/plugins/typography-gsf.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const plugin_1 = __importDefault(require("tailwindcss/plugin"));
+const casing_1 = require("../../helpers/casing");
+const dimens_1 = require("../../helpers/dimens");
+const typography_1 = __importDefault(require("./tokens/b2b/typography"));
+const typography_gsf_1 = __importDefault(require("./tokens/mindvalley/typography-gsf"));
+const brandMapping = {
+    mindvalley: typography_gsf_1.default,
+    b2b: typography_1.default,
+};
+function typographyPlugin(options = {}) {
+    return ({ addUtilities, theme }) => {
+        const { casing = casing_1.CASINGS.kebabCase, breakpoints = {}, prefix = '', brands = ['mindvalley'], } = options;
+        const tabletBreakpoint = breakpoints.tablet ?? theme('screens.md', '768px');
+        const desktopBreakpoint = breakpoints.desktop ?? theme('screens.lg', '1024px');
+        const typographyClassDeclarations = {};
+        for (const brand of brands) {
+            const brandTypography = brandMapping[brand];
+            if (!brandTypography) {
+                continue;
+            }
+            const processedTypography = processTypography(brandTypography, tabletBreakpoint, desktopBreakpoint);
+            const casedTypography = convertObjectKeysToCasedClassNames(processedTypography, casing, prefix);
+            Object.assign(typographyClassDeclarations, casedTypography);
+        }
+        addUtilities(typographyClassDeclarations);
+    };
+}
+function processTypography(typography, tabletBreakpoint, desktopBreakpoint) {
+    const result = {};
+    for (const key of Object.keys(typography)) {
+        const isDesktop = key.endsWith('-desktop');
+        const isTablet = key.endsWith('-tablet');
+        const isMobile = key.endsWith('-mobile');
+        const baseTypography = typography[key];
+        const baseKey = isDesktop || isTablet || isMobile
+            ? (0, casing_1.toCamelCase)(key.replace(/-desktop$|-tablet$|-mobile$/g, ''))
+            : key;
+        if (isDesktop) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = {
+                ...existing,
+                [`@media (min-width: ${desktopBreakpoint})`]: { ...baseTypography },
+            };
+        }
+        else if (isTablet) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = {
+                ...existing,
+                [`@media (min-width: ${tabletBreakpoint})`]: { ...baseTypography },
+            };
+        }
+        else if (isMobile) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = { ...baseTypography, ...existing };
+        }
+        else {
+            result[baseKey] = baseTypography;
+        }
+    }
+    return result;
+}
+function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASINGS.kebabCase, prefix = '') {
+    const mapKey = (key) => {
+        let className;
+        switch (casing) {
+            case casing_1.CASINGS.snakeCase:
+                className = (0, casing_1.toSnakeCase)(key);
+                break;
+            case casing_1.CASINGS.camelCase:
+                className = (0, casing_1.toCamelCase)(key);
+                break;
+            case casing_1.CASINGS.pascalCase:
+                className = (0, casing_1.toPascalCase)(key);
+                break;
+            case casing_1.CASINGS.kebabCase:
+                className = (0, casing_1.toKebabCase)(key);
+                break;
+            case casing_1.CASINGS.noCase:
+                className = (0, casing_1.toNoCase)(key);
+                break;
+            default:
+                console.error(`${casing} is currently not supported in this function, reverting to default ${casing_1.CASINGS.kebabCase}. Please raise an issue ticket here[https://github.com/mindvalley/mv-design-system]`);
+                className = (0, casing_1.toKebabCase)(key);
+        }
+        return prefix ? `.${prefix}${className}` : `.${className}`;
+    };
+    function mapVal(value) {
+        const res = {};
+        const variationSettings = [];
+        Object.keys(value).forEach((key) => {
+            const propValue = value[key];
+            if (key === 'lineHeight' && typeof propValue === 'string') {
+                res[key] = (0, dimens_1.lineHeightToRem)(propValue);
+            }
+            else if (['fontSize', 'letterSpacing'].includes(key) && typeof propValue === 'string') {
+                res[key] = (0, dimens_1.strPxToRemStr)(propValue);
+            }
+            else if (key === 'fontWidth' && typeof propValue === 'number') {
+                variationSettings.push(`"wdth" ${propValue}`);
+            }
+            else if (key === 'slant' && typeof propValue === 'number') {
+                variationSettings.push(`"slnt" ${propValue}`);
+            }
+            else if (typeof propValue === 'object' && propValue !== null) {
+                res[key] = mapVal(propValue);
+            }
+            else if (propValue !== undefined) {
+                res[key] = propValue;
+            }
+        });
+        if (variationSettings.length > 0) {
+            res.fontVariationSettings = variationSettings.join(', ');
+        }
+        return res;
+    }
+    return mapObj(typography, mapKey, mapVal);
+}
+function mapObj(obj, keyMapFn, valueMapFn) {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        result[keyMapFn(key)] = valueMapFn(value);
+    }
+    return result;
+}
+exports.default = plugin_1.default.withOptions(typographyPlugin);

package/docs/README.md

@@ -0,0 +1,25 @@
+# Documentation
+
+These guides cover how to use the Mindvalley Design System in your projects - from installing tokens to configuring Tailwind plugins for typography, colors, icons, and wordmarks.
+
+## Quick start
+
+New here? Start with the [Usage Guide](usage.md) for installation and basic setup.
+
+## Guides
+
+| Topic | Guide | What You'll Learn |
+|-------|-------|-------------------|
+| Colors | [Usage → Colors](usage.md#-colors) | Tailwind config, multi-brand setup, gradients |
+| Typography | [Typography Guide](typography/README.md) | Font setup, class reference, plugin options |
+| Icons | [Usage → Icons](usage.md#-icons) | Brand, UI, and category icons with sprites |
+| Wordmarks | [Usage → Wordmarks](usage.md#-wordmarks) | Trainer and topic wordmarks |
+
+## Migration
+
+- [Sharp Grotesk → Google Sans Flex](typography/migration.md) - Migrate to the new variable font system
+
+## Contributing
+
+- [Development Guide](../CONTRIBUTING.md) - Setup, commits, build process
+- [Release Process](releasing.md) - Semantic versioning and publishing

package/docs/agents/code-style.md

@@ -0,0 +1,84 @@
+# Code Style
+
+This project uses [Biome](https://biomejs.dev/) for formatting and linting.
+
+## Commands
+
+```bash
+npm run format      # Format files
+npm run lint        # Lint files
+npm run check       # Format + lint + organize imports
+npm run check:ci    # CI check (no auto-fix)
+```
+
+## Formatting Rules
+
+| Setting | Value |
+|---------|-------|
+| Indent | 2 spaces |
+| Line width | 100 |
+| Line ending | LF |
+| Quotes | Single |
+| JSX quotes | Double |
+| Semicolons | As needed (omit when possible) |
+| Trailing commas | ES5 |
+| Arrow parens | Always |
+
+```typescript
+// ✅ Correct
+const example = (value: string) => {
+  return `Hello, ${value}`
+}
+
+// ❌ Wrong
+const example = value => {
+  return "Hello, " + value;
+};
+```
+
+## Linting Rules
+
+### Enforced
+
+- `useConst` - Use `const` over `let` when variable is never reassigned
+- `useTemplate` - Prefer template literals over string concatenation
+
+### Warnings
+
+- `noExplicitAny` - Avoid `any` type
+- `noNonNullAssertion` - Avoid `!` assertions
+- `noConsole` - Avoid console statements
+
+### Allowed
+
+- `forEach` - Array forEach is permitted
+
+## TypeScript
+
+- **Strict mode** enabled
+- Target: ES2022
+- Module: Node16
+
+## Markdown
+
+Linted with markdownlint. Run `npm run lint:md` to check.
+
+- Max line length: 500
+- Inline HTML allowed
+- First line doesn't need to be h1
+
+## Helper Utilities
+
+Available in `src/helpers/`:
+
+| Function | Description |
+|----------|-------------|
+| `toKebabCase()` | Convert string to kebab-case |
+| `toSnakeCase()` | Convert string to snake_case |
+| `toCamelCase()` | Convert string to camelCase |
+| `toPascalCase()` | Convert string to PascalCase |
+| `toNoCase()` | Convert string to lowercase no separators |
+
+```typescript
+import { toKebabCase } from '@mindvalley/design-system/helpers/casing'
+```

package/docs/agents/git-workflow.md

@@ -0,0 +1,79 @@
+# Git Workflow
+
+## Branch Naming
+
+Format: `JIRA-ID-description-in-kebab-case`
+
+```bash
+# Examples
+CRF-629-update-contribution-docs
+MVHOME-765-add-tool-versions
+```
+
+## Commits
+
+Use conventional commits. Run `npm run commit` for interactive prompts.
+
+### Commit Types
+
+| Type | Description | Triggers Release |
+|------|-------------|------------------|
+| `feat` | New feature | Minor (1.x.0) |
+| `fix` | Bug fix | Patch (1.0.x) |
+| `perf` | Performance improvement | Patch |
+| `docs` | Documentation only | No |
+| `style` | Formatting, whitespace | No |
+| `refactor` | Code change (no feature/fix) | No |
+| `test` | Add/correct tests | No |
+| `build` | Build system changes | No |
+| `ci` | CI configuration | No |
+| `chore` | Other changes | No |
+
+### Commit Message Format
+
+```
+type(scope): Sentence case description
+
+JIRA-ID
+```
+
+**Important:** Subject must be sentence-case (commitlint enforces this).
+
+```bash
+# ✅ Correct
+fix: Correct broken documentation links
+
+# ❌ Wrong
+fix: correct broken documentation links
+```
+
+## Pull Requests
+
+1. Ensure working tree is clean
+2. Push branch with `-u` flag
+3. Use PR template from `.github/pull_request_template.md`
+4. Title format: `[JIRA-ID] Summary`
+
+### PR Template Structure
+
+```markdown
+#### Link to Ticket: https://mindvalley.atlassian.net/browse/<JIRA_TICKET_NO>
+
+## Description
+## Screenshots
+## What is the expected behaviour?
+## How to test?
+```
+
+## CI Pipeline
+
+On PR to `main`, CI runs:
+
+1. `npm ci` - Install dependencies
+2. `npm run lint:md` - Lint markdown
+3. `npm run build` - Build project
+4. `npm test` - Run tests
+
+## Releases
+
+Automated via semantic-release on merge to `main`. See [releasing.md](../releasing.md) for details.

package/docs/agents/testing.md

@@ -0,0 +1,65 @@
+# Testing
+
+This project uses [Jest](https://jestjs.io/) for testing.
+
+## Commands
+
+```bash
+npm run test        # Run all tests
+npm run test:watch  # Watch mode
+```
+
+## Directory Structure
+
+```
+__tests__/
+├── src/
+│   ├── tailwind/
+│   │   └── plugins/
+│   └── types/
+├── utilities/
+└── utils/
+    └── plugin.helpers.ts  # Shared test utilities
+```
+
+**Important:** Tests go in `__tests__/`, not `test/`.
+
+## Test Patterns
+
+### Schema Validation Tests
+
+For Zod schemas, test both valid and invalid cases:
+
+```typescript
+describe('ColorTokenSchema', () => {
+  it('should accept valid 6-digit hex color', () => {
+    const valid = { value: '#ff0000', type: 'color' as const }
+    expect(() => ColorTokenSchema.parse(valid)).not.toThrow()
+    expect(ColorTokenSchema.safeParse(valid).success).toBe(true)
+  })
+
+  it('should reject invalid hex color format', () => {
+    const invalid = { value: 'not-a-color', type: 'color' as const }
+    expect(() => ColorTokenSchema.parse(invalid)).toThrow()
+    expect(ColorTokenSchema.safeParse(invalid).success).toBe(false)
+  })
+})
+```
+
+### Test Naming
+
+- Use descriptive `it` statements starting with "should"
+- Group related tests with `describe` blocks
+- Test edge cases and error conditions
+
+### Path Aliases in Tests
+
+Use the `@test-utils/*` alias for shared test utilities:
+
+```typescript
+import { someHelper } from '@test-utils/plugin.helpers'
+```
+
+## Coverage
+
+Coverage reports are generated in the `coverage/` directory (not committed to git).

package/docs/agents/token-system.md

@@ -0,0 +1,83 @@
+# Token System
+
+Design tokens are transformed from Figma → Supernova → JSON → JavaScript/Tailwind plugins.
+
+## Directory Structure
+
+```
+src/tokens/brands/
+├── mindvalley/
+│   ├── colors.json
+│   └── typography.json
+└── b2b/
+    ├── colors.json
+    └── typography.json
+```
+
+## Transformation Pipeline
+
+```
+npm run validate-tokens  →  Zod validation
+npm run build:styledictionary  →  style-dictionary transform
+npm run build  →  Full build (validate + transform + bundle)
+```
+
+## Token Validation
+
+Tokens are validated with Zod schemas before transformation. See [token-validation.md](../token-validation.md).
+
+**Key schemas:** `src/types/token-schemas.ts`
+
+```typescript
+// Token types must match exactly
+{ value: '#ff0000', type: 'color' }      // ✅ Valid
+{ value: 'red', type: 'color' }          // ❌ Invalid hex
+{ value: '#ff0000' }                     // ❌ Missing type
+```
+
+## Multi-Brand Support
+
+Two brands are supported:
+
+- **mindvalley** - Main brand
+- **b2b** - B2B brand
+
+Import the appropriate entry point:
+
+```typescript
+import { colors } from '@mindvalley/design-system'       // Mindvalley
+import { colors } from '@mindvalley/design-system/b2b'   // B2B
+```
+
+## Tailwind Plugins
+
+Located in `src/tailwind/plugins/`:
+
+- `typography.ts` - Typography utilities
+- `typography-gsf.ts` - Google Sans Font typography
+- `tokens/` - Token-based color/typography plugins
+
+## Build Outputs
+
+After `npm run build`, outputs go to `dist/`:
+
+```
+dist/
+├── index.js          # Main entry (Mindvalley brand)
+├── b2b.js            # B2B brand entry
+├── helpers/          # Helper utilities
+└── tailwind/         # Tailwind plugins
+```
+
+## Figma Sync
+
+Icons and wordmarks sync from Figma:
+
+```bash
+npm run build:figma  # Requires FIGMA_TOKEN in .env
+```
+
+Configuration files:
+
+- `src/utilities/svg-import/.figma_icons.ts`
+- `src/utilities/svg-import/.figma_wordmarks.ts`

package/docs/{RELEASING.md → releasing.md}

@@ -1,13 +1,13 @@
-## Releasing 🚀
+# Releasing 🚀
 
 By default, semantic-release uses the [Angular Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) and triggers releases based on the following rules:
 
-| Commit                      | Release Type     | Semver update type               |
-|-----------------------------|------------------|----------------------------------|
-| Commit with breaking change | Breaking release | Major release e.g 1.x.x -> 2.x.x |
-| Commit with type `feat`     | Feature release  | Major release e.g 1.x.x -> 2.x.x |
-| Commit with type `fix`      | Fix Release      | Minor release e.g 1.2.x -> 1.3.x |
-| Commit with type `perf`     | Patch release    | Patch release e.g 1.x.4 -> 1.x.5 |
+| Commit                      | Release Type     | Semver update type                |
+|-----------------------------|------------------|-----------------------------------|
+| Commit with breaking change | Breaking release | Major release e.g 1.x.x -> 2.x.x  |
+| Commit with type `feat`     | Feature release  | Minor release e.g 1.2.x -> 1.3.x  |
+| Commit with type `fix`      | Fix release      | Patch release e.g 1.2.3 -> 1.2.4  |
+| Commit with type `perf`     | Performance fix  | Patch release e.g 1.2.3 -> 1.2.4  |
 
 Only the above type of commits will trigger a release.
 
@@ -23,7 +23,7 @@ More detailed explanation can be found on the [semantic release steps documentat
 
 After release and publishing, the package should be available as a [scoped npm package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) and is on npm as [@mindvalley/design-system](https://www.npmjs.com/package/@mindvalley/design-system).
 
-### Trusted publishing
+## Trusted publishing
 
 Releases run through the GitHub Actions workflow [`release.yml`](../.github/workflows/release.yml) using [npm trusted publishing](https://docs.npmjs.com/trusted-publishers). The workflow:
 
@@ -34,4 +34,4 @@ Releases run through the GitHub Actions workflow [`release.yml`](../.github/work
 
 If the workflow fails, re-run it from the Actions tab after addressing the underlying error. No manual npm publishing is expected under normal circumstances.
 
-Jump to the [usage guide](USAGE.md) to understand how to use the published package in your repo.
+Jump to the [usage guide](usage.md) to understand how to use the published package in your repo.