@mindvalley/design-system 3.3.3 → 3.3.4
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 +8 -5
- package/README.md +6 -0
- package/dist/b2b.js +1 -1
- package/dist/b2b.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/docs/CONTRIBUTION.md +95 -72
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
All notable changes to this project will be documented in this file.
|
|
3
3
|
|
|
4
|
+
## [3.3.4](https://github.com/mindvalley/mv-design-system/compare/v3.3.3...v3.3.4) (2025-06-26)
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
* Updated styles and tokens ([#127](https://github.com/mindvalley/mv-design-system/issues/127)) ([374745a](https://github.com/mindvalley/mv-design-system/commit/374745aa781174ecfd359b0d796b7b491d1caaac))
|
|
10
|
+
|
|
4
11
|
## [3.3.3](https://github.com/mindvalley/mv-design-system/compare/v3.3.2...v3.3.3) (2025-03-26)
|
|
5
12
|
|
|
6
13
|
|
|
@@ -9,14 +16,10 @@ All notable changes to this project will be documented in this file.
|
|
|
9
16
|
* Added new SVG icons for UI components for b2b and mindvalley core ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
10
17
|
* Cleaned up and optimized SVG sprites for better performance and added new icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
11
18
|
* Optimizes and cleaned up SVG icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
12
|
-
* Removed white
|
|
19
|
+
* Removed white fill on facebook icon ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
13
20
|
* Updated broken unmute icons ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
14
21
|
* Updated mindvalley audio SVG icons for consistency ([73f27dd](https://github.com/mindvalley/mv-design-system/commit/73f27dd952fde8007c8507ba69e2fb8769bfbfff))
|
|
15
22
|
|
|
16
|
-
# Changelog
|
|
17
|
-
|
|
18
|
-
All notable changes to this project will be documented in this file.
|
|
19
|
-
|
|
20
23
|
## [3.3.2](https://github.com/mindvalley/mv-design-system/compare/v3.3.1...v3.3.2) (2025-02-05)
|
|
21
24
|
|
|
22
25
|
### Updates
|
package/README.md
CHANGED
|
@@ -15,6 +15,7 @@ The design system has the Mindvalley Design Language as its foundation.
|
|
|
15
15
|
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.
|
|
16
16
|
|
|
17
17
|
#### Getting started
|
|
18
|
+
|
|
18
19
|
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:
|
|
19
20
|
|
|
20
21
|
1. The [usage guide](docs/USAGE.md), if you want to start using the design system in your project/repo.
|
|
@@ -28,19 +29,24 @@ In the case you don't have access to mentioned figma design system, you can reac
|
|
|
28
29
|
and access will be granted.
|
|
29
30
|
|
|
30
31
|
#### :books: Usage
|
|
32
|
+
|
|
31
33
|
See the comprehensive [usage guide](docs/USAGE.md).
|
|
32
34
|
|
|
33
35
|
#### 🙌 Contributing
|
|
36
|
+
|
|
34
37
|
Read about the development process in the [contribution guide](docs/CONTRIBUTION.md).
|
|
35
38
|
|
|
36
39
|
#### 🚀 Releasing and publishing changes
|
|
40
|
+
|
|
37
41
|
You can find docs about our release process in the [release guide](docs/RELEASING.md).
|
|
38
42
|
|
|
39
43
|
#### ⚙️ Support
|
|
44
|
+
|
|
40
45
|
* All browsers
|
|
41
46
|
* Server-side rendering
|
|
42
47
|
|
|
43
48
|
####
|
|
49
|
+
|
|
44
50
|
## 🤷🏽♂️ Need Help?
|
|
45
51
|
|
|
46
52
|
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.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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={750:e=>{e.exports={"
|
|
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={750:e=>{e.exports={"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","red-18a":"rgba(255, 109, 92, 0.18)","red-12a":"rgba(255, 109, 92, 0.12)","red-8a":"rgba(255, 109, 92, 0.08)","red-4a":"rgba(255, 109, 92, 0.04)","brown-90a":"rgba(249, 248, 244, 0.9)","red-28a":"rgba(255, 109, 92, 0.28)","dark-brown-12a":"rgba(135, 121, 111, 0.12)","dark-brown-80a":"rgba(135, 121, 111, 0.8)","brown-24a":"rgba(249, 248, 244, 0.24)","brown-12a":"rgba(249, 248, 244, 0.12)","brown-8a":"rgba(249, 248, 244, 0.08)","dark-brown-24a":"rgba(135, 121, 111, 0.24)","dark-brown-8a":"rgba(135, 121, 111, 0.08)","dark-brown-4a":"rgba(135, 121, 111, 0.04)","red-70a":"rgba(255, 109, 92, 0.7)","purple-70a":"rgba(158, 148, 241, 0.7)","purple-28a":"rgba(158, 148, 241, 0.28)","purple-18a":"rgba(158, 148, 241, 0.18)","purple-12a":"rgba(158, 148, 241, 0.12)","purple-8a":"rgba(158, 148, 241, 0.08)","purple-4a":"rgba(158, 148, 241, 0.04)","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","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","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"}}},r={};function a(b){var o=r[b];if(void 0!==o)return o.exports;var f=r[b]={exports:{}};return e[b](f,f.exports,a),f.exports}a.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return a.d(r,{a:r}),r},a.d=(e,r)=>{for(var b in r)a.o(r,b)&&!a.o(e,b)&&Object.defineProperty(e,b,{enumerable:!0,get:r[b]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var b={};return(()=>{"use strict";a.r(b),a.d(b,{colors:()=>e});var e=a(750)})(),b})()));
|
|
2
2
|
//# sourceMappingURL=b2b.js.map
|
package/dist/b2b.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b2b.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAwB,eAAID,IAE5BD,EAAqB,eAAIC,GAC1B,CATD,CASGK,MAAM,I,qBCJTH,EAAOD,QAAU,CACf,
|
|
1
|
+
{"version":3,"file":"b2b.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIH,GACe,iBAAZC,QACdA,QAAwB,eAAID,IAE5BD,EAAqB,eAAIC,GAC1B,CATD,CASGK,MAAM,I,qBCJTH,EAAOD,QAAU,CACf,SAAU,UACV,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,UAAW,UACX,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,UAAW,2BACX,UAAW,2BACX,SAAU,2BACV,SAAU,2BACV,YAAa,2BACb,UAAW,2BACX,iBAAkB,4BAClB,iBAAkB,2BAClB,YAAa,4BACb,YAAa,4BACb,WAAY,4BACZ,iBAAkB,4BAClB,gBAAiB,4BACjB,gBAAiB,4BACjB,UAAW,0BACX,aAAc,2BACd,aAAc,4BACd,aAAc,4BACd,aAAc,4BACd,YAAa,4BACb,YAAa,4BACb,WAAY,UACZ,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,YAAa,UACb,UAAW,UACX,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,WAAY,UACZ,YAAa,UACb,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,UACd,aAAc,U,GC3EZK,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaR,QAGrB,IAAIC,EAASI,EAAyBE,GAAY,CAGjDP,QAAS,CAAC,GAOX,OAHAU,EAAoBH,GAAUN,EAAQA,EAAOD,QAASM,GAG/CL,EAAOD,OACf,CCrBAM,EAAoBK,EAAKV,IACxB,IAAIW,EAASX,GAAUA,EAAOY,WAC7B,IAAOZ,EAAiB,QACxB,IAAM,EAEP,OADAK,EAAoBQ,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,CAAM,ECLdN,EAAoBQ,EAAI,CAACd,EAASgB,KACjC,IAAI,IAAIC,KAAOD,EACXV,EAAoBY,EAAEF,EAAYC,KAASX,EAAoBY,EAAElB,EAASiB,IAC5EE,OAAOC,eAAepB,EAASiB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDX,EAAoBY,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFlB,EAAoBsB,EAAK5B,IACH,oBAAX6B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAepB,EAAS6B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAepB,EAAS,aAAc,CAAE+B,OAAO,GAAO,E","sources":["webpack://mvDesignSystem/webpack/universalModuleDefinition","webpack://mvDesignSystem/./src/build/js/b2b/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, 26 Jun 2025 10:26:29 GMT\n */\n\nmodule.exports = {\n \"red-50\": \"#fff2f1\",\n \"red-100\": \"#ffe4e2\",\n \"red-200\": \"#ffada7\",\n \"red-300\": \"#ff8d82\",\n \"red-400\": \"#ff6d5c\",\n \"red-500\": \"#e85546\",\n \"red-600\": \"#d03c2f\",\n \"red-700\": \"#a83126\",\n \"red-800\": \"#782b24\",\n \"red-900\": \"#41120e\",\n \"teal-50\": \"#f1fcfb\",\n \"teal-100\": \"#d1f6f3\",\n \"teal-200\": \"#a3ece8\",\n \"teal-300\": \"#6ddbda\",\n \"teal-400\": \"#3cbcbe\",\n \"teal-500\": \"#25a4a7\",\n \"teal-600\": \"#1b8186\",\n \"teal-700\": \"#1a6367\",\n \"teal-800\": \"#194448\",\n \"teal-900\": \"#09252a\",\n \"red-18a\": \"rgba(255, 109, 92, 0.18)\",\n \"red-12a\": \"rgba(255, 109, 92, 0.12)\",\n \"red-8a\": \"rgba(255, 109, 92, 0.08)\",\n \"red-4a\": \"rgba(255, 109, 92, 0.04)\",\n \"brown-90a\": \"rgba(249, 248, 244, 0.9)\",\n \"red-28a\": \"rgba(255, 109, 92, 0.28)\",\n \"dark-brown-12a\": \"rgba(135, 121, 111, 0.12)\",\n \"dark-brown-80a\": \"rgba(135, 121, 111, 0.8)\",\n \"brown-24a\": \"rgba(249, 248, 244, 0.24)\",\n \"brown-12a\": \"rgba(249, 248, 244, 0.12)\",\n \"brown-8a\": \"rgba(249, 248, 244, 0.08)\",\n \"dark-brown-24a\": \"rgba(135, 121, 111, 0.24)\",\n \"dark-brown-8a\": \"rgba(135, 121, 111, 0.08)\",\n \"dark-brown-4a\": \"rgba(135, 121, 111, 0.04)\",\n \"red-70a\": \"rgba(255, 109, 92, 0.7)\",\n \"purple-70a\": \"rgba(158, 148, 241, 0.7)\",\n \"purple-28a\": \"rgba(158, 148, 241, 0.28)\",\n \"purple-18a\": \"rgba(158, 148, 241, 0.18)\",\n \"purple-12a\": \"rgba(158, 148, 241, 0.12)\",\n \"purple-8a\": \"rgba(158, 148, 241, 0.08)\",\n \"purple-4a\": \"rgba(158, 148, 241, 0.04)\",\n \"brown-50\": \"#f9f8f4\",\n \"brown-100\": \"#f3efe9\",\n \"brown-200\": \"#ede6de\",\n \"brown-300\": \"#d4c5ba\",\n \"brown-400\": \"#ae9f95\",\n \"brown-500\": \"#87796f\",\n \"brown-600\": \"#6f635c\",\n \"brown-700\": \"#574e48\",\n \"brown-800\": \"#3f3835\",\n \"brown-900\": \"#272221\",\n \"blue-50\": \"#f0f6fe\",\n \"blue-100\": \"#dce9fd\",\n \"blue-200\": \"#c2dafb\",\n \"blue-300\": \"#98c3f8\",\n \"blue-400\": \"#67a3f3\",\n \"blue-500\": \"#4380ee\",\n \"blue-600\": \"#3165e3\",\n \"blue-700\": \"#204bb4\",\n \"blue-800\": \"#192e75\",\n \"blue-900\": \"#121f54\",\n \"purple-50\": \"#f5f4fe\",\n \"purple-100\": \"#ecebfc\",\n \"purple-200\": \"#dad9fb\",\n \"purple-300\": \"#bfbbf7\",\n \"purple-400\": \"#9e94f1\",\n \"purple-500\": \"#7e68ea\",\n \"purple-600\": \"#664bdd\",\n \"purple-700\": \"#4d2dab\",\n \"purple-800\": \"#40268c\",\n \"purple-900\": \"#26175e\"\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/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/mindvalley/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/mindvalley/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, 26 Jun 2025 10:26:29 GMT\n */\n\nmodule.exports = {\n \"black-18a\": \"rgba(0, 0, 0, 0.18)\",\n \"black-8a\": \"rgba(0, 0, 0, 0.08)\",\n \"black-70a\": \"rgba(0, 0, 0, 0.7)\",\n \"black-12a\": \"rgba(0, 0, 0, 0.12)\",\n \"black-6a\": \"rgba(0, 0, 0, 0.06)\",\n \"black-4a\": \"rgba(0, 0, 0, 0.04)\",\n \"black-40a\": \"rgba(0, 0, 0, 0.4)\",\n \"black-90a\": \"rgba(0, 0, 0, 0.9)\",\n \"black-80a\": \"rgba(0, 0, 0, 0.8)\",\n \"black-60a\": \"rgba(0, 0, 0, 0.6)\",\n \"black-50a\": \"rgba(0, 0, 0, 0.5)\",\n \"black-24a\": \"rgba(0, 0, 0, 0.24)\",\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 \"white-90a\": \"rgba(255, 255, 255, 0.9)\",\n \"white-24a\": \"rgba(255, 255, 255, 0.24)\",\n \"white-12a\": \"rgba(255, 255, 255, 0.12)\",\n \"white-70a\": \"rgba(255, 255, 255, 0.7)\",\n \"white-18a\": \"rgba(255, 255, 255, 0.18)\",\n \"white-8a\": \"rgba(255, 255, 255, 0.08)\",\n \"white-80a\": \"rgba(255, 255, 255, 0.8)\",\n \"white-60a\": \"rgba(255, 255, 255, 0.6)\",\n \"white-50a\": \"rgba(255, 255, 255, 0.5)\",\n \"white-40a\": \"rgba(255, 255, 255, 0.4)\",\n \"white-6a\": \"rgba(255, 255, 255, 0.06)\",\n \"white-4a\": \"rgba(255, 255, 255, 0.04)\",\n \"purple-tint\": \"#9b37f2\",\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 \"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 \"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 \"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 \"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 \"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 \"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 \"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 \"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 \"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 \"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/CONTRIBUTION.md
CHANGED
|
@@ -7,114 +7,138 @@ Before you get your hands dirty, let's first understand how the repo works and i
|
|
|
7
7
|
|
|
8
8
|
#### 🏭 Token transformation process
|
|
9
9
|
|
|
10
|
-
Token transformation on a high level involves the
|
|
10
|
+
Token transformation on a high level involves the following steps:
|
|
11
|
+
|
|
12
|
+
```mermaid
|
|
13
|
+
sequenceDiagram
|
|
14
|
+
participant Figma
|
|
15
|
+
participant Supernova
|
|
16
|
+
participant Tokens as src/tokens/brands
|
|
17
|
+
participant SD as style-dictionary build
|
|
18
|
+
participant JS as src/build/js & src/tailwind/plugins/tokens
|
|
19
|
+
participant Webpack
|
|
20
|
+
participant Dist as dist
|
|
21
|
+
participant NPM as Publish (NPM)
|
|
22
|
+
|
|
23
|
+
Figma->>Supernova: Designer publishes changes
|
|
24
|
+
Supernova->>Tokens: Supernova raises PR to update tokens
|
|
25
|
+
Tokens->>SD: style-dictionary parses & transforms
|
|
26
|
+
SD->>JS: Outputs JS modules (colors, typography)
|
|
27
|
+
JS->>Webpack: Bundling for distribution
|
|
28
|
+
Webpack->>Dist: Outputs bundled files
|
|
29
|
+
Dist->>NPM: CI publishes package
|
|
30
|
+
```
|
|
11
31
|
|
|
12
32
|
|
|
13
33
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
This is the starting point of the design token transformation process. This step is how the design tokens get into the repo. For example, If there are changes in the Figma design system to the value of a color, then this would be where we would need to update the token. For simplicity, it is just a directory with some design tokens in a JSON file. More details in the [`src/properties`](#srcproperties) directory documentation.
|
|
34
|
+
**1. The design tokens**
|
|
35
|
+
This is the starting point of the design token transformation process. When there are changes in the Figma design system (such as a color update), an automated workflow powered by Supernova detects these changes and creates a pull request in the repository to update the relevant token files in `src/tokens/brands/{brand}/` (e.g., `src/tokens/brands/mindvalley/colors.json`). This ensures that the tokens in the codebase stay in sync with the design system, reducing manual effort and the risk of inconsistencies.
|
|
17
36
|
|
|
18
|
-
|
|
37
|
+
**2. Parsing and transformation**
|
|
38
|
+
Using [style-dictionary](https://styledictionary.com/getting-started/), the design tokens are parsed, merged, and transformed into the desired formats. The main outputs are JavaScript modules for colors and typography, but the output is configurable and can be extended to other formats (CSS, SCSS, etc.) in the future.
|
|
39
|
+
Run:
|
|
19
40
|
|
|
20
|
-
|
|
21
|
-
The output of this step ends up in the [`src/build/`](#srcbuild) directory.
|
|
22
|
-
Parsing and transformation can be triggered by running:
|
|
23
|
-
|
|
24
|
-
```
|
|
41
|
+
```bash
|
|
25
42
|
npm run build:styledictionary
|
|
26
43
|
```
|
|
27
44
|
|
|
28
|
-
|
|
45
|
+
**3. Bundling**
|
|
46
|
+
Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resultant files work across browser and server environments. The files from the previous step are bundled and output to the `dist/` directory, which is not checked in for versioning.
|
|
47
|
+
Run:
|
|
29
48
|
|
|
30
|
-
|
|
31
|
-
Bundling can be invoked by running:
|
|
32
|
-
|
|
33
|
-
```
|
|
49
|
+
```bash
|
|
34
50
|
npm run build
|
|
35
51
|
```
|
|
36
52
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
The end package is published to NPM where it can be installed from.
|
|
53
|
+
**4. Publishing**
|
|
54
|
+
The last step is releasing and publishing the bundled files. This is automated and runs on CI, ensuring that changes are tested, versioned, and documented. Publishing is handled by [semantic release](https://semantic-release.gitbook.io/semantic-release/).
|
|
55
|
+
See more in the [release guide](RELEASING.md#releasing-🚀).
|
|
41
56
|
|
|
42
57
|
#### 🗂 Directory structure
|
|
43
58
|
|
|
44
|
-
|
|
59
|
+
Here is a simplifie directory structure highlighting key areas for contributors:
|
|
45
60
|
|
|
46
|
-
```
|
|
61
|
+
```bash
|
|
47
62
|
├── LICENSE
|
|
48
63
|
├── README.md
|
|
49
64
|
├── __tests__
|
|
50
|
-
│ └── utilities
|
|
51
|
-
│ └── transforms.test.j s
|
|
52
65
|
├── babel.config.js
|
|
53
66
|
├── build.js
|
|
54
|
-
├──
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
│ └── index.js.map
|
|
58
|
-
├── docs
|
|
67
|
+
├── dist/
|
|
68
|
+
│ └── ...
|
|
69
|
+
├── docs/
|
|
59
70
|
│ ├── CONTRIBUTION.md
|
|
60
71
|
│ ├── RELEASING.md
|
|
61
72
|
│ └── USAGE.md
|
|
62
73
|
├── package-lock.json
|
|
63
74
|
├── package.json
|
|
64
|
-
├── src
|
|
65
|
-
│ ├──
|
|
66
|
-
│ │
|
|
67
|
-
│ │
|
|
68
|
-
│
|
|
69
|
-
│
|
|
70
|
-
│ │ └──
|
|
71
|
-
│
|
|
72
|
-
│
|
|
73
|
-
│
|
|
74
|
-
└──
|
|
75
|
-
|
|
75
|
+
├── src/
|
|
76
|
+
│ ├── assets/
|
|
77
|
+
│ │ ├── brands/
|
|
78
|
+
│ │ │ ├── mindvalley/
|
|
79
|
+
│ │ │ │ └── icons/
|
|
80
|
+
│ │ │ └── b2b/
|
|
81
|
+
│ │ │ └── icons/
|
|
82
|
+
│ │ ├── icons/
|
|
83
|
+
│ │ └── wordmarks/
|
|
84
|
+
│ ├── build/
|
|
85
|
+
│ │ └── js/
|
|
86
|
+
│ ├── helpers/
|
|
87
|
+
│ ├── tailwind/
|
|
88
|
+
│ │ └── plugins/
|
|
89
|
+
│ │ └── tokens/
|
|
90
|
+
│ ├── tokens/
|
|
91
|
+
│ │ └── brands/
|
|
92
|
+
│ │ ├── mindvalley/
|
|
93
|
+
│ │ └── b2b/
|
|
94
|
+
│ └── utilities/
|
|
95
|
+
│ └── svg-import/
|
|
96
|
+
│ ├── .figma_icons.js
|
|
97
|
+
│ └── .figma_wordmarks.js
|
|
98
|
+
├── webpack.config.js
|
|
76
99
|
```
|
|
77
100
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
This is the source of the design tokens. For now, we have the tokens checked in as JSON files.
|
|
81
|
-
The process of updating the payload is manual, implying that when there are changes in the tokens, one must get the updated token from the [figma colors file](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257) and update the files in this directory.
|
|
101
|
+
#### Test Directory
|
|
82
102
|
|
|
83
|
-
*
|
|
103
|
+
* All tests are under `__tests__/` (not `test/`).
|
|
84
104
|
|
|
85
|
-
|
|
105
|
+
* Subfolders include `utilities/`, `src/tailwind/plugins/`, etc.
|
|
86
106
|
|
|
87
|
-
|
|
107
|
+
#### Configuration Files
|
|
88
108
|
|
|
89
|
-
|
|
109
|
+
* There is **no** root `config.json`.
|
|
90
110
|
|
|
91
|
-
|
|
111
|
+
* Main configuration is in `build.js`, `webpack.config.js`, and scripts in `package.json`.
|
|
92
112
|
|
|
93
|
-
|
|
113
|
+
#### Important npm scripts
|
|
94
114
|
|
|
95
|
-
|
|
115
|
+
* `build`: Runs both the style-dictionary build and webpack bundle.
|
|
96
116
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
117
|
+
* `build:styledictionary`: Generates token outputs (see above for output locations).
|
|
118
|
+
* `build:bundle`: Runs webpack for production.
|
|
119
|
+
* `build:figma`: Runs both icon and wordmark export scripts.
|
|
120
|
+
* `build:figma:icons`: Uses `src/utilities/svg-import/.figma_icons.js`.
|
|
121
|
+
* `build:figma:wordmarks`: Uses `src/utilities/svg-import/.figma_wordmarks.js`.
|
|
122
|
+
* `test`: Runs all tests with jest.
|
|
123
|
+
* `commit`: Uses Commitizen CLI for conventional commits.
|
|
100
124
|
|
|
101
125
|
#### ⌨️ Start development
|
|
102
126
|
|
|
103
|
-
To get started with development, start by cloning the mv-design-system repo
|
|
127
|
+
To get started with development, start by cloning the mv-design-system repo:
|
|
104
128
|
|
|
105
|
-
```
|
|
129
|
+
```bash
|
|
106
130
|
git clone git@github.com:mindvalley/mv-design-system.git
|
|
107
131
|
```
|
|
108
132
|
|
|
109
|
-
Change your current directory to the folder you just cloned and install the dependencies
|
|
133
|
+
Change your current directory to the folder you just cloned and install the dependencies:
|
|
110
134
|
|
|
111
|
-
```
|
|
135
|
+
```bash
|
|
112
136
|
cd mv-design-system && npm install
|
|
113
137
|
```
|
|
114
138
|
|
|
115
139
|
###### 💡 Note
|
|
116
140
|
|
|
117
|
-
This repo uses `npm` as the package manager
|
|
141
|
+
This repo uses `npm` as the package manager.
|
|
118
142
|
|
|
119
143
|
##### Making commits
|
|
120
144
|
|
|
@@ -135,10 +159,9 @@ This will trigger a command line interface and all you have to do is answer the
|
|
|
135
159
|
|
|
136
160
|
If your branch name has a Jira ticket ID already included, then the prompt automatically extracts it.
|
|
137
161
|
|
|
138
|
-
Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you
|
|
139
|
-
follow the conventional commits conventions.
|
|
162
|
+
Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you follow the conventional commits conventions.
|
|
140
163
|
|
|
141
|
-
```
|
|
164
|
+
```bash
|
|
142
165
|
type(scope): commit-message
|
|
143
166
|
|
|
144
167
|
Jira-Issue-ID
|
|
@@ -149,7 +172,7 @@ The commit type has to be one of:
|
|
|
149
172
|
* `feat`: A new feature
|
|
150
173
|
* `fix`: A bug fix
|
|
151
174
|
* `docs`: Documentation only changes
|
|
152
|
-
* `style`: Changes that do not affect the meaning of the code (white-space,
|
|
175
|
+
* `style`: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
|
|
153
176
|
* `refactor`: A code change that neither fixes a bug nor adds a feature
|
|
154
177
|
* `perf`: A code change that improves performance
|
|
155
178
|
* `test`: Adding missing tests or correcting existing tests
|
|
@@ -194,13 +217,13 @@ Whenever there are changes that affect our design tokens, we need to regenerate
|
|
|
194
217
|
npm run build:styledictionary
|
|
195
218
|
```
|
|
196
219
|
|
|
197
|
-
This is the command that
|
|
220
|
+
This is the command that transforms our design tokens to the different desired formats we have defined.
|
|
198
221
|
|
|
199
|
-
######
|
|
222
|
+
###### Bundle assets for release
|
|
200
223
|
|
|
201
|
-
In the release step of the CI
|
|
224
|
+
In the release step of the CI pipeline, we bundle the assets into a UMD module with the help of webpack to ensure that our package runs on both the server (Node.js) and the client side (browser).
|
|
202
225
|
|
|
203
|
-
```
|
|
226
|
+
```bash
|
|
204
227
|
npm run build
|
|
205
228
|
```
|
|
206
229
|
|
|
@@ -210,13 +233,13 @@ Once your changes are made and merged, they'll need to be published. See how tha
|
|
|
210
233
|
|
|
211
234
|
## How to update icons and wordmarks
|
|
212
235
|
|
|
213
|
-
Icons and wordmarks are directly fetched from the respective
|
|
236
|
+
Icons and wordmarks are directly fetched from the respective Figma files where they are composed and updated by the designer.
|
|
214
237
|
|
|
215
238
|
To update them, follow the steps below:
|
|
216
239
|
|
|
217
|
-
1. Get your [
|
|
240
|
+
1. Get your [Figma personal token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)
|
|
218
241
|
2. Clone the `.env.example` file on your root and rename it to `.env`
|
|
219
|
-
3. Add your
|
|
242
|
+
3. Add your Figma token in the file `FIGMA_TOKEN=Y0urF1gM@T0k3n` and save the changes
|
|
220
243
|
4. Then run `npm run build:figma`
|
|
221
244
|
|
|
222
245
|
Running `npm run build:figma` triggers the workflows to fetch, generate sprites and generate documentation for sprites and wordmarks. `npm run build:figma` is an aggregate script that:
|
|
@@ -225,7 +248,7 @@ Running `npm run build:figma` triggers the workflows to fetch, generate sprites
|
|
|
225
248
|
2. Pulls and processes wordmarks, using the script: `npm run build:figma:wordmarks`
|
|
226
249
|
3. Clears the duplicate docs in the src/assets folder: `npm run clean:docs`
|
|
227
250
|
|
|
228
|
-
Step 1 and 2 are run in parallel using the [npm-run-all](https://github.com/mysticatea/npm-run-all/blob/HEAD/docs/npm-run-all.md) package
|
|
251
|
+
Step 1 and 2 are run in parallel using the [npm-run-all](https://github.com/mysticatea/npm-run-all/blob/HEAD/docs/npm-run-all.md) package.
|
|
229
252
|
|
|
230
253
|
The outputs go to `/src/assets/icons` for icons and `/src/assets/wordmarks` for wordmarks with additional generated markdown preview files added in `/docs/icons` and `/docs/wordmarks` directories respectively.
|
|
231
254
|
|
|
@@ -233,7 +256,7 @@ Here is an image illustrating the process:
|
|
|
233
256
|
|
|
234
257
|
|
|
235
258
|
|
|
236
|
-
If there is a
|
|
259
|
+
If there is a newly added Figma page, remember to adjust the scripts with the new pages:
|
|
237
260
|
|
|
238
261
|
* [wordmarks](../src/utilities/svg-import/.figma_wordmarks.js)
|
|
239
262
|
* [Icons](../src/utilities/svg-import/.figma_icons.js)
|