@mindvalley/design-system 3.0.2 → 3.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 +27 -1
- package/dist/helpers/dimens.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/tailwind/plugins/typography.js +1 -1
- package/docs/USAGE.md +9 -2
- package/package.json +7 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,34 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
All notable changes to this project will be documented in this file.
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
# [3.1.0](https://github.com/mindvalley/mv-design-system/compare/v3.0.3...v3.1.0) (2023-11-09)
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
* Add display 1 and display 2 typography ([abe73ae](https://github.com/mindvalley/mv-design-system/commit/abe73aef47d8bdc0af0bcfc1dcce173a4750531d))
|
|
10
|
+
|
|
11
|
+
# Changelog
|
|
12
|
+
|
|
13
|
+
All notable changes to this project will be documented in this file.
|
|
5
14
|
|
|
15
|
+
## [3.0.3](https://github.com/mindvalley/mv-design-system/compare/v3.0.2...v3.0.3) (2023-11-09)
|
|
16
|
+
|
|
17
|
+
### Documentation
|
|
18
|
+
|
|
19
|
+
* Add documentation listing descriptions and example returns for custom transforms
|
|
20
|
+
|
|
21
|
+
### Code Refactoring
|
|
22
|
+
|
|
23
|
+
* Replace typography plugin with refactored rewrite (0603ec5)
|
|
24
|
+
* Refactor function for processing typography to remove redundant logic (cb89d3b)
|
|
25
|
+
|
|
26
|
+
### Builds
|
|
27
|
+
|
|
28
|
+
* Replace hardcoded typography list in typography plugin with transformed assets from supernova (482a662, plugins)
|
|
29
|
+
* Introduce transformations to typography asset (bdef462, utilities)
|
|
30
|
+
|
|
31
|
+
## [3.0.2](https://github.com/mindvalley/mv-design-system/compare/v3.0.1...v3.0.2) (2023-09-19)
|
|
6
32
|
|
|
7
33
|
### Bug Fixes
|
|
8
34
|
|
package/dist/helpers/dimens.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function strPxToRemStr(r,
|
|
1
|
+
function strPxToRemStr(e,{baseFontSize:r=16,decimalPlaces:t=0}={}){return(Number(e.replace(/px/g,""))/r).toFixed(t)+"rem"}module.exports={strPxToRemStr};
|
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 Thu, 09 Nov 2023 08:11:28 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":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const plugin=require("tailwindcss/plugin"),{CASINGS,toKebabCase,toSnakeCase,toCamelCase,toPascalCase}=require("../../helpers/casing"),{strPxToRemStr}=require("../../helpers/dimens"),
|
|
1
|
+
const plugin=require("tailwindcss/plugin"),{CASINGS,toKebabCase,toSnakeCase,toCamelCase,toPascalCase}=require("../../helpers/casing"),{strPxToRemStr}=require("../../helpers/dimens"),typography=require("../../build/js/typography.js"),fallbackFonts="'Helvetica', 'Arial', 'sans-serif'",fontFamilyMapping={"Sharp Grotesk Cyr Semibold":`Sharp Grotesk Semibold 21, ${fallbackFonts}`,"Sharp Grotesk Cyr Medium":`Sharp Grotesk Medium 20, ${fallbackFonts}`,"Sharp Grotesk Cyr Book":`Sharp Grotesk Book 19, ${fallbackFonts}`},typographyPlugin=({casing:e=CASINGS.kebabCase,breakingPoint:a="lg"}={})=>function(){const t=theme("screens",{}),s=convertObjectKeysToCasedClassNames({...processTypography(typography,t[a])},e);addComponents(s)};function processTypography(e,a){const t={};for(const s of Object.keys(e)){const o=toCamelCase(s.replace(/-desktop|-mobile/g,"")),r=s.includes("-desktop"),n=s.includes("-mobile"),i=replaceFontFamily(e[s]);t[o]=r?{...t[o],[`@media (min-width: ${a})`]:{...i}}:n?{...i,...t[o]}:i}return t}function replaceFontFamily(e){return e.fontFamily&&fontFamilyMapping[e.fontFamily]?{...e,fontFamily:fontFamilyMapping[e.fontFamily]}:e}function convertObjectKeysToCasedClassNames(e,a=CASINGS.kebabCase){const t=e=>{let a={};return Object.keys(e).forEach((s=>{["fontSize","letterSpacing","lineHeight"].includes(s)?a[s]=strPxToRemStr(e[s],{decimalPlaces:2}):"object"==typeof e[s]?a[s]=t(e[s]):a[s]=e[s]})),a};return mapObj(e,(e=>{switch(a){case CASINGS.snakeCase:return"."+toSnakeCase(e);case CASINGS.camelCase:return"."+toCamelCase(e);case CASINGS.pascalCase:return"."+toPascalCase(e);case CASINGS.kebabCase:return"."+toKebabCase(e);default:return console.error(`${a} is currently not supported in this function, reverting to default ${CASINGS.kebabCase}. Please raise an issue ticket here[https://github.com/mindvalley/mv-design-system]`),"."+toKebabCase(e)}}),t)}function mapObj(e,a,t){return Object.entries(e).reduce(((e,[s,o])=>({...e,[a(s)]:t(o)})),{})}module.exports=plugin.withOptions(typographyPlugin);
|
package/docs/USAGE.md
CHANGED
|
@@ -151,6 +151,13 @@ Let's say that you are trying to codify a button from a Figma design, and you wa
|
|
|
151
151
|
font-display: swap;
|
|
152
152
|
src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
|
|
153
153
|
}
|
|
154
|
+
|
|
155
|
+
@font-face {
|
|
156
|
+
font-family: "Sharp Grotesk Cyr Bold";
|
|
157
|
+
font-weight: 700;
|
|
158
|
+
font-display: swap;
|
|
159
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/d0e0425c-3c29-4d67-b4d6-77567bec96ba.woff2") format("woff2");
|
|
160
|
+
}
|
|
154
161
|
```
|
|
155
162
|
|
|
156
163
|
*Note that*
|
|
@@ -169,7 +176,7 @@ Usage:
|
|
|
169
176
|
}
|
|
170
177
|
```
|
|
171
178
|
|
|
172
|
-
Output:
|
|
179
|
+
Output:
|
|
173
180
|
When using `pascalCase`, the generated CSS class will look like this:
|
|
174
181
|
|
|
175
182
|
```css
|
|
@@ -197,7 +204,6 @@ Usage:
|
|
|
197
204
|
|
|
198
205
|
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
206
|
|
|
200
|
-
|
|
201
207
|
```css
|
|
202
208
|
.title-bold-5 {
|
|
203
209
|
font-family: 'Sharp Grotesk Semibold 21', 'Helvetica', 'Arial', 'sans-serif';
|
|
@@ -215,6 +221,7 @@ Since the typography classes are responsive, you don't need to add media queries
|
|
|
215
221
|
```
|
|
216
222
|
|
|
217
223
|
#### Configuring the breakpoint
|
|
224
|
+
|
|
218
225
|
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.
|
|
219
226
|
|
|
220
227
|
For example, let's say you have a custom tailwind configuration that uses a different naming convention.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mindvalley/design-system",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -27,55 +27,32 @@
|
|
|
27
27
|
"scripts": {
|
|
28
28
|
"build": "npm run test && npm run styledictonary:build && webpack --mode production",
|
|
29
29
|
"commit": "cz",
|
|
30
|
-
"commitmsg": "validate-commit-msg",
|
|
31
30
|
"semantic-release": "semantic-release --debug",
|
|
32
31
|
"styledictonary:build": "node ./build.js",
|
|
33
32
|
"test": "jest --verbose",
|
|
34
|
-
"watch": "webpack --mode development --watch"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"hooks": {
|
|
38
|
-
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
|
|
39
|
-
"commitmsg": "commitlint -e $GIT_PARAMS"
|
|
40
|
-
}
|
|
33
|
+
"watch": "webpack --mode development --watch",
|
|
34
|
+
"prepare": "husky install",
|
|
35
|
+
"commitlint": "commitlint --edit"
|
|
41
36
|
},
|
|
42
37
|
"config": {
|
|
43
38
|
"commitizen": {
|
|
44
39
|
"path": "./node_modules/cz-conventional-changelog-with-jiraid-detection",
|
|
45
40
|
"disableScopeLowerCase": true,
|
|
46
41
|
"disableSubjectLowerCase": true
|
|
47
|
-
},
|
|
48
|
-
"validate-commit-msg": {
|
|
49
|
-
"types": [
|
|
50
|
-
"feat",
|
|
51
|
-
"fix",
|
|
52
|
-
"docs",
|
|
53
|
-
"style",
|
|
54
|
-
"refactor",
|
|
55
|
-
"build",
|
|
56
|
-
"ci",
|
|
57
|
-
"perf",
|
|
58
|
-
"test",
|
|
59
|
-
"chore",
|
|
60
|
-
"revert"
|
|
61
|
-
],
|
|
62
|
-
"warnOnFail": false,
|
|
63
|
-
"maxSubjectLength": 100,
|
|
64
|
-
"subjectPattern": "^[A-Z]+-[0-9]+ - .*",
|
|
65
|
-
"subjectPatternErrorMsg": "Subject must be in format 'CMS-123 - Commit message'",
|
|
66
|
-
"helpMessage": ""
|
|
67
42
|
}
|
|
68
43
|
},
|
|
69
44
|
"devDependencies": {
|
|
70
45
|
"@babel/core": "^7.22.9",
|
|
71
46
|
"@babel/preset-env": "^7.22.9",
|
|
47
|
+
"@commitlint/cli": "^17.7.1",
|
|
48
|
+
"@commitlint/config-conventional": "^17.7.0",
|
|
72
49
|
"@semantic-release/changelog": "^6.0.3",
|
|
73
50
|
"babel-jest": "^26.6.3",
|
|
74
51
|
"babel-loader": "^8.2.2",
|
|
75
52
|
"commitizen": "^4.3.0",
|
|
76
53
|
"copy-webpack-plugin": "^11.0.0",
|
|
77
54
|
"cz-conventional-changelog-with-jiraid-detection": "^1.0.4",
|
|
78
|
-
"husky": "^
|
|
55
|
+
"husky": "^8.0.3",
|
|
79
56
|
"jest": "^26.6.3",
|
|
80
57
|
"plugin": "^0.0.15",
|
|
81
58
|
"semantic-release": "^21.0.7",
|
|
@@ -83,7 +60,6 @@
|
|
|
83
60
|
"semantic-release-unsquash": "^0.1.2",
|
|
84
61
|
"style-dictionary": "^3.8.0",
|
|
85
62
|
"tinycolor2": "^1.6.0",
|
|
86
|
-
"validate-commit-msg": "^1.1.3",
|
|
87
63
|
"webpack": "^5.88.2",
|
|
88
64
|
"webpack-cli": "^4.6.0"
|
|
89
65
|
},
|