@mindvalley/design-system 4.1.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,39 +1,53 @@
1
- # [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)
1
+ ## [4.1.1](https://github.com/mindvalley/mv-design-system/compare/v4.1.0...v4.1.1) (2026-02-05)
2
2
 
3
3
 
4
4
  ### Bug Fixes
5
5
 
6
- * Improve fontFamily regex extraction for TypeScript format ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
7
- * **tokens:** Include paragraphIndent and paragraphSpacing in output ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
8
- * Patched b2b back colors to how they were in v3.4.2 ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
9
- * **tokens:** Resolve merge conflict with correct numeric fontWeight values ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
10
- * Update fontWidth to 100 for button, timer, and caption styles ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
6
+ * Correct broken documentation links in README ([a129688](https://github.com/mindvalley/mv-design-system/commit/a129688a1b6f336938275076d01d3aa673e3cabb))
11
7
 
8
+ # Changelog
9
+
10
+ All notable changes to this project will be documented in this file.
11
+
12
+ ## [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)
12
13
 
13
14
  ### Features
14
15
 
15
- * **style-dictionary:** Add tablet breakpoint output ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
16
- * **build:** Configure GSF typography output path ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
17
- * **tailwind:** Create typography-gsf plugin with 3-tier responsive support ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
16
+ * **Google Sans Flex Typography Plugin**: New Tailwind CSS plugin with 3-tier responsive support
17
+ * Automatic responsive breakpoints: mobile (base) tablet (768px) → desktop (1024px)
18
+ * Variable font support with `wdth` (width) and `slnt` (slant) axes
19
+ * 90+ typography utility classes with responsive behavior
20
+ * All class name maintained but with different values for google sans flex
21
+ * New italic variants: `body-italic`, `body-bold-italic`, `body-large-italic`, etc.
22
+ * See [Typography GSF Guide](./docs/typography/setup.md) for usage
18
23
 
24
+ **Quick Start:**
19
25
 
20
- ### Reverts
26
+ ```typescript
27
+ // tailwind.config.ts
28
+ import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
21
29
 
22
- * **style-dictionary:** Restore typography description-to-comment preprocessor ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
30
+ export default {
31
+ plugins: [typography({ brands: ['mindvalley'] })]
32
+ }
33
+ ```
23
34
 
24
- # Changelog
35
+ ### Improvements
36
+ * Improved internal fontFamily extraction for TypeScript format in font-face generator
25
37
 
26
- All notable changes to this project will be documented in this file.
38
+ ### Documentation
39
+
40
+ * Added `AGENTS.md` and reorganized typography docs under `docs/typography/`
27
41
 
28
42
  ## [4.0.1](https://github.com/mindvalley/mv-design-system/compare/v4.0.0...v4.0.1) (2026-01-05)
29
43
 
30
- ### Bug Fixes
44
+ ### Bug fixes
31
45
 
32
46
  * 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))
33
47
 
34
- # [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
48
+ ## [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
35
49
 
36
- ### Features
50
+ ### Features
37
51
 
38
52
  * **Typography Font Loading**: New utility to generate `@font-face` CSS declarations for typography tokens
39
53
  * Automatic font-face generation for both Mindvalley and B2B brands
@@ -42,9 +56,9 @@ All notable changes to this project will be documented in this file.
42
56
  * See [Typography Font Loading Guide](./docs/typography-fonts.md) for usage
43
57
  * New exports: `@mindvalley/design-system/typography/mindvalley/fonts.css` and `/b2b/fonts.css`
44
58
 
45
- ### 📝 Typography Changes
59
+ ### 📝 Typography changes
46
60
 
47
- #### Mindvalley Brand
61
+ #### Mindvalley brand
48
62
 
49
63
  **New Typography Tokens:**
50
64
 
@@ -77,7 +91,7 @@ All notable changes to this project will be documented in this file.
77
91
 
78
92
  * `title-7`, `title-8`, `title-9`, `title-10`, `title-11`: Merged from separate mobile/desktop variants into single responsive tokens
79
93
 
80
- #### B2B Brand
94
+ #### B2B brand
81
95
 
82
96
  **Line Height Updates:**
83
97
 
@@ -94,7 +108,7 @@ All notable changes to this project will be documented in this file.
94
108
 
95
109
  * All B2B typography tokens now include explicit `fontWeight: 500`
96
110
 
97
- ### 🔧 Code Quality
111
+ ### 🔧 Code quality
98
112
 
99
113
  * **TypeScript**: Comprehensive type improvements throughout the codebase
100
114
  * Proper interfaces for typography tokens (no more `any` types)
@@ -108,7 +122,7 @@ All notable changes to this project will be documented in this file.
108
122
  * Added comprehensive [Typography Font Loading Guide](./docs/typography-fonts.md) with framework examples (Next.js, Vite, Vue, Phoenix, etc.)
109
123
  * Updated USAGE.md with new font loading instructions
110
124
 
111
- ### 📦 Package Updates
125
+ ### 📦 Package updates
112
126
 
113
127
  * Updated `@biomejs/biome` to 2.3.4
114
128
  * Enhanced package.json exports for typography font files
@@ -119,13 +133,13 @@ All notable changes to this project will be documented in this file.
119
133
 
120
134
  ## [3.4.2](https://github.com/mindvalley/mv-design-system/compare/v3.4.1...v3.4.2) (2025-10-22)
121
135
 
122
- ### Bug Fixes
136
+ ### Bug fixes
123
137
 
124
138
  * 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))
125
139
 
126
- # [3.4.0](https://github.com/mindvalley/mv-design-system/compare/v3.3.4...v3.4.0) (2025-09-03)
140
+ ## [3.4.0](https://github.com/mindvalley/mv-design-system/compare/v3.3.4...v3.4.0) (2025-09-03)
127
141
 
128
- ### Bug Fixes
142
+ ### Bug fixes
129
143
 
130
144
  * Improve type safety by removing 'any' types and defining proper interfaces ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
131
145
  * Move validation script to bin directory for CI ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
@@ -148,7 +162,7 @@ All notable changes to this project will be documented in this file.
148
162
 
149
163
  * **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))
150
164
 
151
- ### Brand Color Hierarchy Changes
165
+ ### Brand color hierarchy changes
152
166
 
153
167
  **New Mindvalley Business Brand Identity:**
154
168
 
@@ -168,13 +182,13 @@ All notable changes to this project will be documented in this file.
168
182
  | purple-28a | `#9e94f147` | 28% |
169
183
  | purple-70a | `#9e94f1b2` | 70% |
170
184
 
171
- #### Design References
185
+ #### Design references
172
186
 
173
187
  * [B2B Foundations Design System](https://www.figma.com/design/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?node-id=1-395&t=CbV3RJzhIYPsHL0t-1)
174
188
 
175
189
  ## [3.3.3](https://github.com/mindvalley/mv-design-system/compare/v3.3.2...v3.3.3) (2025-03-26)
176
190
 
177
- ### Bug Fixes
191
+ ### Bug fixes
178
192
 
179
193
  * Added new SVG icons for UI components for b2b and mindvalley core ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
180
194
  * 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 +262,7 @@ All notable changes to this project will be documented in this file.
248
262
  * B2B sprites
249
263
  * Legacy MV icon sprites
250
264
 
251
- ### Bug Fixes
265
+ ### Bug fixes
252
266
 
253
267
  * **Build:** Updated clean:docs script with glob pattern support ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))* **Mindvalley Core Icons:**
254
268
 
@@ -298,7 +312,7 @@ All notable changes to this project will be documented in this file.
298
312
  * Introduced a comprehensive suite of typography settings tailored for both Mindvalley Core and B2B platforms, enhancing visual consistency across applications.
299
313
  * Refreshed font face definitions across our design system.
300
314
 
301
- ### Mindvalley Core Typography
315
+ ### Mindvalley Core typography
302
316
 
303
317
  | Style | Font Family | Font Size | Letter Spacing | Line Height |
304
318
  |-------|-------------|-----------|----------------|-------------|
@@ -369,7 +383,7 @@ All notable changes to this project will be documented in this file.
369
383
  | display-4 (mobile) | Sharp Grotesk Cyr Bold 16 | 26px | 0.25px | 28px |
370
384
  | display-4 (desktop) | Sharp Grotesk Cyr Bold 16 | 32px | 0.25px | 35px |
371
385
 
372
- ### B2B Typography
386
+ ### B2B typography
373
387
 
374
388
  | Style | Font Family | Font Size | Letter Spacing | Line Height |
375
389
  |-------|-------------|-----------|----------------|-------------|
@@ -400,24 +414,24 @@ All notable changes to this project will be documented in this file.
400
414
 
401
415
  * _Note in the final versions of the output css the values are updated to relative units (rems)_
402
416
 
403
- ### Bug Fixes
417
+ ### Bug fixes
404
418
 
405
419
  * 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))
406
420
 
407
- ### Breaking change
421
+ ### Breaking changes
408
422
 
409
423
  * 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.
410
424
 
411
425
  ## [3.2.3](https://github.com/mindvalley/mv-design-system/compare/v3.2.2...v3.2.3) (2024-03-27)
412
426
 
413
- ### Bug Fixes
427
+ ### Bug fixes
414
428
 
415
429
  * Add fontFamily from comments ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))
416
430
  * Update font-family names in USAGE.md ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))
417
431
 
418
432
  ## [3.2.2](https://github.com/mindvalley/mv-design-system/compare/v3.2.1...v3.2.2) (2024-02-29)
419
433
 
420
- ### Bug Fixes
434
+ ### Bug fixes
421
435
 
422
436
  * 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))
423
437
 
@@ -528,7 +542,7 @@ All notable changes to this project will be documented in this file.
528
542
  | 18a | #0000002e |
529
543
  | 70a | #000000b2 |
530
544
 
531
- #### white
545
+ #### White
532
546
 
533
547
  | Color Name | Color Value |
534
548
  |------------|---------------|
@@ -538,12 +552,12 @@ All notable changes to this project will be documented in this file.
538
552
  | 70a | #ffffffb2 |
539
553
  | 8a | #ffffff14 |
540
554
 
541
- ### Breaking change
555
+ ### Breaking changes
542
556
 
543
557
  * Updated `body-bold` typography: Adjusted letterSpacing from 1.56% to 2.19%.
544
558
  * Removed the following accent colors
545
559
 
546
- #### black
560
+ #### Black
547
561
 
548
562
  | Name | Hex Value |
549
563
  |------|------------|
@@ -551,7 +565,7 @@ All notable changes to this project will be documented in this file.
551
565
  | 20a | #00000033 |
552
566
  | 30a | #0000004d |
553
567
 
554
- #### white
568
+ #### White
555
569
 
556
570
  | Name | Hex Value |
557
571
  |------|------------|
@@ -559,7 +573,7 @@ All notable changes to this project will be documented in this file.
559
573
 
560
574
  ## [3.1.2](https://github.com/mindvalley/mv-design-system/compare/v3.1.1...v3.1.2) (2023-11-14)
561
575
 
562
- ### Bug Fixes
576
+ ### Bug fixes
563
577
 
564
578
  * Fix broken typography font family
565
579
  * Remove rounding of typography values ([fb1fd1e](https://github.com/mindvalley/mv-design-system/commit/fb1fd1e4182625b72f406bc64a49aeabfc9f3d76))
@@ -577,11 +591,11 @@ All notable changes to this project will be documented in this file.
577
591
 
578
592
  ## [3.1.1](https://github.com/mindvalley/mv-design-system/compare/v3.1.0...v3.1.1) (2023-11-09)
579
593
 
580
- ### Bug Fixes
594
+ ### Bug fixes
581
595
 
582
596
  * Bundle the typography tokens with the package ([0def7ea](https://github.com/mindvalley/mv-design-system/commit/0def7eafb891427eec53d0cdcd65e2184cd2e9f7))
583
597
 
584
- # [3.1.0](https://github.com/mindvalley/mv-design-system/compare/v3.0.3...v3.1.0) (2023-11-09)
598
+ ## [3.1.0](https://github.com/mindvalley/mv-design-system/compare/v3.0.3...v3.1.0) (2023-11-09)
585
599
 
586
600
  ### Features
587
601
 
@@ -603,7 +617,7 @@ New typography classes added
603
617
 
604
618
  * Add documentation listing descriptions and example returns for custom transforms
605
619
 
606
- ### Code Refactoring
620
+ ### Code refactoring
607
621
 
608
622
  * Replace typography plugin with refactored rewrite (0603ec5)
609
623
  * Refactor function for processing typography to remove redundant logic (cb89d3b)
@@ -619,21 +633,21 @@ It has come to our attention that there is a bug affecting typography tokens due
619
633
 
620
634
  ## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)
621
635
 
622
- ### Bug Fixes
636
+ ### Bug fixes
623
637
 
624
638
  * update title-bold-1 mobile letter spacing json value ([c20cbf2](https://github.com/mindvalley/mv-design-system/commit/c20cbf223b4bdf6dcf17fcd962c29a9399f20d1a))
625
639
 
626
640
  ## [3.0.1](https://github.com/mindvalley/mv-design-system/compare/v3.0.0...v3.0.1) (2023-09-18)
627
641
 
628
- ### Bug Fixes
642
+ ### Bug fixes
629
643
 
630
644
  * **typography:** update title bold 1 letter spacing ([29e0622](https://github.com/mindvalley/mv-design-system/commit/29e062249a623c2ade78a91861edd9a3d95bcb47))
631
645
 
632
- # 2.4.0 (2023-06-03)
646
+ ## [2.4.0] (2023-06-03)
633
647
 
634
648
  Color updates
635
649
 
636
- ### New Values
650
+ ### New values
637
651
 
638
652
  * New alpha colors added
639
653
 
@@ -649,9 +663,9 @@ Color updates
649
663
  | white-30a | rgba(255, 255, 255, 0.3) |
650
664
  | white-10a | rgba(255, 255, 255, 0.1) |
651
665
 
652
- ### ⚠ BREAKING CHANGES
666
+ ### ⚠ Breaking changes
653
667
 
654
- #### Removed Colors
668
+ #### Removed colors
655
669
 
656
670
  * warm-gray colors are no longer used.
657
671
 
@@ -676,13 +690,13 @@ Color updates
676
690
  | magenta | #fb03ff |
677
691
  | rose | #ff68a8 |
678
692
 
679
- #### Updated Name
693
+ #### Updated name
680
694
 
681
695
  | Color value | Old Name | New Name |
682
696
  | ------------- | ------------ | ----------- |
683
697
  | #9b37f2 | brand-accent | purple-tint |
684
698
 
685
- # 2.3.0 (2023-03-22)
699
+ ## [2.3.0] (2023-03-22)
686
700
 
687
701
  ### Added
688
702
 
@@ -712,7 +726,7 @@ title4 | 28px -> 24px | 34px > 30px
712
726
  title5 | 24px -> 20px | 30px -> 24px
713
727
  title6 | 20px -> 18px | 24px -> 22px
714
728
 
715
- ### ⚠ BREAKING CHANGES
729
+ ### ⚠ Breaking changes
716
730
 
717
731
  * Utility classes removed: `disclaimerText` and `caption`. They are now all `captionDisclaimer`.
718
732
 
@@ -720,24 +734,24 @@ title6 | 20px -> 18px | 24px -> 22px
720
734
 
721
735
  Link to the update: - Update typography plugin (#30) 8b34a83
722
736
 
723
- # 2.2.1 (2023-01-05)
737
+ ## [2.2.1] (2023-01-05)
724
738
 
725
- ## Bug Fixes
739
+ ### Bug fixes
726
740
 
727
741
  * Fixed issues with typography plugin not generating classnames properly when kebab casing was selected.
728
742
 
729
- ## Additions
743
+ ### Additions
730
744
 
731
745
  * Improved test coverage for casing and unit conversion helper functions.
732
746
  * Updated documentation.
733
747
 
734
- # 2.2.0 (2022-12-07)
748
+ ## [2.2.0] (2022-12-07)
735
749
 
736
- ## Features
750
+ ### Features
737
751
 
738
752
  * 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)
739
753
 
740
- # 2.1.0 (2022-11-03)
754
+ ## [2.1.0] (2022-11-03)
741
755
 
742
756
  ### Features
743
757
 
@@ -745,7 +759,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
745
759
  * Updated documentation on [how to generate icons from figma](./docs/CONTRIBUTION.md#how-to-generate-icons-from-figma-to-code).
746
760
  * Added a way to see the rendered icons.
747
761
 
748
- ### ⚠ BREAKING CHANGES
762
+ ### ⚠ Breaking changes
749
763
 
750
764
  * Renamed `ico-spiritual-outline.svg` to `spiritual-outline.svg`
751
765
  * Renamed `icon-body.svg` to `body.svg`
@@ -757,7 +771,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
757
771
  * Renamed `icon-relationships.svg` to `relationships.svg`
758
772
  * Renamed `icon-soul.svg` to `soul.svg`
759
773
 
760
- # 2.0.0 (2022-09-27)
774
+ ## [2.0.0] (2022-09-27)
761
775
 
762
776
  ### Features
763
777
 
@@ -770,14 +784,14 @@ Link to the update: - Update typography plugin (#30) 8b34a83
770
784
  * `purple-500` color show correct value of `#ba62fd`
771
785
  * 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.
772
786
 
773
- ### ⚠ BREAKING CHANGES
787
+ ### ⚠ Breaking changes
774
788
 
775
789
  * 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).
776
790
  * 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.
777
791
 
778
- # 1.3.0 (2022-07-20)
792
+ ## [1.3.0] (2022-07-20)
779
793
 
780
- ### ⚠ BREAKING CHANGES
794
+ ### ⚠ Breaking changes
781
795
 
782
796
  * Renamed all icons with the name `stroke` to `outline`. E.g `activity-stroke` is now `activity-outline`.
783
797
  * 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 +804,9 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
790
804
  * Category Icons added: see [Category icons on Figma](https://www.figma.com/file/0b2swzflgtIMoELPgj4TVI/MV-Icons?node-id=32%3A3)
791
805
  * See list of [icon names](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208)
792
806
 
793
- # 1.2.0 (2022-07-19)
807
+ ## [1.2.0] (2022-07-19)
794
808
 
795
- ### ⚠ BREAKING CHANGES
809
+ ### ⚠ Breaking changes
796
810
 
797
811
  * 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.
798
812
 
@@ -802,13 +816,13 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
802
816
 
803
817
  See the full list of [colors on figma](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257)
804
818
 
805
- # 1.1.0 (2022-07-12)
819
+ ## [1.1.0] (2022-07-12)
806
820
 
807
821
  * Removed references to brand.mindvalley.com: The team is no longer updating the online guide and is now working from Figma.
808
822
 
809
- # 1.0.0 (2022-07-11)
823
+ ## [1.0.0] (2022-07-11)
810
824
 
811
- ### Bug Fixes
825
+ ### Bug fixes
812
826
 
813
827
  * NPM TOKEN: edited readme with releases information [92dc7ee](https://github.com/mindvalley/mv-design-system/commit/92dc7eee8f4078c16ff0ece32deb225e8815f7ac)
814
828
 
package/README.md CHANGED
@@ -23,7 +23,7 @@ The Mindvalley Design System provides reusable design tokens and assets for buil
23
23
 
24
24
  #### Getting started
25
25
 
26
- 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)
26
+ 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)
27
27
  and access will be granted.
28
28
 
29
29
  Then, you can read the following guides:
@@ -0,0 +1,84 @@
1
+ # Code Style
2
+
3
+ This project uses [Biome](https://biomejs.dev/) for formatting and linting.
4
+
5
+ ## Commands
6
+
7
+ ```bash
8
+ npm run format # Format files
9
+ npm run lint # Lint files
10
+ npm run check # Format + lint + organize imports
11
+ npm run check:ci # CI check (no auto-fix)
12
+ ```
13
+
14
+ ## Formatting Rules
15
+
16
+ | Setting | Value |
17
+ |---------|-------|
18
+ | Indent | 2 spaces |
19
+ | Line width | 100 |
20
+ | Line ending | LF |
21
+ | Quotes | Single |
22
+ | JSX quotes | Double |
23
+ | Semicolons | As needed (omit when possible) |
24
+ | Trailing commas | ES5 |
25
+ | Arrow parens | Always |
26
+
27
+ ```typescript
28
+ // ✅ Correct
29
+ const example = (value: string) => {
30
+ return `Hello, ${value}`
31
+ }
32
+
33
+ // ❌ Wrong
34
+ const example = value => {
35
+ return "Hello, " + value;
36
+ };
37
+ ```
38
+
39
+ ## Linting Rules
40
+
41
+ ### Enforced
42
+
43
+ - `useConst` - Use `const` over `let` when variable is never reassigned
44
+ - `useTemplate` - Prefer template literals over string concatenation
45
+
46
+ ### Warnings
47
+
48
+ - `noExplicitAny` - Avoid `any` type
49
+ - `noNonNullAssertion` - Avoid `!` assertions
50
+ - `noConsole` - Avoid console statements
51
+
52
+ ### Allowed
53
+
54
+ - `forEach` - Array forEach is permitted
55
+
56
+ ## TypeScript
57
+
58
+ - **Strict mode** enabled
59
+ - Target: ES2022
60
+ - Module: Node16
61
+
62
+ ## Markdown
63
+
64
+ Linted with markdownlint. Run `npm run lint:md` to check.
65
+
66
+ - Max line length: 500
67
+ - Inline HTML allowed
68
+ - First line doesn't need to be h1
69
+
70
+ ## Helper Utilities
71
+
72
+ Available in `src/helpers/`:
73
+
74
+ | Function | Description |
75
+ |----------|-------------|
76
+ | `toKebabCase()` | Convert string to kebab-case |
77
+ | `toSnakeCase()` | Convert string to snake_case |
78
+ | `toCamelCase()` | Convert string to camelCase |
79
+ | `toPascalCase()` | Convert string to PascalCase |
80
+ | `toNoCase()` | Convert string to lowercase no separators |
81
+
82
+ ```typescript
83
+ import { toKebabCase } from '@mindvalley/design-system/helpers/casing'
84
+ ```
@@ -0,0 +1,79 @@
1
+ # Git Workflow
2
+
3
+ ## Branch Naming
4
+
5
+ Format: `JIRA-ID-description-in-kebab-case`
6
+
7
+ ```bash
8
+ # Examples
9
+ CRF-629-update-contribution-docs
10
+ MVHOME-765-add-tool-versions
11
+ ```
12
+
13
+ ## Commits
14
+
15
+ Use conventional commits. Run `npm run commit` for interactive prompts.
16
+
17
+ ### Commit Types
18
+
19
+ | Type | Description | Triggers Release |
20
+ |------|-------------|------------------|
21
+ | `feat` | New feature | Minor (1.x.0) |
22
+ | `fix` | Bug fix | Patch (1.0.x) |
23
+ | `perf` | Performance improvement | Patch |
24
+ | `docs` | Documentation only | No |
25
+ | `style` | Formatting, whitespace | No |
26
+ | `refactor` | Code change (no feature/fix) | No |
27
+ | `test` | Add/correct tests | No |
28
+ | `build` | Build system changes | No |
29
+ | `ci` | CI configuration | No |
30
+ | `chore` | Other changes | No |
31
+
32
+ ### Commit Message Format
33
+
34
+ ```
35
+ type(scope): Sentence case description
36
+
37
+ JIRA-ID
38
+ ```
39
+
40
+ **Important:** Subject must be sentence-case (commitlint enforces this).
41
+
42
+ ```bash
43
+ # ✅ Correct
44
+ fix: Correct broken documentation links
45
+
46
+ # ❌ Wrong
47
+ fix: correct broken documentation links
48
+ ```
49
+
50
+ ## Pull Requests
51
+
52
+ 1. Ensure working tree is clean
53
+ 2. Push branch with `-u` flag
54
+ 3. Use PR template from `.github/pull_request_template.md`
55
+ 4. Title format: `[JIRA-ID] Summary`
56
+
57
+ ### PR Template Structure
58
+
59
+ ```markdown
60
+ #### Link to Ticket: https://mindvalley.atlassian.net/browse/<JIRA_TICKET_NO>
61
+
62
+ ## Description
63
+ ## Screenshots
64
+ ## What is the expected behaviour?
65
+ ## How to test?
66
+ ```
67
+
68
+ ## CI Pipeline
69
+
70
+ On PR to `main`, CI runs:
71
+
72
+ 1. `npm ci` - Install dependencies
73
+ 2. `npm run lint:md` - Lint markdown
74
+ 3. `npm run build` - Build project
75
+ 4. `npm test` - Run tests
76
+
77
+ ## Releases
78
+
79
+ Automated via semantic-release on merge to `main`. See [releasing.md](../releasing.md) for details.
@@ -0,0 +1,65 @@
1
+ # Testing
2
+
3
+ This project uses [Jest](https://jestjs.io/) for testing.
4
+
5
+ ## Commands
6
+
7
+ ```bash
8
+ npm run test # Run all tests
9
+ npm run test:watch # Watch mode
10
+ ```
11
+
12
+ ## Directory Structure
13
+
14
+ ```
15
+ __tests__/
16
+ ├── src/
17
+ │ ├── tailwind/
18
+ │ │ └── plugins/
19
+ │ └── types/
20
+ ├── utilities/
21
+ └── utils/
22
+ └── plugin.helpers.ts # Shared test utilities
23
+ ```
24
+
25
+ **Important:** Tests go in `__tests__/`, not `test/`.
26
+
27
+ ## Test Patterns
28
+
29
+ ### Schema Validation Tests
30
+
31
+ For Zod schemas, test both valid and invalid cases:
32
+
33
+ ```typescript
34
+ describe('ColorTokenSchema', () => {
35
+ it('should accept valid 6-digit hex color', () => {
36
+ const valid = { value: '#ff0000', type: 'color' as const }
37
+ expect(() => ColorTokenSchema.parse(valid)).not.toThrow()
38
+ expect(ColorTokenSchema.safeParse(valid).success).toBe(true)
39
+ })
40
+
41
+ it('should reject invalid hex color format', () => {
42
+ const invalid = { value: 'not-a-color', type: 'color' as const }
43
+ expect(() => ColorTokenSchema.parse(invalid)).toThrow()
44
+ expect(ColorTokenSchema.safeParse(invalid).success).toBe(false)
45
+ })
46
+ })
47
+ ```
48
+
49
+ ### Test Naming
50
+
51
+ - Use descriptive `it` statements starting with "should"
52
+ - Group related tests with `describe` blocks
53
+ - Test edge cases and error conditions
54
+
55
+ ### Path Aliases in Tests
56
+
57
+ Use the `@test-utils/*` alias for shared test utilities:
58
+
59
+ ```typescript
60
+ import { someHelper } from '@test-utils/plugin.helpers'
61
+ ```
62
+
63
+ ## Coverage
64
+
65
+ Coverage reports are generated in the `coverage/` directory (not committed to git).
@@ -0,0 +1,83 @@
1
+ # Token System
2
+
3
+ Design tokens are transformed from Figma → Supernova → JSON → JavaScript/Tailwind plugins.
4
+
5
+ ## Directory Structure
6
+
7
+ ```
8
+ src/tokens/brands/
9
+ ├── mindvalley/
10
+ │ ├── colors.json
11
+ │ └── typography.json
12
+ └── b2b/
13
+ ├── colors.json
14
+ └── typography.json
15
+ ```
16
+
17
+ ## Transformation Pipeline
18
+
19
+ ```
20
+ npm run validate-tokens → Zod validation
21
+ npm run build:styledictionary → style-dictionary transform
22
+ npm run build → Full build (validate + transform + bundle)
23
+ ```
24
+
25
+ ## Token Validation
26
+
27
+ Tokens are validated with Zod schemas before transformation. See [token-validation.md](../token-validation.md).
28
+
29
+ **Key schemas:** `src/types/token-schemas.ts`
30
+
31
+ ```typescript
32
+ // Token types must match exactly
33
+ { value: '#ff0000', type: 'color' } // ✅ Valid
34
+ { value: 'red', type: 'color' } // ❌ Invalid hex
35
+ { value: '#ff0000' } // ❌ Missing type
36
+ ```
37
+
38
+ ## Multi-Brand Support
39
+
40
+ Two brands are supported:
41
+
42
+ - **mindvalley** - Main brand
43
+ - **b2b** - B2B brand
44
+
45
+ Import the appropriate entry point:
46
+
47
+ ```typescript
48
+ import { colors } from '@mindvalley/design-system' // Mindvalley
49
+ import { colors } from '@mindvalley/design-system/b2b' // B2B
50
+ ```
51
+
52
+ ## Tailwind Plugins
53
+
54
+ Located in `src/tailwind/plugins/`:
55
+
56
+ - `typography.ts` - Typography utilities
57
+ - `typography-gsf.ts` - Google Sans Font typography
58
+ - `tokens/` - Token-based color/typography plugins
59
+
60
+ ## Build Outputs
61
+
62
+ After `npm run build`, outputs go to `dist/`:
63
+
64
+ ```
65
+ dist/
66
+ ├── index.js # Main entry (Mindvalley brand)
67
+ ├── b2b.js # B2B brand entry
68
+ ├── helpers/ # Helper utilities
69
+ └── tailwind/ # Tailwind plugins
70
+ ```
71
+
72
+ ## Figma Sync
73
+
74
+ Icons and wordmarks sync from Figma:
75
+
76
+ ```bash
77
+ npm run build:figma # Requires FIGMA_TOKEN in .env
78
+ ```
79
+
80
+ Configuration files:
81
+
82
+ - `src/utilities/svg-import/.figma_icons.ts`
83
+ - `src/utilities/svg-import/.figma_wordmarks.ts`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindvalley/design-system",
3
- "version": "4.1.0",
3
+ "version": "4.1.1",
4
4
  "description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
5
5
  "keywords": [
6
6
  "design-system",
File without changes
File without changes