@mindvalley/design-system 4.0.0 → 4.1.0
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 +74 -235
- package/README.md +11 -17
- package/dist/b2b.d.ts +31 -95
- package/dist/b2b.d.ts.map +1 -1
- package/dist/b2b.js +1 -1
- package/dist/b2b.js.map +1 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.d.ts +4 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.js +25 -25
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.d.ts +15 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.d.ts.map +1 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography-gsf.js +77 -0
- package/dist/tailwind/plugins/tokens/mindvalley/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/mindvalley/typography.js +420 -60
- package/dist/tailwind/plugins/typography-gsf.d.ts +31 -0
- package/dist/tailwind/plugins/typography-gsf.d.ts.map +1 -0
- package/dist/tailwind/plugins/typography-gsf.js +130 -0
- package/docs/README.md +25 -0
- package/docs/RELEASING.md +9 -9
- package/docs/USAGE.md +129 -131
- package/docs/token-validation.md +298 -0
- package/docs/typography/README.md +58 -0
- package/docs/typography/migration.md +166 -0
- package/docs/typography/setup.md +366 -0
- package/package.json +10 -3
- package/docs/CONTRIBUTION.md +0 -262
- package/docs/typography-fonts.md +0 -552
- package/docs/typography-token-pipeline-b2b.md +0 -156
package/CHANGELOG.md
CHANGED
|
@@ -1,282 +1,121 @@
|
|
|
1
|
-
# [4.
|
|
1
|
+
# [4.1.0](https://github.com/mindvalley/mv-design-system/compare/v4.0.1...v4.1.0) (2026-01-23)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* **tokens:**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* Update
|
|
11
|
-
* Use sentence-case in auto-format workflow commit message ([1ac5359](https://github.com/mindvalley/mv-design-system/commit/1ac5359270a8b8ecfda272728f20654e7c881aae))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### Code Refactoring
|
|
15
|
-
|
|
16
|
-
* **style-dictionary:** Fix directory name typo and reorganize structure ([1ac5359](https://github.com/mindvalley/mv-design-system/commit/1ac5359270a8b8ecfda272728f20654e7c881aae))
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
* CRF-928: Update Mindvalley brand tokens (#132) ([1ac5359](https://github.com/mindvalley/mv-design-system/commit/1ac5359270a8b8ecfda272728f20654e7c881aae)), closes [#132](https://github.com/mindvalley/mv-design-system/issues/132)
|
|
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))
|
|
20
11
|
|
|
21
12
|
|
|
22
13
|
### Features
|
|
23
14
|
|
|
24
|
-
* **
|
|
25
|
-
*
|
|
26
|
-
* **
|
|
27
|
-
* **tokens:** Update Style Dictionary v5 type interfaces ([1ac5359](https://github.com/mindvalley/mv-design-system/commit/1ac5359270a8b8ecfda272728f20654e7c881aae))
|
|
28
|
-
* **build:** Upgrade to Style Dictionary v5 and update build system ([1ac5359](https://github.com/mindvalley/mv-design-system/commit/1ac5359270a8b8ecfda272728f20654e7c881aae))
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### BREAKING CHANGES
|
|
32
|
-
|
|
33
|
-
* Import paths have changed from style-dictonary to style-dictionary
|
|
34
|
-
|
|
35
|
-
* feat(build): Upgrade to Style Dictionary v5 and update build system
|
|
36
|
-
|
|
37
|
-
- Update to Style Dictionary v5 API with async/await support
|
|
38
|
-
- Replace deprecated SD.buildAllPlatforms() with platform-specific builds
|
|
39
|
-
- Add new preprocessors for typography tokens
|
|
40
|
-
- Implement error handling for build failures
|
|
41
|
-
- Update import to use new modular style-dictionary structure
|
|
42
|
-
- Add explicit platform definitions with proper transform chains
|
|
43
|
-
* Build system now requires Style Dictionary v5
|
|
44
|
-
|
|
45
|
-
* feat(tokens): Add theme filtering for color tokens
|
|
46
|
-
|
|
47
|
-
Add color-base-theme filter to remove duplicate responsive theme variants
|
|
48
|
-
(desktop/tablet/mobile) from color token output. Currently filters to 'base'
|
|
49
|
-
theme only since all variants contain identical values.
|
|
50
|
-
|
|
51
|
-
- Add color-base-theme.ts with theme filtering logic
|
|
52
|
-
- Use constants pattern for maintainability and future extensibility
|
|
53
|
-
- Register filter in filters/index.ts
|
|
54
|
-
|
|
55
|
-
This establishes foundation for future light/dark theme support by updating
|
|
56
|
-
INCLUDED_COLOR_THEMES constant to ['base', 'light', 'dark'].
|
|
57
|
-
|
|
58
|
-
* feat(tokens): Add color subcategory filtering
|
|
59
|
-
|
|
60
|
-
Add color-categories filter to include only specific color subcategories
|
|
61
|
-
(accent and colors) in the build output, excluding 11 other subcategories
|
|
62
|
-
like primary, secondary, backgrounds, etc.
|
|
63
|
-
|
|
64
|
-
- Add color-categories.ts with subcategory filtering logic
|
|
65
|
-
- Follow brand-typography.ts pattern for consistency
|
|
66
|
-
- Use constants for type-safe filtering
|
|
67
|
-
- Register filter in filters/index.ts
|
|
68
|
-
|
|
69
|
-
This reduces the number of color tokens in the output to only those
|
|
70
|
-
needed by consumers.
|
|
71
|
-
|
|
72
|
-
* fix(tokens): Correct color token opacity notation
|
|
73
|
-
|
|
74
|
-
Transform opacity segments from hyphenated format (18-a) to concatenated format (18a).
|
|
75
|
-
This ensures consistent token naming and prevents build issues with opacity values.
|
|
76
|
-
|
|
77
|
-
* feat(tokens): Update Style Dictionary v5 type interfaces
|
|
78
|
-
|
|
79
|
-
Update build configuration to use correct Style Dictionary v5 TypeScript interfaces.
|
|
80
|
-
This ensures type safety and compatibility with the new filter system.
|
|
81
|
-
|
|
82
|
-
* docs(tokens): Add color aliasing strategy guide
|
|
83
|
-
|
|
84
|
-
Document the strategy for handling future color token aliasing when Supernova
|
|
85
|
-
switches from direct values to reference-based formats. Includes implementation
|
|
86
|
-
options, migration path, and Style Dictionary utility usage examples.
|
|
87
|
-
|
|
88
|
-
* test(tokens): Fix naming transform tests for theme suffix removal
|
|
89
|
-
|
|
90
|
-
Update test cases to include theme suffix in token paths (base) to match
|
|
91
|
-
actual token structure. Add test case for opacity notation fix (18-a → 18a).
|
|
92
|
-
|
|
93
|
-
* refactor(transforms): Rename responsiveTypography to kebab-case
|
|
94
|
-
|
|
95
|
-
Rename transform file from responsiveTypography.ts to responsive-typography.ts
|
|
96
|
-
for consistency with project naming conventions.
|
|
97
|
-
|
|
98
|
-
* refactor(types): Add proper TypeScript interfaces for typography tokens
|
|
99
|
-
|
|
100
|
-
Replace 'any' types with proper interfaces for typography token structure:
|
|
101
|
-
- Add TokenWithPreprocessorFields for preprocessor-added fields
|
|
102
|
-
- Add TypographyOriginalValue and TypographyTokenValue interfaces
|
|
103
|
-
- Add MeasureValue interface for nested value structures
|
|
104
|
-
- Update brand-typography filter with proper typing
|
|
105
|
-
|
|
106
|
-
* refactor(validation): Improve token schema validation with better types
|
|
107
|
-
|
|
108
|
-
Update Zod schemas and validation utilities:
|
|
109
|
-
- Add proper TypeScript types for validation results
|
|
110
|
-
- Improve schema structure for typography tokens
|
|
111
|
-
- Better error handling and type safety
|
|
112
|
-
|
|
113
|
-
* refactor(constants): Reorganize Style Dictionary constants
|
|
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))
|
|
114
18
|
|
|
115
|
-
- Remove excluded-tokens.ts (no longer needed)
|
|
116
|
-
- Add typography/filter-config.ts for centralized filter configuration
|
|
117
|
-
- Update index.ts exports to reflect new structure
|
|
118
19
|
|
|
119
|
-
|
|
20
|
+
### Reverts
|
|
120
21
|
|
|
121
|
-
|
|
122
|
-
extracting and formatting typography token descriptions.
|
|
22
|
+
* **style-dictionary:** Restore typography description-to-comment preprocessor ([3ae8fde](https://github.com/mindvalley/mv-design-system/commit/3ae8fde443bbd1e60266b7662c88f77eb5158ea7))
|
|
123
23
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
Rebuild typography tokens using updated Style Dictionary v5 configuration:
|
|
127
|
-
- Cleaner token structure with proper formatting
|
|
128
|
-
- Improved type safety
|
|
129
|
-
- Better documentation comments
|
|
130
|
-
|
|
131
|
-
* refactor(tailwind): Update typography plugin imports
|
|
132
|
-
|
|
133
|
-
Update Tailwind typography plugin to use new token file structure.
|
|
134
|
-
|
|
135
|
-
* style(tests): Format test files with Biome
|
|
136
|
-
|
|
137
|
-
Apply Biome formatting to all test files for consistency.
|
|
138
|
-
Some forEach callback return warnings remain (safe to ignore in tests).
|
|
139
|
-
|
|
140
|
-
* chore(config): Update project configuration files
|
|
141
|
-
|
|
142
|
-
- Format CLAUDE.md documentation with consistent spacing
|
|
143
|
-
- Update .markdownlint.json rules
|
|
144
|
-
- Refine jest.config.js and tsconfig.build.json settings
|
|
145
|
-
|
|
146
|
-
* docs: Add Style Dictionary v5 migration documentation
|
|
147
|
-
|
|
148
|
-
Add comprehensive documentation for:
|
|
149
|
-
- B2B typography changes and migration guide
|
|
150
|
-
- Mindvalley typography changes and migration guide
|
|
151
|
-
- Typography token pipeline documentation
|
|
152
|
-
- Color theming migration strategy
|
|
153
|
-
|
|
154
|
-
* chore: update Mindvalley design tokens
|
|
155
|
-
|
|
156
|
-
* chore: update B2B design tokens
|
|
157
|
-
|
|
158
|
-
* chore: update B2B design tokens
|
|
159
|
-
|
|
160
|
-
* chore: update Mindvalley design tokens
|
|
161
|
-
|
|
162
|
-
* chore: update B2B design tokens
|
|
163
|
-
|
|
164
|
-
* chore: update Mindvalley design tokens
|
|
165
|
-
|
|
166
|
-
* chore: update Mindvalley design tokens
|
|
167
|
-
|
|
168
|
-
* chore: Update @biomejs/biome and related dependencies to version 2.3.4
|
|
169
|
-
|
|
170
|
-
- Updated schema version in biome.json to 2.3.4.
|
|
171
|
-
- Updated @biomejs/biome and its CLI dependencies in package.json and package-lock.json to version 2.3.4 for consistency and compatibility.
|
|
172
|
-
|
|
173
|
-
* chore: Apply formatting fixes to config and token files
|
|
174
|
-
|
|
175
|
-
- Add trailing newlines to all token JSON files (21 files)
|
|
176
|
-
- Format babel.config.js with consistent spacing and trailing commas
|
|
177
|
-
- Remove trailing semicolon from babel.config.js
|
|
178
|
-
|
|
179
|
-
All changes are formatting-only with no functional impact.
|
|
180
|
-
|
|
181
|
-
* refactor: Simplify typography plugin import and configuration in plugin.helpers.ts
|
|
182
|
-
|
|
183
|
-
- Consolidated typography plugin import statement.
|
|
184
|
-
- Streamlined the configuration setup for generating plugin CSS by removing unnecessary try-catch block.
|
|
185
|
-
- Ensured consistent formatting and readability of the code.
|
|
186
|
-
|
|
187
|
-
* chore: Update Jest configuration to ignore TypeScript declaration files and add test-utils path mapping
|
|
188
|
-
|
|
189
|
-
- Removed temporary path ignore for '.conductor/' and added ignore for TypeScript declaration files (\\.d\\.ts$).
|
|
190
|
-
- Added path mapping for test utilities to streamline test imports.
|
|
191
|
-
|
|
192
|
-
* build: Update TypeScript configuration files to enhance module resolution and include additional paths
|
|
193
|
-
|
|
194
|
-
- Modified tsconfig.build.json to include JavaScript files from the build directory and TypeScript files from the tailwind plugins directory.
|
|
195
|
-
- Updated tsconfig.json to remove the rootDir setting, include test files, and add path mapping for test utilities.
|
|
196
|
-
- Enhanced tsconfig.test.json with baseUrl and path mappings for better module resolution in tests.
|
|
197
|
-
|
|
198
|
-
* fix: Correct typography for Mindvalley tokens
|
|
24
|
+
# Changelog
|
|
199
25
|
|
|
200
|
-
|
|
26
|
+
All notable changes to this project will be documented in this file.
|
|
201
27
|
|
|
202
|
-
|
|
28
|
+
## [4.0.1](https://github.com/mindvalley/mv-design-system/compare/v4.0.0...v4.0.1) (2026-01-05)
|
|
203
29
|
|
|
204
|
-
|
|
30
|
+
### Bug Fixes
|
|
205
31
|
|
|
206
|
-
*
|
|
32
|
+
* 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))
|
|
207
33
|
|
|
208
|
-
|
|
34
|
+
# [4.0.0](https://github.com/mindvalley/mv-design-system/compare/v3.4.2...v4.0.0) (2025-11-20)
|
|
209
35
|
|
|
210
|
-
|
|
36
|
+
### ✨ Features
|
|
211
37
|
|
|
212
|
-
*
|
|
38
|
+
* **Typography Font Loading**: New utility to generate `@font-face` CSS declarations for typography tokens
|
|
39
|
+
* Automatic font-face generation for both Mindvalley and B2B brands
|
|
40
|
+
* Outputs CSS, JS, and TypeScript declaration files
|
|
41
|
+
* Maps Sharp Grotesk fonts to Fastly CDN URLs
|
|
42
|
+
* See [Typography Font Loading Guide](./docs/typography-fonts.md) for usage
|
|
43
|
+
* New exports: `@mindvalley/design-system/typography/mindvalley/fonts.css` and `/b2b/fonts.css`
|
|
213
44
|
|
|
214
|
-
|
|
45
|
+
### 📝 Typography Changes
|
|
215
46
|
|
|
216
|
-
|
|
47
|
+
#### Mindvalley Brand
|
|
217
48
|
|
|
218
|
-
|
|
49
|
+
**New Typography Tokens:**
|
|
219
50
|
|
|
220
|
-
|
|
221
|
-
|
|
51
|
+
| Token | Font Family | Size | Letter Spacing | Line Height | Weight |
|
|
52
|
+
|-------|-------------|------|----------------|-------------|--------|
|
|
53
|
+
| `body-italic` | Sharp Grotesk Cyr Book Itl 19 | 16px | 0.35px | 24px | 400 |
|
|
54
|
+
| `body-large-italic` | Sharp Grotesk Cyr Book Itl 19 | 20px | 0.25px | 30px | 400 |
|
|
55
|
+
| `body-small-italic` | Sharp Grotesk Cyr Book Itl 19 | 14px | 0.35px | 20px | 400 |
|
|
56
|
+
| `body-xs-italic` | Sharp Grotesk Cyr Book 19 | 12px | 0.35px | 16px | 400 |
|
|
57
|
+
| `body-xs` | Sharp Grotesk Cyr Book 19 | 12px | 0.35px | 16px | 400 |
|
|
58
|
+
| `body-large-bold` | Sharp Grotesk Cyr Medium 19 | 20px | 0.25px | 30px | 500 |
|
|
222
59
|
|
|
223
|
-
|
|
60
|
+
**Font Family Corrections:**
|
|
224
61
|
|
|
225
|
-
|
|
226
|
-
|
|
62
|
+
| Token | Before | After |
|
|
63
|
+
|-------|--------|-------|
|
|
64
|
+
| All `title-bold-*` variants | Sharp Grotesk Cyr Semibold **21** | Sharp Grotesk Cyr Semibold **20** |
|
|
65
|
+
| `body-bold` | Sharp Grotesk Cyr Semibold 20 | Sharp Grotesk Cyr Medium 19 |
|
|
66
|
+
| `body-small-bold` | Sharp Grotesk Cyr Semibold 20 | Sharp Grotesk Cyr Medium 19 |
|
|
227
67
|
|
|
228
|
-
|
|
68
|
+
**Line Height Updates:**
|
|
229
69
|
|
|
230
|
-
|
|
70
|
+
| Token | Before | After | Notes |
|
|
71
|
+
|-------|--------|-------|-------|
|
|
72
|
+
| `title-2-mobile` | 38px | 40px | Increased spacing |
|
|
73
|
+
| `title-4-desktop` | 34px | 36px | Increased spacing |
|
|
74
|
+
| `title-bold-6` through `title-bold-11` | Various | 0px | Browser-calculated (mobile & desktop) |
|
|
231
75
|
|
|
232
|
-
|
|
233
|
-
- Included @types/vinyl in package-lock.json with its dependencies.
|
|
234
|
-
- Modified tsconfig.json to exclude __tests__ from the include path.
|
|
76
|
+
**Token Consolidation:**
|
|
235
77
|
|
|
236
|
-
*
|
|
78
|
+
* `title-7`, `title-8`, `title-9`, `title-10`, `title-11`: Merged from separate mobile/desktop variants into single responsive tokens
|
|
237
79
|
|
|
238
|
-
|
|
239
|
-
- Refactored the SvgSpriteConfig interface to use Partial<SVGSpriterConfig>.
|
|
240
|
-
- Simplified the SVG transformation process by removing redundant transformations.
|
|
241
|
-
- Added a JSDoc comment for the replaceSvgFillColorWithCurrent function to improve documentation clarity.
|
|
80
|
+
#### B2B Brand
|
|
242
81
|
|
|
243
|
-
|
|
82
|
+
**Line Height Updates:**
|
|
244
83
|
|
|
245
|
-
|
|
84
|
+
| Token | Before | After | Notes |
|
|
85
|
+
|-------|--------|-------|-------|
|
|
86
|
+
| `heading-1` through `heading-5` | Various | 0px | Browser-calculated (mobile & desktop) |
|
|
87
|
+
| `display-3-mobile` | 58px | 56px | Reduced spacing |
|
|
246
88
|
|
|
247
|
-
|
|
89
|
+
**Token Consolidation:**
|
|
248
90
|
|
|
249
|
-
-
|
|
250
|
-
- Modified naming transforms to handle special cases for grey tokens, ensuring "grey.black" and "grey.white" are output as "black" and "white" without prefixes.
|
|
91
|
+
* `heading-9`, `heading-10`: Merged from separate mobile/desktop variants into single responsive tokens
|
|
251
92
|
|
|
252
|
-
|
|
93
|
+
**Font Weight Addition:**
|
|
253
94
|
|
|
254
|
-
|
|
255
|
-
- Updated the build script to generate font face CSS files during the token build process.
|
|
256
|
-
- Added comprehensive documentation on loading typography fonts across various frameworks, including usage examples for Mindvalley and B2B brands.
|
|
257
|
-
- Enhanced package.json to include new typography output paths for TypeScript definitions and JavaScript modules.
|
|
95
|
+
* All B2B typography tokens now include explicit `fontWeight: 500`
|
|
258
96
|
|
|
259
|
-
|
|
97
|
+
### 🔧 Code Quality
|
|
260
98
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
99
|
+
* **TypeScript**: Comprehensive type improvements throughout the codebase
|
|
100
|
+
* Proper interfaces for typography tokens (no more `any` types)
|
|
101
|
+
* Enhanced Zod schema validation
|
|
102
|
+
* Better type safety for Style Dictionary v5 APIs
|
|
103
|
+
* **Testing**: All 386 tests passing with updated expectations for opacity suffixes
|
|
104
|
+
* **Formatting**: Applied Biome 2.3.4 formatting across all files
|
|
264
105
|
|
|
265
|
-
|
|
106
|
+
### 📚 Documentation
|
|
266
107
|
|
|
267
|
-
|
|
268
|
-
|
|
108
|
+
* Added comprehensive [Typography Font Loading Guide](./docs/typography-fonts.md) with framework examples (Next.js, Vite, Vue, Phoenix, etc.)
|
|
109
|
+
* Updated USAGE.md with new font loading instructions
|
|
269
110
|
|
|
270
|
-
|
|
111
|
+
### 📦 Package Updates
|
|
271
112
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
* **style-dictionary:** Import paths have changed from style-dictonary to style-dictionary
|
|
275
|
-
* **build:** Build system now requires Style Dictionary v5
|
|
113
|
+
* Updated `@biomejs/biome` to 2.3.4
|
|
114
|
+
* Enhanced package.json exports for typography font files
|
|
276
115
|
|
|
277
|
-
|
|
116
|
+
### ⚠️ Breaking changes
|
|
278
117
|
|
|
279
|
-
|
|
118
|
+
* Reported b2b colors issues. Fixed in v.4.0.1.
|
|
280
119
|
|
|
281
120
|
## [3.4.2](https://github.com/mindvalley/mv-design-system/compare/v3.4.1...v3.4.2) (2025-10-22)
|
|
282
121
|
|
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
|
|
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
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
34
|
-
|
|
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
|
-
|
|
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/
|
|
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](
|
|
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/
|
|
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.
|
package/dist/b2b.d.ts
CHANGED
|
@@ -4,46 +4,27 @@ export interface ColorTokens {
|
|
|
4
4
|
export declare const colors: ColorTokens;
|
|
5
5
|
declare const _default: {
|
|
6
6
|
colors: {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"purple-
|
|
21
|
-
"purple-
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"white-4a": string;
|
|
29
|
-
"white-40a": string;
|
|
30
|
-
"white-50a": string;
|
|
31
|
-
"white-6a": string;
|
|
32
|
-
"white-60a": string;
|
|
33
|
-
"white-70a": string;
|
|
34
|
-
"white-8a": string;
|
|
35
|
-
"white-80a": string;
|
|
36
|
-
"white-90a": string;
|
|
37
|
-
"aqua-50": string;
|
|
38
|
-
"aqua-100": string;
|
|
39
|
-
"aqua-200": string;
|
|
40
|
-
"aqua-300": string;
|
|
41
|
-
"aqua-400": string;
|
|
42
|
-
"aqua-500": string;
|
|
43
|
-
"aqua-600": string;
|
|
44
|
-
"aqua-700": string;
|
|
45
|
-
"aqua-800": string;
|
|
46
|
-
"aqua-900": string;
|
|
7
|
+
"brown-12a": string;
|
|
8
|
+
"brown-24a": string;
|
|
9
|
+
"brown-8a": string;
|
|
10
|
+
"brown-90a": string;
|
|
11
|
+
"dark-brown-12a": string;
|
|
12
|
+
"dark-brown-24a": string;
|
|
13
|
+
"dark-brown-4a": string;
|
|
14
|
+
"dark-brown-8a": string;
|
|
15
|
+
"dark-brown-80a": string;
|
|
16
|
+
"purple-12a": string;
|
|
17
|
+
"purple-18a": string;
|
|
18
|
+
"purple-28a": string;
|
|
19
|
+
"purple-4a": string;
|
|
20
|
+
"purple-70a": string;
|
|
21
|
+
"purple-8a": string;
|
|
22
|
+
"red-12a": string;
|
|
23
|
+
"red-18a": string;
|
|
24
|
+
"red-28a": string;
|
|
25
|
+
"red-4a": string;
|
|
26
|
+
"red-70a": string;
|
|
27
|
+
"red-8a": string;
|
|
47
28
|
"blue-50": string;
|
|
48
29
|
"blue-100": string;
|
|
49
30
|
"blue-200": string;
|
|
@@ -54,51 +35,16 @@ declare const _default: {
|
|
|
54
35
|
"blue-700": string;
|
|
55
36
|
"blue-800": string;
|
|
56
37
|
"blue-900": string;
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"grey-100": string;
|
|
68
|
-
"grey-150": string;
|
|
69
|
-
"grey-200": string;
|
|
70
|
-
"grey-250": string;
|
|
71
|
-
"grey-300": string;
|
|
72
|
-
"grey-350": string;
|
|
73
|
-
"grey-400": string;
|
|
74
|
-
"grey-450": string;
|
|
75
|
-
"grey-500": string;
|
|
76
|
-
"grey-550": string;
|
|
77
|
-
"grey-600": string;
|
|
78
|
-
"grey-650": string;
|
|
79
|
-
"grey-700": string;
|
|
80
|
-
black: string;
|
|
81
|
-
white: string;
|
|
82
|
-
"orange-50": string;
|
|
83
|
-
"orange-100": string;
|
|
84
|
-
"orange-200": string;
|
|
85
|
-
"orange-300": string;
|
|
86
|
-
"orange-400": string;
|
|
87
|
-
"orange-500": string;
|
|
88
|
-
"orange-600": string;
|
|
89
|
-
"orange-700": string;
|
|
90
|
-
"orange-800": string;
|
|
91
|
-
"orange-900": string;
|
|
92
|
-
"pink-50": string;
|
|
93
|
-
"pink-100": string;
|
|
94
|
-
"pink-200": string;
|
|
95
|
-
"pink-300": string;
|
|
96
|
-
"pink-400": string;
|
|
97
|
-
"pink-500": string;
|
|
98
|
-
"pink-600": string;
|
|
99
|
-
"pink-700": string;
|
|
100
|
-
"pink-800": string;
|
|
101
|
-
"pink-900": string;
|
|
38
|
+
"brown-50": string;
|
|
39
|
+
"brown-100": string;
|
|
40
|
+
"brown-200": string;
|
|
41
|
+
"brown-300": string;
|
|
42
|
+
"brown-400": string;
|
|
43
|
+
"brown-500": string;
|
|
44
|
+
"brown-600": string;
|
|
45
|
+
"brown-700": string;
|
|
46
|
+
"brown-800": string;
|
|
47
|
+
"brown-900": string;
|
|
102
48
|
"purple-50": string;
|
|
103
49
|
"purple-100": string;
|
|
104
50
|
"purple-200": string;
|
|
@@ -129,16 +75,6 @@ declare const _default: {
|
|
|
129
75
|
"teal-700": string;
|
|
130
76
|
"teal-800": string;
|
|
131
77
|
"teal-900": string;
|
|
132
|
-
"yellow-50": string;
|
|
133
|
-
"yellow-100": string;
|
|
134
|
-
"yellow-200": string;
|
|
135
|
-
"yellow-300": string;
|
|
136
|
-
"yellow-400": string;
|
|
137
|
-
"yellow-500": string;
|
|
138
|
-
"yellow-600": string;
|
|
139
|
-
"yellow-700": string;
|
|
140
|
-
"yellow-800": string;
|
|
141
|
-
"yellow-900": string;
|
|
142
78
|
};
|
|
143
79
|
};
|
|
144
80
|
export default _default;
|
package/dist/b2b.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b2b.d.ts","sourceRoot":"","sources":["../src/b2b.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,eAAO,MAAM,MAAM,EAAmB,WAAW,CAAA
|
|
1
|
+
{"version":3,"file":"b2b.d.ts","sourceRoot":"","sources":["../src/b2b.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,eAAO,MAAM,MAAM,EAAmB,WAAW,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGjD,wBAEC"}
|
package/dist/b2b.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports.mvDesignSystem=r():e.mvDesignSystem=r()}(this,(()=>(()=>{var e={875:e=>{e.exports={"brown-12a":"rgba(249, 248, 244, 0.12)","brown-24a":"rgba(249, 248, 244, 0.24)","brown-8a":"rgba(249, 248, 244, 0.08)","brown-90a":"rgba(249, 248, 244, 0.9)","dark-brown-12a":"rgba(135, 121, 111, 0.12)","dark-brown-24a":"rgba(135, 121, 111, 0.24)","dark-brown-4a":"rgba(135, 121, 111, 0.04)","dark-brown-8a":"rgba(135, 121, 111, 0.08)","dark-brown-80a":"rgba(135, 121, 111, 0.8)","purple-12a":"rgba(158, 148, 241, 0.12)","purple-18a":"rgba(158, 148, 241, 0.18)","purple-28a":"rgba(158, 148, 241, 0.28)","purple-4a":"rgba(158, 148, 241, 0.04)","purple-70a":"rgba(158, 148, 241, 0.7)","purple-8a":"rgba(158, 148, 241, 0.08)","red-12a":"rgba(255, 109, 92, 0.12)","red-18a":"rgba(255, 109, 92, 0.18)","red-28a":"rgba(255, 109, 92, 0.28)","red-4a":"rgba(255, 109, 92, 0.04)","red-70a":"rgba(255, 109, 92, 0.7)","red-8a":"rgba(255, 109, 92, 0.08)","blue-50":"#f0f6fe","blue-100":"#dce9fd","blue-200":"#c2dafb","blue-300":"#98c3f8","blue-400":"#67a3f3","blue-500":"#4380ee","blue-600":"#3165e3","blue-700":"#204bb4","blue-800":"#192e75","blue-900":"#121f54","brown-50":"#f9f8f4","brown-100":"#f3efe9","brown-200":"#ede6de","brown-300":"#d4c5ba","brown-400":"#ae9f95","brown-500":"#87796f","brown-600":"#6f635c","brown-700":"#574e48","brown-800":"#3f3835","brown-900":"#272221","purple-50":"#f5f4fe","purple-100":"#ecebfc","purple-200":"#dad9fb","purple-300":"#bfbbf7","purple-400":"#9e94f1","purple-500":"#7e68ea","purple-600":"#664bdd","purple-700":"#4d2dab","purple-800":"#40268c","purple-900":"#26175e","red-50":"#fff2f1","red-100":"#ffe4e2","red-200":"#ffada7","red-300":"#ff8d82","red-400":"#ff6d5c","red-500":"#e85546","red-600":"#d03c2f","red-700":"#a83126","red-800":"#782b24","red-900":"#41120e","teal-50":"#f1fcfb","teal-100":"#d1f6f3","teal-200":"#a3ece8","teal-300":"#6ddbda","teal-400":"#3cbcbe","teal-500":"#25a4a7","teal-600":"#1b8186","teal-700":"#1a6367","teal-800":"#194448","teal-900":"#09252a"}}},r={};function a(b){var f=r[b];if(void 0!==f)return f.exports;var d=r[b]={exports:{}};return e[b](d,d.exports,a),d.exports}var b={};return(()=>{"use strict";var e=b;Object.defineProperty(e,"__esModule",{value:!0}),e.colors=void 0;const r=a(875);e.colors=r,e.default={colors:r}})(),b})()));
|
|
2
2
|
//# sourceMappingURL=b2b.js.map
|