@mindvalley/design-system 3.0.0 → 3.0.2
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 +203 -0
- package/dist/index.js.map +1 -1
- package/docs/USAGE.md +70 -8
- package/package.json +7 -6
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
All notable changes to this project will be documented in this file.
|
|
3
|
+
|
|
4
|
+
## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
* update title-bold-1 mobile letter spacing json value ([c20cbf2](https://github.com/mindvalley/mv-design-system/commit/c20cbf223b4bdf6dcf17fcd962c29a9399f20d1a))
|
|
10
|
+
|
|
11
|
+
## [3.0.1](https://github.com/mindvalley/mv-design-system/compare/v3.0.0...v3.0.1) (2023-09-18)
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* **typography:** update title bold 1 letter spacing ([29e0622](https://github.com/mindvalley/mv-design-system/commit/29e062249a623c2ade78a91861edd9a3d95bcb47))
|
|
16
|
+
|
|
17
|
+
# 2.4.0 (2023-06-03)
|
|
18
|
+
|
|
19
|
+
Color updates
|
|
20
|
+
|
|
21
|
+
### New Values
|
|
22
|
+
|
|
23
|
+
* New alpha colors added
|
|
24
|
+
|
|
25
|
+
| Name | Color |
|
|
26
|
+
| -------------- | --------------------------- |
|
|
27
|
+
| purple-500-90a | rgba(186, 98, 253, 0.9) |
|
|
28
|
+
| purple-500-20a | rgba(186, 98, 253, 0.2) |
|
|
29
|
+
| purple-600-10a | rgba(122, 18, 212, 0.1) |
|
|
30
|
+
| black-30a | rgba(0, 0, 0, 0.3) |
|
|
31
|
+
| black-20a | rgba(0, 0, 0, 0.2) |
|
|
32
|
+
| black-10a | rgba(0, 0, 0, 0.1) |
|
|
33
|
+
| white-90a | rgba(255, 255, 255, 0.9) |
|
|
34
|
+
| white-30a | rgba(255, 255, 255, 0.3) |
|
|
35
|
+
| white-10a | rgba(255, 255, 255, 0.1) |
|
|
36
|
+
|
|
37
|
+
### ⚠ BREAKING CHANGES
|
|
38
|
+
|
|
39
|
+
#### Removed Colors
|
|
40
|
+
|
|
41
|
+
* warm-gray colors are no longer used.
|
|
42
|
+
|
|
43
|
+
| Name | Color |
|
|
44
|
+
| ---------------- | ------- |
|
|
45
|
+
| warm-grey-100 | #fafafa |
|
|
46
|
+
| warm-grey-150 | #f5f5f5 |
|
|
47
|
+
| warm-grey-200 | #ebebeb |
|
|
48
|
+
| warm-grey-250 | #d6d6d6 |
|
|
49
|
+
| warm-grey-300 | #c2c2c2 |
|
|
50
|
+
| warm-grey-350 | #b3b3b3 |
|
|
51
|
+
| warm-grey-400 | #999999 |
|
|
52
|
+
| warm-grey-450 | #808080 |
|
|
53
|
+
| warm-grey-500 | #666666 |
|
|
54
|
+
| warm-grey-550 | #4d4d4d |
|
|
55
|
+
| warm-grey-600 | #333333 |
|
|
56
|
+
| warm-grey-650 | #242424 |
|
|
57
|
+
| warm-grey-700 | #1a1a1a |
|
|
58
|
+
| cyan | #00f2f2 |
|
|
59
|
+
| lemon | #fff000 |
|
|
60
|
+
| lime | #bced09 |
|
|
61
|
+
| magenta | #fb03ff |
|
|
62
|
+
| rose | #ff68a8 |
|
|
63
|
+
|
|
64
|
+
#### Updated Name
|
|
65
|
+
|
|
66
|
+
| Color value | Old Name | New Name |
|
|
67
|
+
| ------------- | ------------ | ----------- |
|
|
68
|
+
| #9b37f2 | brand-accent | purple-tint |
|
|
69
|
+
|
|
70
|
+
# 2.3.0 (2023-03-22)
|
|
71
|
+
|
|
72
|
+
### Added
|
|
73
|
+
|
|
74
|
+
* Added `timerText`, `timerTextMedium` and `timerTextSmall` utility classes.
|
|
75
|
+
|
|
76
|
+
### Changed
|
|
77
|
+
|
|
78
|
+
* Updated some mobile typography
|
|
79
|
+
|
|
80
|
+
##### Heading styles
|
|
81
|
+
|
|
82
|
+
Typography class | Font size | Line height
|
|
83
|
+
-- | -- | --
|
|
84
|
+
titleBold1 | 60px -> 48px | 68px -> 56px
|
|
85
|
+
titleBold2 | 44px -> 36px | 52px -> 44px
|
|
86
|
+
titleBold3 | 36px -> 30px | 44px -> 36px
|
|
87
|
+
titleBold4 | 32px -> 28px | 38px -> 34px
|
|
88
|
+
|
|
89
|
+
##### Title styles
|
|
90
|
+
|
|
91
|
+
Typography class | Font size | Line height
|
|
92
|
+
-- | -- | -- |
|
|
93
|
+
title1 | 48px -> 36px | 56px -> 44px
|
|
94
|
+
title2 | 36px -> 32px | 44px -> 38px
|
|
95
|
+
title3 | 32px -> 28px | 38px > 34px
|
|
96
|
+
title4 | 28px -> 24px | 34px > 30px
|
|
97
|
+
title5 | 24px -> 20px | 30px -> 24px
|
|
98
|
+
title6 | 20px -> 18px | 24px -> 22px
|
|
99
|
+
|
|
100
|
+
### ⚠ BREAKING CHANGES
|
|
101
|
+
|
|
102
|
+
* Utility classes removed: `disclaimerText` and `caption`. They are now all `captionDisclaimer`.
|
|
103
|
+
|
|
104
|
+
**Note:** The above changes may impact the appearance of the website or application. Please review the changes before updating to this version.
|
|
105
|
+
|
|
106
|
+
Link to the update: - Update typography plugin (#30) 8b34a83
|
|
107
|
+
|
|
108
|
+
# 2.2.1 (2023-01-05)
|
|
109
|
+
|
|
110
|
+
## Bug Fixes
|
|
111
|
+
|
|
112
|
+
* Fixed issues with typography plugin not generating classnames properly when kebab casing was selected.
|
|
113
|
+
|
|
114
|
+
## Additions
|
|
115
|
+
|
|
116
|
+
* Improved test coverage for casing and unit conversion helper functions.
|
|
117
|
+
* Updated documentation.
|
|
118
|
+
|
|
119
|
+
# 2.2.0 (2022-12-07)
|
|
120
|
+
|
|
121
|
+
## Features
|
|
122
|
+
|
|
123
|
+
* 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)
|
|
124
|
+
|
|
125
|
+
# 2.1.0 (2022-11-03)
|
|
126
|
+
|
|
127
|
+
### Features
|
|
128
|
+
|
|
129
|
+
* Optimized icons: Changes made to the svg path for all icons. There is no visual change on the icons.
|
|
130
|
+
* Updated documentation on [how to generate icons from figma](./docs/CONTRIBUTION.md#how-to-generate-icons-from-figma-to-code).
|
|
131
|
+
* Added a way to see the rendered icons.
|
|
132
|
+
|
|
133
|
+
### ⚠ BREAKING CHANGES
|
|
134
|
+
|
|
135
|
+
* Renamed `ico-spiritual-outline.svg` to `spiritual-outline.svg`
|
|
136
|
+
* Renamed `icon-body.svg` to `body.svg`
|
|
137
|
+
* Renamed `icon-career.svg` to `career.svg`
|
|
138
|
+
* Renamed `icon-entrepreneurship.svg` to`entrepreneurship.svg`
|
|
139
|
+
* Renamed `icon-mind.svg` to `mind.svg`
|
|
140
|
+
* Renamed `icon-parenting.svg` to`parenting.svg`
|
|
141
|
+
* Renamed `icon-partner-programs.svg` to `partner-programs.svg`
|
|
142
|
+
* Renamed `icon-relationships.svg` to `relationships.svg`
|
|
143
|
+
* Renamed `icon-soul.svg` to `soul.svg`
|
|
144
|
+
|
|
145
|
+
# 2.0.0 (2022-09-27)
|
|
146
|
+
|
|
147
|
+
### Features
|
|
148
|
+
|
|
149
|
+
* Add Brand accent color `#9b37f2`: This color is only used in the purple gradient.
|
|
150
|
+
* Updated documentation on [how to use gradients](./docs/USAGE.md#gradients).
|
|
151
|
+
* Full list of [colors available as of v2.0.0](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=1213506650).
|
|
152
|
+
|
|
153
|
+
### Fixes
|
|
154
|
+
|
|
155
|
+
* `purple-500` color show correct value of `#ba62fd`
|
|
156
|
+
* 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.
|
|
157
|
+
|
|
158
|
+
### ⚠ BREAKING CHANGES
|
|
159
|
+
|
|
160
|
+
* 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).
|
|
161
|
+
* 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.
|
|
162
|
+
|
|
163
|
+
# 1.3.0 (2022-07-20)
|
|
164
|
+
|
|
165
|
+
### ⚠ BREAKING CHANGES
|
|
166
|
+
|
|
167
|
+
* Renamed all icons with the name `stroke` to `outline`. E.g `activity-stroke` is now `activity-outline`.
|
|
168
|
+
* 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`.
|
|
169
|
+
* Remove white space on icon names. E.g `carret - left-stroke` is now `carret-left-stroke`.
|
|
170
|
+
|
|
171
|
+
See comprehensive list of icon name changes [here](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208).
|
|
172
|
+
|
|
173
|
+
### Features
|
|
174
|
+
|
|
175
|
+
* Category Icons added: see [Category icons on Figma](https://www.figma.com/file/0b2swzflgtIMoELPgj4TVI/MV-Icons?node-id=32%3A3)
|
|
176
|
+
* See list of [icon names](https://docs.google.com/spreadsheets/d/1Iz7WjIbKdv9yFFatmG7AWLm-KrGENyZKM3HxKjp2Gvs/edit#gid=2051315208)
|
|
177
|
+
|
|
178
|
+
# 1.2.0 (2022-07-19)
|
|
179
|
+
|
|
180
|
+
### ⚠ BREAKING CHANGES
|
|
181
|
+
|
|
182
|
+
* 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.
|
|
183
|
+
|
|
184
|
+
* All base colors are now prefixed with a 500. So green is now green-500, orange is now orange-500 etc.
|
|
185
|
+
* Addition of yellow, orange, blue and purple gradients.
|
|
186
|
+
* We no longer have brand blue and brand purple instead use `blue-700` and `purple-600`.
|
|
187
|
+
|
|
188
|
+
See the full list of [colors on figma](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257)
|
|
189
|
+
|
|
190
|
+
# 1.1.0 (2022-07-12)
|
|
191
|
+
|
|
192
|
+
* Removed references to brand.mindvalley.com: The team is no longer updating the online guide and is now working from Figma.
|
|
193
|
+
|
|
194
|
+
# 1.0.0 (2022-07-11)
|
|
195
|
+
|
|
196
|
+
### Bug Fixes
|
|
197
|
+
|
|
198
|
+
* NPM TOKEN: edited readme with releases information [92dc7ee](https://github.com/mindvalley/mv-design-system/commit/92dc7eee8f4078c16ff0ece32deb225e8815f7ac)
|
|
199
|
+
|
|
200
|
+
### Features
|
|
201
|
+
|
|
202
|
+
* Icons: 🏗️ add pregenerated sprite from svgs [dcf133e](https://github.com/mindvalley/mv-design-system/pull/9/commits/dcf133e4009fd269b27fc1e34ae1608ac3b40239)
|
|
203
|
+
* Icons: add svg icons [38d10fa](https://github.com/mindvalley/mv-design-system/pull/9/commits/38d10fa65fa047b5642f47ff8497ad2c8401330b)
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://mvDesignSystem/webpack/universalModuleDefinition","webpack://mvDesignSystem/./src/build/js/colors.js","webpack://mvDesignSystem/webpack/bootstrap","webpack://mvDesignSystem/webpack/runtime/compat get default export","webpack://mvDesignSystem/webpack/runtime/define property getters","webpack://mvDesignSystem/webpack/runtime/hasOwnProperty shorthand","webpack://mvDesignSystem/webpack/runtime/make namespace object"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"mvDesignSystem\"] = factory();\n\telse\n\t\troot[\"mvDesignSystem\"] = factory();\n})(this, () => {\nreturn ","/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://mvDesignSystem/webpack/universalModuleDefinition","webpack://mvDesignSystem/./src/build/js/colors.js","webpack://mvDesignSystem/webpack/bootstrap","webpack://mvDesignSystem/webpack/runtime/compat get default export","webpack://mvDesignSystem/webpack/runtime/define property getters","webpack://mvDesignSystem/webpack/runtime/hasOwnProperty shorthand","webpack://mvDesignSystem/webpack/runtime/make namespace object"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"mvDesignSystem\"] = factory();\n\telse\n\t\troot[\"mvDesignSystem\"] = factory();\n})(this, () => {\nreturn ","/**\n * Do not edit directly\n * Generated on Tue, 19 Sep 2023 05:55:22 GMT\n */\n\nmodule.exports = {\n \"cool-grey-100\": \"#f9f9f9\",\n \"cool-grey-150\": \"#f3f4f6\",\n \"cool-grey-200\": \"#ebedef\",\n \"cool-grey-250\": \"#dfe1e5\",\n \"cool-grey-300\": \"#ced1d7\",\n \"cool-grey-350\": \"#b3b8c1\",\n \"cool-grey-400\": \"#979ca5\",\n \"cool-grey-450\": \"#71767f\",\n \"cool-grey-500\": \"#595e67\",\n \"cool-grey-550\": \"#41464f\",\n \"cool-grey-600\": \"#292d38\",\n \"cool-grey-650\": \"#181d26\",\n \"cool-grey-700\": \"#0f131a\",\n \"purple-50\": \"#f8efff\",\n \"purple-100\": \"#f5e7ff\",\n \"purple-200\": \"#eed8fe\",\n \"purple-300\": \"#e0b8fe\",\n \"purple-400\": \"#d299fe\",\n \"purple-500\": \"#ba62fd\",\n \"purple-600\": \"#7a12d4\",\n \"purple-700\": \"#680fb4\",\n \"purple-800\": \"#4f0c8a\",\n \"purple-900\": \"#37085f\",\n \"green-50\": \"#e8f9f1\",\n \"green-100\": \"#dcf6ea\",\n \"green-200\": \"#c5efdd\",\n \"green-300\": \"#97e3c1\",\n \"green-400\": \"#69d7a6\",\n \"green-500\": \"#18c176\",\n \"green-600\": \"#159f65\",\n \"green-700\": \"#128756\",\n \"green-800\": \"#0e6742\",\n \"green-900\": \"#09482d\",\n \"teal-50\": \"#ebfafb\",\n \"teal-100\": \"#e1f8f9\",\n \"teal-200\": \"#cdf3f5\",\n \"teal-300\": \"#a5eaed\",\n \"teal-400\": \"#7de0e4\",\n \"teal-500\": \"#37d0d6\",\n \"teal-600\": \"#1e9094\",\n \"teal-700\": \"#1a7a7e\",\n \"teal-800\": \"#145e60\",\n \"teal-900\": \"#0e4143\",\n \"blue-50\": \"#ebf5ff\",\n \"blue-100\": \"#e0f0ff\",\n \"blue-200\": \"#cce6ff\",\n \"blue-300\": \"#a3d3ff\",\n \"blue-400\": \"#7abfff\",\n \"blue-500\": \"#329dff\",\n \"blue-600\": \"#005cff\",\n \"blue-700\": \"#1c3bd4\",\n \"blue-800\": \"#1832b4\",\n \"blue-900\": \"#12268a\",\n \"red-50\": \"#feeded\",\n \"red-100\": \"#fde3e3\",\n \"red-200\": \"#fcd1d1\",\n \"red-300\": \"#faacac\",\n \"red-400\": \"#f78787\",\n \"red-500\": \"#f34747\",\n \"red-600\": \"#d8273a\",\n \"red-700\": \"#b82131\",\n \"red-800\": \"#8c1926\",\n \"red-900\": \"#61121a\",\n \"orange-50\": \"#fff4e9\",\n \"orange-100\": \"#ffefdd\",\n \"orange-200\": \"#ffe4c7\",\n \"orange-300\": \"#ffce9a\",\n \"orange-400\": \"#ffb96d\",\n \"orange-500\": \"#ff931f\",\n \"orange-600\": \"#ed6325\",\n \"orange-700\": \"#c9541f\",\n \"orange-800\": \"#9a4018\",\n \"orange-900\": \"#6b2d11\",\n \"yellow-50\": \"#fefae8\",\n \"yellow-100\": \"#fef7dc\",\n \"yellow-200\": \"#fcf1c5\",\n \"yellow-300\": \"#fae797\",\n \"yellow-400\": \"#f8dc69\",\n \"yellow-500\": \"#f5c918\",\n \"yellow-600\": \"#e8ad11\",\n \"yellow-700\": \"#c5930e\",\n \"yellow-800\": \"#97700b\",\n \"yellow-900\": \"#684e08\",\n \"aqua-50\": \"#eaf7ff\",\n \"aqua-100\": \"#dff4ff\",\n \"aqua-200\": \"#caecff\",\n \"aqua-300\": \"#a0ddff\",\n \"aqua-400\": \"#76ceff\",\n \"aqua-500\": \"#2cb3ff\",\n \"aqua-600\": \"#1b9ce6\",\n \"aqua-700\": \"#1785c3\",\n \"aqua-800\": \"#126596\",\n \"aqua-900\": \"#0c4668\",\n \"pink-50\": \"#feeaf3\",\n \"pink-100\": \"#fedfec\",\n \"pink-200\": \"#fdcae0\",\n \"pink-300\": \"#fca0c7\",\n \"pink-400\": \"#fa76af\",\n \"pink-500\": \"#f72c84\",\n \"pink-600\": \"#df1a6f\",\n \"pink-700\": \"#be165e\",\n \"pink-800\": \"#911148\",\n \"pink-900\": \"#640c32\",\n \"purple-500-90a\": \"rgba(186, 98, 253, 0.9)\",\n \"purple-500-20a\": \"rgba(186, 98, 253, 0.2)\",\n \"purple-600-10a\": \"rgba(122, 18, 212, 0.1)\",\n \"black-30a\": \"rgba(0, 0, 0, 0.3)\",\n \"black-20a\": \"rgba(0, 0, 0, 0.2)\",\n \"black-10a\": \"rgba(0, 0, 0, 0.1)\",\n \"white-90a\": \"rgba(255, 255, 255, 0.9)\",\n \"white-30a\": \"rgba(255, 255, 255, 0.3)\",\n \"white-10a\": \"rgba(255, 255, 255, 0.1)\",\n \"purple-tint\": \"#9b37f2\",\n \"black\": \"#000000\",\n \"white\": \"#ffffff\"\n};\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["root","factory","exports","module","define","amd","this","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value"],"sourceRoot":""}
|
package/docs/USAGE.md
CHANGED
|
@@ -155,8 +155,9 @@ Let's say that you are trying to codify a button from a Figma design, and you wa
|
|
|
155
155
|
|
|
156
156
|
*Note that*
|
|
157
157
|
|
|
158
|
-
- The typography plugin by default, generates Kebab cased class names,
|
|
159
|
-
|
|
158
|
+
- The typography plugin by default, generates Kebab cased class names, such as `title-bold-1`. However, you can customize the class name casing by passing a `casing` option to the plugin. Supported casing options include `snakeCase`, `camelCase`, and `pascalCase.`
|
|
159
|
+
|
|
160
|
+
Usage:
|
|
160
161
|
|
|
161
162
|
```js
|
|
162
163
|
module.exports = {
|
|
@@ -168,32 +169,93 @@ Supported casing options are `snakeCase`, `camelCase`, and `pascalCase`
|
|
|
168
169
|
}
|
|
169
170
|
```
|
|
170
171
|
|
|
171
|
-
|
|
172
|
+
Output:
|
|
173
|
+
When using `pascalCase`, the generated CSS class will look like this:
|
|
174
|
+
|
|
175
|
+
```css
|
|
176
|
+
.TitleBold8 {
|
|
177
|
+
...
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
- The resulting typography classes are responsive for two screen sizes: desktop and mobile/tablet.
|
|
172
183
|
|
|
173
|
-
|
|
174
|
-
|
|
184
|
+
##### Best Practices
|
|
185
|
+
|
|
186
|
+
###### Don't Do
|
|
187
|
+
|
|
188
|
+
```html
|
|
189
|
+
<h1 class="title-bold-5 md:title-bold-3">Hello World!</h1>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
###### Do
|
|
193
|
+
|
|
194
|
+
```html
|
|
195
|
+
<h1 class="title-bold-5">Hello World!</h1>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Since the typography classes are responsive, you don't need to add media queries to the CSS classes. For example, the `title-bold-5` class includes media queries for both desktop and mobile/tablet, so there's no need to add custom media queries in the markup. Here's an example of the CSS for `title-bold-5`:
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
```css
|
|
202
|
+
.title-bold-5 {
|
|
203
|
+
font-family: 'Sharp Grotesk Semibold 21', 'Helvetica', 'Arial', 'sans-serif';
|
|
204
|
+
font-size: 1.5rem;
|
|
205
|
+
letter-spacing: 0rem;
|
|
206
|
+
line-height: 1.875rem;
|
|
207
|
+
}
|
|
208
|
+
/* configured-breakpoint value is the value of the breakpoint identifier you pass in the plugin configuration. */
|
|
209
|
+
@media (min-width: <configured-breakpoint>) {
|
|
210
|
+
.title-bold-5 {
|
|
211
|
+
font-size: 1.75rem;
|
|
212
|
+
line-height: 2.125rem;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
#### Configuring the breakpoint
|
|
218
|
+
By default, the plugin uses the `lg` breakpoint from the [screen size configuration](https://tailwindcss.com/docs/screens) in your Tailwind configuration. If you have a different configuration or naming convention for your Tailwind breakpoints, you can specify the identifier of the desired breakpoint using the `breakingPoint` option in the plugin configuration.
|
|
175
219
|
|
|
176
220
|
For example, let's say you have a custom tailwind configuration that uses a different naming convention.
|
|
177
|
-
You'll need to make the plugin aware of the breakingPoint boundary between the desktop and mobile. To this, you can pass the `breakingPoint` option to the plugin and pass the key of the desired breakingPoint as defined in your configuration.
|
|
221
|
+
You'll need to make the plugin aware of the `breakingPoint` boundary between the desktop and mobile/tablet. To this, you can pass the `breakingPoint` option to the plugin and pass the key of the desired `breakingPoint` as defined in your configuration.
|
|
178
222
|
|
|
179
223
|
```js
|
|
180
224
|
module.exports = {
|
|
181
225
|
...
|
|
182
226
|
theme: {
|
|
183
227
|
screens: {
|
|
184
|
-
'
|
|
228
|
+
'mobile': '480px',
|
|
229
|
+
'tablet': '992px',
|
|
185
230
|
'laptop': '1024px',
|
|
186
231
|
'desktop': '1280px',
|
|
187
232
|
}
|
|
188
233
|
}
|
|
189
234
|
plugins: [
|
|
190
235
|
/* Passing the identifier of the screen size to use as the breakingPoint */
|
|
191
|
-
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ breakingPoint: '
|
|
236
|
+
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ breakingPoint: 'tablet'}),
|
|
192
237
|
],
|
|
193
238
|
...
|
|
194
239
|
}
|
|
195
240
|
```
|
|
196
241
|
|
|
242
|
+
Expected Output:
|
|
243
|
+
|
|
244
|
+
```css
|
|
245
|
+
.title-bold-5 {
|
|
246
|
+
font-family: 'Sharp Grotesk Semibold 21', 'Helvetica', 'Arial', 'sans-serif';
|
|
247
|
+
font-size: 1.5rem;
|
|
248
|
+
letter-spacing: 0rem;
|
|
249
|
+
line-height: 1.875rem;
|
|
250
|
+
}
|
|
251
|
+
@media (min-width: 992px) {
|
|
252
|
+
.title-bold-5 {
|
|
253
|
+
font-size: 1.75rem;
|
|
254
|
+
line-height: 2.125rem;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
197
259
|
4. Find the name to use by inspecting the selected text on the Figma design file.
|
|
198
260
|
|
|
199
261
|
<img src="getting-class-name.png" width="1000" height="auto">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mindvalley/design-system",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -21,13 +21,14 @@
|
|
|
21
21
|
"main": "dist/index.js",
|
|
22
22
|
"files": [
|
|
23
23
|
"dist",
|
|
24
|
-
"docs"
|
|
24
|
+
"docs",
|
|
25
|
+
"CHANGELOG.md"
|
|
25
26
|
],
|
|
26
27
|
"scripts": {
|
|
27
28
|
"build": "npm run test && npm run styledictonary:build && webpack --mode production",
|
|
28
29
|
"commit": "cz",
|
|
29
30
|
"commitmsg": "validate-commit-msg",
|
|
30
|
-
"semantic-release": "semantic-release --
|
|
31
|
+
"semantic-release": "semantic-release --debug",
|
|
31
32
|
"styledictonary:build": "node ./build.js",
|
|
32
33
|
"test": "jest --verbose",
|
|
33
34
|
"watch": "webpack --mode development --watch"
|
|
@@ -76,13 +77,13 @@
|
|
|
76
77
|
"cz-conventional-changelog-with-jiraid-detection": "^1.0.4",
|
|
77
78
|
"husky": "^6.0.0",
|
|
78
79
|
"jest": "^26.6.3",
|
|
79
|
-
"plugin": "^0.
|
|
80
|
+
"plugin": "^0.0.15",
|
|
80
81
|
"semantic-release": "^21.0.7",
|
|
81
|
-
"semantic-release-github-pullrequest": "
|
|
82
|
+
"semantic-release-github-pullrequest": "github:njausteve/semantic-release-github-pullrequest",
|
|
82
83
|
"semantic-release-unsquash": "^0.1.2",
|
|
83
84
|
"style-dictionary": "^3.8.0",
|
|
84
85
|
"tinycolor2": "^1.6.0",
|
|
85
|
-
"validate-commit-msg": "^
|
|
86
|
+
"validate-commit-msg": "^1.1.3",
|
|
86
87
|
"webpack": "^5.88.2",
|
|
87
88
|
"webpack-cli": "^4.6.0"
|
|
88
89
|
},
|