@mindvalley/design-system 4.0.1 → 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,17 +1,53 @@
1
- ## [4.0.1](https://github.com/mindvalley/mv-design-system/compare/v4.0.0...v4.0.1) (2026-01-05)
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
- * 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))
6
+ * Correct broken documentation links in README ([a129688](https://github.com/mindvalley/mv-design-system/commit/a129688a1b6f336938275076d01d3aa673e3cabb))
7
7
 
8
8
  # Changelog
9
9
 
10
10
  All notable changes to this project will be documented in this file.
11
11
 
12
- # [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
12
+ ## [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)
13
+
14
+ ### Features
15
+
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
23
+
24
+ **Quick Start:**
25
+
26
+ ```typescript
27
+ // tailwind.config.ts
28
+ import typography from '@mindvalley/design-system/tailwind/plugins/typography-gsf'
29
+
30
+ export default {
31
+ plugins: [typography({ brands: ['mindvalley'] })]
32
+ }
33
+ ```
34
+
35
+ ### Improvements
36
+ * Improved internal fontFamily extraction for TypeScript format in font-face generator
13
37
 
14
- ### ✨ Features
38
+ ### Documentation
39
+
40
+ * Added `AGENTS.md` and reorganized typography docs under `docs/typography/`
41
+
42
+ ## [4.0.1](https://github.com/mindvalley/mv-design-system/compare/v4.0.0...v4.0.1) (2026-01-05)
43
+
44
+ ### Bug fixes
45
+
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))
47
+
48
+ ## [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
49
+
50
+ ### Features
15
51
 
16
52
  * **Typography Font Loading**: New utility to generate `@font-face` CSS declarations for typography tokens
17
53
  * Automatic font-face generation for both Mindvalley and B2B brands
@@ -20,9 +56,9 @@ All notable changes to this project will be documented in this file.
20
56
  * See [Typography Font Loading Guide](./docs/typography-fonts.md) for usage
21
57
  * New exports: `@mindvalley/design-system/typography/mindvalley/fonts.css` and `/b2b/fonts.css`
22
58
 
23
- ### 📝 Typography Changes
59
+ ### 📝 Typography changes
24
60
 
25
- #### Mindvalley Brand
61
+ #### Mindvalley brand
26
62
 
27
63
  **New Typography Tokens:**
28
64
 
@@ -55,7 +91,7 @@ All notable changes to this project will be documented in this file.
55
91
 
56
92
  * `title-7`, `title-8`, `title-9`, `title-10`, `title-11`: Merged from separate mobile/desktop variants into single responsive tokens
57
93
 
58
- #### B2B Brand
94
+ #### B2B brand
59
95
 
60
96
  **Line Height Updates:**
61
97
 
@@ -72,7 +108,7 @@ All notable changes to this project will be documented in this file.
72
108
 
73
109
  * All B2B typography tokens now include explicit `fontWeight: 500`
74
110
 
75
- ### 🔧 Code Quality
111
+ ### 🔧 Code quality
76
112
 
77
113
  * **TypeScript**: Comprehensive type improvements throughout the codebase
78
114
  * Proper interfaces for typography tokens (no more `any` types)
@@ -86,20 +122,24 @@ All notable changes to this project will be documented in this file.
86
122
  * Added comprehensive [Typography Font Loading Guide](./docs/typography-fonts.md) with framework examples (Next.js, Vite, Vue, Phoenix, etc.)
87
123
  * Updated USAGE.md with new font loading instructions
88
124
 
89
- ### 📦 Package Updates
125
+ ### 📦 Package updates
90
126
 
91
127
  * Updated `@biomejs/biome` to 2.3.4
92
128
  * Enhanced package.json exports for typography font files
93
129
 
130
+ ### ⚠️ Breaking changes
131
+
132
+ * Reported b2b colors issues. Fixed in v.4.0.1.
133
+
94
134
  ## [3.4.2](https://github.com/mindvalley/mv-design-system/compare/v3.4.1...v3.4.2) (2025-10-22)
95
135
 
96
- ### Bug Fixes
136
+ ### Bug fixes
97
137
 
98
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))
99
139
 
100
- # [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)
101
141
 
102
- ### Bug Fixes
142
+ ### Bug fixes
103
143
 
104
144
  * Improve type safety by removing 'any' types and defining proper interfaces ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
105
145
  * Move validation script to bin directory for CI ([72e3511](https://github.com/mindvalley/mv-design-system/commit/72e3511b9a58c550c6da0fc8d92894058495b910))
@@ -122,7 +162,7 @@ All notable changes to this project will be documented in this file.
122
162
 
123
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))
124
164
 
125
- ### Brand Color Hierarchy Changes
165
+ ### Brand color hierarchy changes
126
166
 
127
167
  **New Mindvalley Business Brand Identity:**
128
168
 
@@ -142,13 +182,13 @@ All notable changes to this project will be documented in this file.
142
182
  | purple-28a | `#9e94f147` | 28% |
143
183
  | purple-70a | `#9e94f1b2` | 70% |
144
184
 
145
- #### Design References
185
+ #### Design references
146
186
 
147
187
  * [B2B Foundations Design System](https://www.figma.com/design/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?node-id=1-395&t=CbV3RJzhIYPsHL0t-1)
148
188
 
149
189
  ## [3.3.3](https://github.com/mindvalley/mv-design-system/compare/v3.3.2...v3.3.3) (2025-03-26)
150
190
 
151
- ### Bug Fixes
191
+ ### Bug fixes
152
192
 
153
193
  * Added new SVG icons for UI components for b2b and mindvalley core ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
154
194
  * Cleaned up and optimized SVG sprites for better performance and added new icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
@@ -222,7 +262,7 @@ All notable changes to this project will be documented in this file.
222
262
  * B2B sprites
223
263
  * Legacy MV icon sprites
224
264
 
225
- ### Bug Fixes
265
+ ### Bug fixes
226
266
 
227
267
  * **Build:** Updated clean:docs script with glob pattern support ([32aa443](https://github.com/mindvalley/mv-design-system/commit/32aa443ad6a21786b1d673add72251097a9e0712))* **Mindvalley Core Icons:**
228
268
 
@@ -272,7 +312,7 @@ All notable changes to this project will be documented in this file.
272
312
  * Introduced a comprehensive suite of typography settings tailored for both Mindvalley Core and B2B platforms, enhancing visual consistency across applications.
273
313
  * Refreshed font face definitions across our design system.
274
314
 
275
- ### Mindvalley Core Typography
315
+ ### Mindvalley Core typography
276
316
 
277
317
  | Style | Font Family | Font Size | Letter Spacing | Line Height |
278
318
  |-------|-------------|-----------|----------------|-------------|
@@ -343,7 +383,7 @@ All notable changes to this project will be documented in this file.
343
383
  | display-4 (mobile) | Sharp Grotesk Cyr Bold 16 | 26px | 0.25px | 28px |
344
384
  | display-4 (desktop) | Sharp Grotesk Cyr Bold 16 | 32px | 0.25px | 35px |
345
385
 
346
- ### B2B Typography
386
+ ### B2B typography
347
387
 
348
388
  | Style | Font Family | Font Size | Letter Spacing | Line Height |
349
389
  |-------|-------------|-----------|----------------|-------------|
@@ -374,24 +414,24 @@ All notable changes to this project will be documented in this file.
374
414
 
375
415
  * _Note in the final versions of the output css the values are updated to relative units (rems)_
376
416
 
377
- ### Bug Fixes
417
+ ### Bug fixes
378
418
 
379
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))
380
420
 
381
- ### Breaking change
421
+ ### Breaking changes
382
422
 
383
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.
384
424
 
385
425
  ## [3.2.3](https://github.com/mindvalley/mv-design-system/compare/v3.2.2...v3.2.3) (2024-03-27)
386
426
 
387
- ### Bug Fixes
427
+ ### Bug fixes
388
428
 
389
429
  * Add fontFamily from comments ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))
390
430
  * Update font-family names in USAGE.md ([b939bf3](https://github.com/mindvalley/mv-design-system/commit/b939bf3caa3d95a275e8cdb35eed85d225fd93a2))
391
431
 
392
432
  ## [3.2.2](https://github.com/mindvalley/mv-design-system/compare/v3.2.1...v3.2.2) (2024-02-29)
393
433
 
394
- ### Bug Fixes
434
+ ### Bug fixes
395
435
 
396
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))
397
437
 
@@ -502,7 +542,7 @@ All notable changes to this project will be documented in this file.
502
542
  | 18a | #0000002e |
503
543
  | 70a | #000000b2 |
504
544
 
505
- #### white
545
+ #### White
506
546
 
507
547
  | Color Name | Color Value |
508
548
  |------------|---------------|
@@ -512,12 +552,12 @@ All notable changes to this project will be documented in this file.
512
552
  | 70a | #ffffffb2 |
513
553
  | 8a | #ffffff14 |
514
554
 
515
- ### Breaking change
555
+ ### Breaking changes
516
556
 
517
557
  * Updated `body-bold` typography: Adjusted letterSpacing from 1.56% to 2.19%.
518
558
  * Removed the following accent colors
519
559
 
520
- #### black
560
+ #### Black
521
561
 
522
562
  | Name | Hex Value |
523
563
  |------|------------|
@@ -525,7 +565,7 @@ All notable changes to this project will be documented in this file.
525
565
  | 20a | #00000033 |
526
566
  | 30a | #0000004d |
527
567
 
528
- #### white
568
+ #### White
529
569
 
530
570
  | Name | Hex Value |
531
571
  |------|------------|
@@ -533,7 +573,7 @@ All notable changes to this project will be documented in this file.
533
573
 
534
574
  ## [3.1.2](https://github.com/mindvalley/mv-design-system/compare/v3.1.1...v3.1.2) (2023-11-14)
535
575
 
536
- ### Bug Fixes
576
+ ### Bug fixes
537
577
 
538
578
  * Fix broken typography font family
539
579
  * Remove rounding of typography values ([fb1fd1e](https://github.com/mindvalley/mv-design-system/commit/fb1fd1e4182625b72f406bc64a49aeabfc9f3d76))
@@ -551,11 +591,11 @@ All notable changes to this project will be documented in this file.
551
591
 
552
592
  ## [3.1.1](https://github.com/mindvalley/mv-design-system/compare/v3.1.0...v3.1.1) (2023-11-09)
553
593
 
554
- ### Bug Fixes
594
+ ### Bug fixes
555
595
 
556
596
  * Bundle the typography tokens with the package ([0def7ea](https://github.com/mindvalley/mv-design-system/commit/0def7eafb891427eec53d0cdcd65e2184cd2e9f7))
557
597
 
558
- # [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)
559
599
 
560
600
  ### Features
561
601
 
@@ -577,7 +617,7 @@ New typography classes added
577
617
 
578
618
  * Add documentation listing descriptions and example returns for custom transforms
579
619
 
580
- ### Code Refactoring
620
+ ### Code refactoring
581
621
 
582
622
  * Replace typography plugin with refactored rewrite (0603ec5)
583
623
  * Refactor function for processing typography to remove redundant logic (cb89d3b)
@@ -593,21 +633,21 @@ It has come to our attention that there is a bug affecting typography tokens due
593
633
 
594
634
  ## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)
595
635
 
596
- ### Bug Fixes
636
+ ### Bug fixes
597
637
 
598
638
  * update title-bold-1 mobile letter spacing json value ([c20cbf2](https://github.com/mindvalley/mv-design-system/commit/c20cbf223b4bdf6dcf17fcd962c29a9399f20d1a))
599
639
 
600
640
  ## [3.0.1](https://github.com/mindvalley/mv-design-system/compare/v3.0.0...v3.0.1) (2023-09-18)
601
641
 
602
- ### Bug Fixes
642
+ ### Bug fixes
603
643
 
604
644
  * **typography:** update title bold 1 letter spacing ([29e0622](https://github.com/mindvalley/mv-design-system/commit/29e062249a623c2ade78a91861edd9a3d95bcb47))
605
645
 
606
- # 2.4.0 (2023-06-03)
646
+ ## [2.4.0] (2023-06-03)
607
647
 
608
648
  Color updates
609
649
 
610
- ### New Values
650
+ ### New values
611
651
 
612
652
  * New alpha colors added
613
653
 
@@ -623,9 +663,9 @@ Color updates
623
663
  | white-30a | rgba(255, 255, 255, 0.3) |
624
664
  | white-10a | rgba(255, 255, 255, 0.1) |
625
665
 
626
- ### ⚠ BREAKING CHANGES
666
+ ### ⚠ Breaking changes
627
667
 
628
- #### Removed Colors
668
+ #### Removed colors
629
669
 
630
670
  * warm-gray colors are no longer used.
631
671
 
@@ -650,13 +690,13 @@ Color updates
650
690
  | magenta | #fb03ff |
651
691
  | rose | #ff68a8 |
652
692
 
653
- #### Updated Name
693
+ #### Updated name
654
694
 
655
695
  | Color value | Old Name | New Name |
656
696
  | ------------- | ------------ | ----------- |
657
697
  | #9b37f2 | brand-accent | purple-tint |
658
698
 
659
- # 2.3.0 (2023-03-22)
699
+ ## [2.3.0] (2023-03-22)
660
700
 
661
701
  ### Added
662
702
 
@@ -686,7 +726,7 @@ title4 | 28px -> 24px | 34px > 30px
686
726
  title5 | 24px -> 20px | 30px -> 24px
687
727
  title6 | 20px -> 18px | 24px -> 22px
688
728
 
689
- ### ⚠ BREAKING CHANGES
729
+ ### ⚠ Breaking changes
690
730
 
691
731
  * Utility classes removed: `disclaimerText` and `caption`. They are now all `captionDisclaimer`.
692
732
 
@@ -694,24 +734,24 @@ title6 | 20px -> 18px | 24px -> 22px
694
734
 
695
735
  Link to the update: - Update typography plugin (#30) 8b34a83
696
736
 
697
- # 2.2.1 (2023-01-05)
737
+ ## [2.2.1] (2023-01-05)
698
738
 
699
- ## Bug Fixes
739
+ ### Bug fixes
700
740
 
701
741
  * Fixed issues with typography plugin not generating classnames properly when kebab casing was selected.
702
742
 
703
- ## Additions
743
+ ### Additions
704
744
 
705
745
  * Improved test coverage for casing and unit conversion helper functions.
706
746
  * Updated documentation.
707
747
 
708
- # 2.2.0 (2022-12-07)
748
+ ## [2.2.0] (2022-12-07)
709
749
 
710
- ## Features
750
+ ### Features
711
751
 
712
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)
713
753
 
714
- # 2.1.0 (2022-11-03)
754
+ ## [2.1.0] (2022-11-03)
715
755
 
716
756
  ### Features
717
757
 
@@ -719,7 +759,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
719
759
  * Updated documentation on [how to generate icons from figma](./docs/CONTRIBUTION.md#how-to-generate-icons-from-figma-to-code).
720
760
  * Added a way to see the rendered icons.
721
761
 
722
- ### ⚠ BREAKING CHANGES
762
+ ### ⚠ Breaking changes
723
763
 
724
764
  * Renamed `ico-spiritual-outline.svg` to `spiritual-outline.svg`
725
765
  * Renamed `icon-body.svg` to `body.svg`
@@ -731,7 +771,7 @@ Link to the update: - Update typography plugin (#30) 8b34a83
731
771
  * Renamed `icon-relationships.svg` to `relationships.svg`
732
772
  * Renamed `icon-soul.svg` to `soul.svg`
733
773
 
734
- # 2.0.0 (2022-09-27)
774
+ ## [2.0.0] (2022-09-27)
735
775
 
736
776
  ### Features
737
777
 
@@ -744,14 +784,14 @@ Link to the update: - Update typography plugin (#30) 8b34a83
744
784
  * `purple-500` color show correct value of `#ba62fd`
745
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.
746
786
 
747
- ### ⚠ BREAKING CHANGES
787
+ ### ⚠ Breaking changes
748
788
 
749
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).
750
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.
751
791
 
752
- # 1.3.0 (2022-07-20)
792
+ ## [1.3.0] (2022-07-20)
753
793
 
754
- ### ⚠ BREAKING CHANGES
794
+ ### ⚠ Breaking changes
755
795
 
756
796
  * Renamed all icons with the name `stroke` to `outline`. E.g `activity-stroke` is now `activity-outline`.
757
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`.
@@ -764,9 +804,9 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
764
804
  * Category Icons added: see [Category icons on Figma](https://www.figma.com/file/0b2swzflgtIMoELPgj4TVI/MV-Icons?node-id=32%3A3)
765
805
  * See list of [icon names](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208)
766
806
 
767
- # 1.2.0 (2022-07-19)
807
+ ## [1.2.0] (2022-07-19)
768
808
 
769
- ### ⚠ BREAKING CHANGES
809
+ ### ⚠ Breaking changes
770
810
 
771
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.
772
812
 
@@ -776,13 +816,13 @@ See comprehensive list of icon name changes [here](https://docs.google.com/sprea
776
816
 
777
817
  See the full list of [colors on figma](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257)
778
818
 
779
- # 1.1.0 (2022-07-12)
819
+ ## [1.1.0] (2022-07-12)
780
820
 
781
821
  * Removed references to brand.mindvalley.com: The team is no longer updating the online guide and is now working from Figma.
782
822
 
783
- # 1.0.0 (2022-07-11)
823
+ ## [1.0.0] (2022-07-11)
784
824
 
785
- ### Bug Fixes
825
+ ### Bug fixes
786
826
 
787
827
  * NPM TOKEN: edited readme with releases information [92dc7ee](https://github.com/mindvalley/mv-design-system/commit/92dc7eee8f4078c16ff0ece32deb225e8815f7ac)
788
828
 
package/README.md CHANGED
@@ -9,10 +9,9 @@
9
9
  </a>
10
10
  </p>
11
11
 
12
- The Mindvalley Design System provides reusable design tokens and assets to help developers, designers, and content authors build, maintain, and scale best-of-class digital experiences across the Mindvalley ecosystem.
13
- The design system has the Mindvalley Design Language as its foundation.
12
+ The Mindvalley Design System provides reusable design tokens and assets for building consistent digital experiences across the Mindvalley ecosystem, based on the Mindvalley Design Language.
14
13
 
15
- **Built with TypeScript** for type safety and better developer experience, it aims to make cross-brand UI development as fast as possible while maintaining a high level of quality and accessibility and reducing developer effort.
14
+ **Built with TypeScript** for type safety and better developer experience, it speeds cross-brand UI development while maintaining quality and accessibility.
16
15
 
17
16
  #### Key Features
18
17
 
@@ -24,30 +23,27 @@ The design system has the Mindvalley Design Language as its foundation.
24
23
 
25
24
  #### Getting started
26
25
 
27
- 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. Then, you can read the following guides:
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
+ and access will be granted.
28
28
 
29
- 1. The [usage guide](docs/USAGE.md), if you want to start using the design system in your project/repo (includes TypeScript examples).
30
- 2. The [contribution](docs/CONTRIBUTION.md) and [release](docs/RELEASING.md) guides if you want to contribute to the repo.
31
- 3. The [token validation guide](docs/token-validation.md) for understanding how Zod validates design tokens with TypeScript.
29
+ Then, you can read the following guides:
32
30
 
33
- *Note:*
34
- From this point onwards, there will be continous mention of the word *token(s)* or *design token(s)*.
35
- Get an understanding of what they are here 👉 [what are design tokens?](https://css-tricks.com/what-are-design-tokens/)
31
+ 1. The [usage guide](docs/usage.md), if you want to start using the design system in your project/repo (includes examples for different web frameworks).
32
+ 2. The [contribution](CONTRIBUTING.md) and [release](docs/releasing.md) guides if you want to contribute to the repo.
36
33
 
37
- 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)
38
- and access will be granted.
34
+ *Note:* This guide uses the term *design tokens* throughout. Learn what they are: [What are design tokens?](https://css-tricks.com/what-are-design-tokens/)
39
35
 
40
36
  #### :books: Usage
41
37
 
42
- See the comprehensive [usage guide](docs/USAGE.md).
38
+ See the comprehensive [usage guide](docs/usage.md).
43
39
 
44
40
  #### 🙌 Contributing
45
41
 
46
- Read about the development process in the [contribution guide](docs/CONTRIBUTION.md).
42
+ Read about the development process in the [contribution guide](CONTRIBUTING.md).
47
43
 
48
44
  #### 🚀 Releasing and publishing changes
49
45
 
50
- You can find docs about our release process in the [release guide](docs/RELEASING.md).
46
+ You can find docs about our release process in the [release guide](docs/releasing.md).
51
47
 
52
48
  #### ⚙️ Support
53
49
 
@@ -56,8 +52,6 @@ You can find docs about our release process in the [release guide](docs/RELEASIN
56
52
  * TypeScript and JavaScript projects
57
53
  * CommonJS and ES modules
58
54
 
59
- ####
60
-
61
55
  ## 🤷🏽‍♂️ Need Help?
62
56
 
63
57
  For questions on how to use the Mindvalley Design System, please join and post questions to the [#mindvalley-design-system](https://mindvalley.slack.com/archives/C03F4SBLZL2) channel on Slack, or reach out to any of the contributors for assistance.
@@ -2,9 +2,12 @@ export interface TypographyTokens {
2
2
  [key: string]: {
3
3
  fontFamily: string;
4
4
  fontSize: string;
5
+ fontStyle?: string;
6
+ fontWeight?: number;
7
+ fontWidth?: number;
5
8
  letterSpacing: string;
6
9
  lineHeight: string;
7
- fontWeight?: number;
10
+ slant?: number;
8
11
  };
9
12
  }
10
13
  declare const tokens: TypographyTokens;
@@ -1 +1 @@
1
- {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tailwind/plugins/tokens/b2b/typography.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,UAAU,EAAE,MAAM,CAAA;QAClB,QAAQ,EAAE,MAAM,CAAA;QAChB,aAAa,EAAE,MAAM,CAAA;QACrB,UAAU,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAED,QAAA,MAAM,MAAM,EAAE,gBA0Bb,CAAA;AAED,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tailwind/plugins/tokens/b2b/typography.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,UAAU,EAAE,MAAM,CAAA;QAClB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,QAAA,MAAM,MAAM,EAAE,gBA0Bb,CAAA;AAED,eAAe,MAAM,CAAA"}
@@ -1,30 +1,30 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tokens = {
4
- 'display-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "80px", "letterSpacing": "0.25px", "lineHeight": "96px", "fontWeight": 500 },
5
- 'display-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "100px", "letterSpacing": "0.25px", "lineHeight": "115px", "fontWeight": 500 },
6
- 'display-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "letterSpacing": "0.25px", "lineHeight": "72px", "fontWeight": 500 },
7
- 'display-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "80px", "letterSpacing": "0.25px", "lineHeight": "96px", "fontWeight": 500 },
8
- 'display-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "letterSpacing": "0.25px", "lineHeight": "56px", "fontWeight": 500 },
9
- 'display-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "letterSpacing": "0.25px", "lineHeight": "72px", "fontWeight": 500 },
10
- 'heading-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "32px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
11
- 'heading-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
12
- 'heading-10': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "letterSpacing": "0.35px", "lineHeight": "15px", "fontWeight": 500 },
13
- 'heading-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
14
- 'heading-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
15
- 'heading-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
16
- 'heading-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
17
- 'heading-4-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
18
- 'heading-4-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
19
- 'heading-5-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
20
- 'heading-5-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 500 },
21
- 'heading-6-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "22px", "fontWeight": 500 },
22
- 'heading-6-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "24px", "fontWeight": 500 },
23
- 'heading-7-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "20px", "fontWeight": 500 },
24
- 'heading-7-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "22px", "fontWeight": 500 },
25
- 'heading-8-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 500 },
26
- 'heading-8-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "20px", "fontWeight": 500 },
27
- 'heading-9-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "letterSpacing": "0.35px", "lineHeight": "15px", "fontWeight": 500 },
28
- 'heading-9-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 500 }
4
+ 'display-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "80px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "96px" },
5
+ 'display-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "100px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "115px" },
6
+ 'display-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "72px" },
7
+ 'display-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "80px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "96px" },
8
+ 'display-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "56px" },
9
+ 'display-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "72px" },
10
+ 'heading-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "32px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
11
+ 'heading-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
12
+ 'heading-10': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "fontWeight": 500, "letterSpacing": "0.35px", "lineHeight": "15px" },
13
+ 'heading-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
14
+ 'heading-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
15
+ 'heading-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
16
+ 'heading-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
17
+ 'heading-4-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
18
+ 'heading-4-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
19
+ 'heading-5-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
20
+ 'heading-5-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "0px" },
21
+ 'heading-6-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "22px" },
22
+ 'heading-6-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "24px" },
23
+ 'heading-7-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "20px" },
24
+ 'heading-7-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "22px" },
25
+ 'heading-8-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "fontWeight": 500, "letterSpacing": "0.35px", "lineHeight": "16px" },
26
+ 'heading-8-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "fontWeight": 500, "letterSpacing": "0.25px", "lineHeight": "20px" },
27
+ 'heading-9-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "fontWeight": 500, "letterSpacing": "0.35px", "lineHeight": "15px" },
28
+ 'heading-9-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 22', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "fontWeight": 500, "letterSpacing": "0.35px", "lineHeight": "16px" }
29
29
  };
30
30
  exports.default = tokens;
@@ -0,0 +1,15 @@
1
+ export interface TypographyTokens {
2
+ [key: string]: {
3
+ fontFamily: string;
4
+ fontSize: string;
5
+ fontStyle?: string;
6
+ fontWeight?: number;
7
+ fontWidth?: number;
8
+ letterSpacing: string;
9
+ lineHeight: string;
10
+ slant?: number;
11
+ };
12
+ }
13
+ declare const tokens: TypographyTokens;
14
+ export default tokens;
15
+ //# sourceMappingURL=typography-gsf.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography-gsf.d.ts","sourceRoot":"","sources":["../../../../../src/tailwind/plugins/tokens/mindvalley/typography-gsf.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,UAAU,EAAE,MAAM,CAAA;QAClB,QAAQ,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,UAAU,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,QAAA,MAAM,MAAM,EAAE,gBAyEb,CAAA;AAED,eAAe,MAAM,CAAA"}