@mindvalley/design-system 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const{MATCH_WORDS_REGEX}=require("./regex"),CASINGS={snakeCase:"snakeCase",camelCase:"camelCase",pascalCase:"pascalCase",kebabCase:"kebabCase"};function toKebabCase(e=""){const t=toWordsList(e);return 0===t.length?"":t.map((e=>e.toLowerCase())).join("-")}function toSnakeCase(e=""){const t=toWordsList(e);return 0===t.length?"":t.map((e=>e.toLowerCase())).join("_")}function toCamelCase(e=""){const t=toWordsList(e);if(0===t.length)return"";let a="";for(let e=0,o=t.length;e<o;e++){let o=t[e].toLowerCase();0!=e&&(o=o[0].toUpperCase()+o.substring(1)),a+=o}return a}function toPascalCase(e=""){const t=toWordsList(e);return 0===t.length?"":t.map((e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase())).join("")}function convertToString(e){return!e||null===e&&null==e?"":"string"==typeof e?e.trim():String(e).trim()}function toWordsList(e){const t=convertToString(e);return""===t?[]:t.match(MATCH_WORDS_REGEX)||[]}module.exports={toKebabCase,toSnakeCase,toCamelCase,toPascalCase,CASINGS};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function strPxToRemStr(r,e=16){return Number(r.replace(/px/g,"")).toFixed(0)/e+"rem"}module.exports={strPxToRemStr};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const MATCH_WORDS_REGEX=/[A-Z\xC0-\xD6\xD8-\xDE]?[a-z\xDF-\xF6\xF8-\xFF]+|[A-Z\xC0-\xD6\xD8-\xDE]+(?![a-z\xDF-\xF6\xF8-\xFF])|\d+/g;module.exports={MATCH_WORDS_REGEX};
|
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 Thu,
|
|
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, 05 Jan 2023 00:55:33 GMT\n */\n\nmodule.exports = {\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 \"black\": \"#000000\",\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 \"white\": \"#ffffff\",\n \"warm-grey-100\": \"#fafafa\",\n \"warm-grey-150\": \"#f5f5f5\",\n \"warm-grey-200\": \"#ebebeb\",\n \"warm-grey-250\": \"#d6d6d6\",\n \"warm-grey-300\": \"#c2c2c2\",\n \"warm-grey-350\": \"#b3b3b3\",\n \"warm-grey-400\": \"#999999\",\n \"warm-grey-450\": \"#808080\",\n \"warm-grey-500\": \"#666666\",\n \"warm-grey-550\": \"#4d4d4d\",\n \"warm-grey-600\": \"#333333\",\n \"warm-grey-650\": \"#242424\",\n \"warm-grey-700\": \"#1a1a1a\",\n \"cyan\": \"#00f2f2\",\n \"lemon\": \"#fff000\",\n \"lime\": \"#bced09\",\n \"magenta\": \"#fb03ff\",\n \"rose\": \"#ff68a8\",\n \"brand-accent\": \"#9b37f2\"\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":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const plugin=require("tailwindcss/plugin"),{CASINGS,toKebabCase,toSnakeCase,toCamelCase,toPascalCase}=require("../../helpers/casing"),{strPxToRemStr}=require("../../helpers/dimens"),typographyPlugin=({casing:e=CASINGS.kebabCase,breakingPoint:t="lg"}={})=>function({addComponents:i,theme:n}){const p=n("screens",{}),l={fontFamily:"'Sharp Grotesk Semibold 21', 'Helvetica', 'Arial', 'sans-serif'"},a={fontFamily:"'Sharp Grotesk Medium 20', 'Helvetica', 'Arial', 'sans-serif'"},x={fontFamily:"'Sharp Grotesk Book 19', 'Helvetica', 'Arial', 'sans-serif'"},o={titleBold1:{...l,fontSize:"60px",letterSpacing:"0.25px",lineHeight:"68px",[`@media (min-width: ${p[t]})`]:{fontSize:"72px",lineHeight:"80px"}},titleBold2:{...l,fontSize:"44px",letterSpacing:"0.25px",lineHeight:"52px",[`@media (min-width: ${p[t]})`]:{fontSize:"60px",letterSpacing:"0.25px",lineHeight:"68px"}},titleBold3:{...l,fontSize:"36px",lineHeight:"44px",letterSpacing:"0.25px",[`@media (min-width: ${p[t]})`]:{fontSize:"48px",lineHeight:"56px"}},titleBold4:{...l,fontSize:"32px",letterSpacing:"0.25px",lineHeight:"38px",[`@media (min-width: ${p[t]})`]:{fontSize:"36px",lineHeight:"44px"}},titleBold5:{...l,fontSize:"24px",letterSpacing:"0.25px",lineHeight:"30px",[`@media (min-width: ${p[t]})`]:{fontSize:"28px",lineHeight:"34px"}},titleBold6:{...l,fontSize:"22px",letterSpacing:"0.25px",lineHeight:"26px",[`@media (min-width: ${p[t]})`]:{fontSize:"24px",lineHeight:"30px"}},titleBold7:{...l,fontSize:"20px",letterSpacing:"0.25px",lineHeight:"24px",[`@media (min-width: ${p[t]})`]:{fontSize:"22px",lineHeight:"26px"}},titleBold8:{...l,fontSize:"18px",letterSpacing:"0.25px",lineHeight:"22px",[`@media (min-width: ${p[t]})`]:{fontSize:"20px",lineHeight:"24px"}},titleBold9:{...l,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px",[`@media (min-width: ${p[t]})`]:{fontSize:"18px",lineHeight:"22px"}},titleBold10:{...l,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px",[`@media (min-width: ${p[t]})`]:{fontSize:"16px",lineHeight:"20px"}},titleBold11:{...l,fontSize:"12px",letterSpacing:"0.25px",lineHeight:"16px",[`@media (min-width: ${p[t]})`]:{fontSize:"14px",lineHeight:"18px"}}},S={title1:{...a,fontSize:"48px",letterSpacing:"0.25px",lineHeight:"56px",[`@media (min-width: ${p[t]})`]:{fontSize:"60px",lineHeight:"68px"}},title2:{...a,fontSize:"36px",letterSpacing:"0.25px",lineHeight:"44px",[`@media (min-width: ${p[t]})`]:{fontSize:"48px",lineHeight:"56px"}},title3:{...a,fontSize:"32px",letterSpacing:"0.25px",lineHeight:"38px",[`@media (min-width: ${p[t]})`]:{fontSize:"36px",lineHeight:"44px"}},title4:{...a,fontSize:"28px",letterSpacing:"0.25px",lineHeight:"34px"},title5:{...a,fontSize:"24px",letterSpacing:"0.25px",lineHeight:"30px"},title6:{...a,fontSize:"20px",letterSpacing:"0.25px",lineHeight:"24px"},title7:{...a,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px"},title8:{...a,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px"},title9:{...a,fontSize:"12px",letterSpacing:"0.35px",lineHeight:"16px"},title10:{...a,fontSize:"10px",letterSpacing:"0.35px",lineHeight:"14px"}},r={body:{...x,fontSize:"16px",letterSpacing:"0.35px",lineHeight:"24px"},bodyBold:{...l,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"24px"},bodySmall:{...x,fontSize:"14px",letterSpacing:"0.35px",lineHeight:"20px"},bodySmallBold:{...l,fontSize:"14px",letterSpacing:"0.35px",lineHeight:"20px"}},g={caption:{...x,fontSize:"12px",letterSpacing:"0.5px",lineHeight:"16px"},overline:{...a,fontSize:"14px",letterSpacing:"0.5px",lineHeight:"20px",textTransform:"uppercase"},disclaimerText:{...x,fontSize:"12px",letterSpacing:"0.5px",lineHeight:"16px"}};i(convertObjectKeysToCasedClassNames({...o,...r,...S,buttonText:{...a,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px"},buttonTextMedium:{...a,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px"},buttonTextSmall:{...a,fontSize:"12px",letterSpacing:"0.35px",lineHeight:"16px"},...g},e))};function convertObjectKeysToCasedClassNames(e,t=CASINGS.kebabCase){const i=e=>{let t={};return Object.keys(e).forEach((n=>{["fontSize","letterSpacing","lineHeight"].includes(n)?t[n]=strPxToRemStr(e[n]):"object"==typeof e[n]?t[n]=i(e[n]):t[n]=e[n]})),t};return mapObj(e,(e=>{switch(t){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(`${t} 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)}}),i)}function mapObj(e,t,i){return Object.entries(e).reduce(((e,[n,p])=>({...e,[t(n)]:i(p)})),{})}module.exports=plugin.withOptions(typographyPlugin);
|
package/docs/USAGE.md
CHANGED
|
@@ -14,6 +14,10 @@ yarn add @mindvalley/design-system
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
+
### Figma Design Documentation
|
|
18
|
+
|
|
19
|
+
You can use this [link](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473) to check out Mindvalley's core design system project. All the colors, icons, and typography, and design tokens follow it as the source of truth.
|
|
20
|
+
|
|
17
21
|
###### *ES module syntax*
|
|
18
22
|
|
|
19
23
|
```
|
|
@@ -24,6 +28,7 @@ yarn add @mindvalley/design-system
|
|
|
24
28
|
|
|
25
29
|
```
|
|
26
30
|
const { colors } = require('@mindvalley/design-system')
|
|
31
|
+
|
|
27
32
|
```
|
|
28
33
|
|
|
29
34
|
#### 🎨 colors
|
|
@@ -55,12 +60,12 @@ If you use TailwindCSS in your project, using the colors is a simple two-step pr
|
|
|
55
60
|
|
|
56
61
|
For gradient you can use the following tailwindCSS gradients:
|
|
57
62
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
- Purple wave: `from-brand-accent to-purple-600`
|
|
64
|
+
- Orange Wave: `from-orange-500 to-orange-600`
|
|
65
|
+
- Yellow wave: `from-yellow-400 to-yellow-500`
|
|
66
|
+
- Blue Wave: `from-blue-600 to-blue-700`
|
|
67
|
+
- Grey wave (150 - white): `from-cool-grey-150 to-white`
|
|
68
|
+
- Gray wave (600 - 700): `from-cool-gray-600 to-cool-gray-700`
|
|
64
69
|
|
|
65
70
|
Example use:
|
|
66
71
|
`<div class="bg-gradient-to-b from-brand-accent to-purple-600 ..."></div>`
|
|
@@ -96,3 +101,111 @@ If you'd like other custom names, you can make [tailwindcss color customizations
|
|
|
96
101
|
|
|
97
102
|
export default App;
|
|
98
103
|
```
|
|
104
|
+
|
|
105
|
+
#### 🖋️ Typography
|
|
106
|
+
|
|
107
|
+
#### Typography plugin (Tailwindcss)
|
|
108
|
+
|
|
109
|
+
Mindvalley's design eco-system is highly opinionated with most repos utilizing TailwindCSS. This plugin enables developers to use typography class references from Figma and apply it to their code without worrying about all the underlying font sizes, line heights, font families, etc
|
|
110
|
+
|
|
111
|
+
##### How to use it?
|
|
112
|
+
|
|
113
|
+
Let's say that you are trying to codify a button from a Figma design, and you want to apply the exact same typography values(line height, font family, font size, etc.) to your code. Here are the steps you will need to go through to utilize the plugin.
|
|
114
|
+
|
|
115
|
+
1. Install the design system as descibed in the [install section](#using-npm-or-yarn)
|
|
116
|
+
|
|
117
|
+
2. Require and use the tailwind typography plugin in your `tailwind.config.js` file.
|
|
118
|
+
|
|
119
|
+
```js
|
|
120
|
+
module.exports = {
|
|
121
|
+
...
|
|
122
|
+
plugins: [
|
|
123
|
+
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')();
|
|
124
|
+
],
|
|
125
|
+
...
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
3. Add font face definition for the font used in the plugin in your CSS.
|
|
131
|
+
|
|
132
|
+
```css
|
|
133
|
+
@font-face {
|
|
134
|
+
font-family: "Sharp Grotesk Semibold 21";
|
|
135
|
+
font-weight: 600;
|
|
136
|
+
font-display: swap;
|
|
137
|
+
/* We load fonts from assets.mindvalley.com cdn but you can choose to host the files yourself */
|
|
138
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/270944f2-bb71-4559-b461-aabb0b351d6b.woff2") format("woff2");
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@font-face {
|
|
142
|
+
font-family: "Sharp Grotesk Medium 20";
|
|
143
|
+
font-weight: 500;
|
|
144
|
+
font-display: swap;
|
|
145
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/faf3d1e3-d18c-461e-aafa-9e56f9f16ce0.woff2") format("woff2");
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@font-face {
|
|
149
|
+
font-family: "Sharp Grotesk Book 19";
|
|
150
|
+
font-weight: 400;
|
|
151
|
+
font-display: swap;
|
|
152
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
*Note that*
|
|
157
|
+
|
|
158
|
+
- The typography plugin by default, generates Kebab cased class names, e.g `title-bold-1` If you wish to change the class name casing then you can pass a 'casing' option to the plugin.
|
|
159
|
+
Supported casing options are `snakeCase`, `camelCase`, and `pascalCase`
|
|
160
|
+
|
|
161
|
+
```js
|
|
162
|
+
module.exports = {
|
|
163
|
+
...
|
|
164
|
+
plugins: [
|
|
165
|
+
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ casing: "pascalCase" }),
|
|
166
|
+
],
|
|
167
|
+
...
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
- The resultant typography classes generated are responsive for two screen sizes. One desktop size and the other for mobile/tablet screen sizes.
|
|
172
|
+
|
|
173
|
+
The plugin by default utilizes the `lg` breakingPoint from the [screen size configuration](https://tailwindcss.com/docs/screens) on tailwind configuration it is used in.
|
|
174
|
+
If you have a different configuration or naming convention for your tailwind breaking points, then its possible to specify the identifier of the breakingPoint to be used.
|
|
175
|
+
|
|
176
|
+
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.
|
|
178
|
+
|
|
179
|
+
```js
|
|
180
|
+
module.exports = {
|
|
181
|
+
...
|
|
182
|
+
theme: {
|
|
183
|
+
screens: {
|
|
184
|
+
'tablet': '640px',
|
|
185
|
+
'laptop': '1024px',
|
|
186
|
+
'desktop': '1280px',
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
plugins: [
|
|
190
|
+
/* Passing the identifier of the screen size to use as the breakingPoint */
|
|
191
|
+
require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ breakingPoint: 'laptop'}),
|
|
192
|
+
],
|
|
193
|
+
...
|
|
194
|
+
}
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
4. Find the name to use by inspecting the selected text on the Figma design file.
|
|
198
|
+
|
|
199
|
+
<img src="getting-class-name.png" width="1000" height="auto">
|
|
200
|
+
|
|
201
|
+
5. Use the class name as follows. Remember to adjust that according to the casing option if you are not using the default.
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
|
|
205
|
+
<p class="button-text">...</p>
|
|
206
|
+
|
|
207
|
+
<!-- This won't work as the button-text class generated is already responsive -->
|
|
208
|
+
<p class="button-text lg:button-text">...</p>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
You can find the full list of typography definations here 👉 [Figma typography](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473&t=3PPGng5xmhzaFyRe-0)
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mindvalley/design-system",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "Resources, components, design guidelines and tooling for Mindvalley's design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
"docs"
|
|
25
25
|
],
|
|
26
26
|
"scripts": {
|
|
27
|
-
"build": "webpack --mode production",
|
|
27
|
+
"build": "npm run test && npm run styledictonary:build && webpack --mode production",
|
|
28
28
|
"commit": "cz",
|
|
29
29
|
"commitmsg": "validate-commit-msg",
|
|
30
30
|
"semantic-release": "semantic-release",
|
|
31
31
|
"styledictonary:build": "node ./build.js",
|
|
32
|
-
"test": "jest",
|
|
32
|
+
"test": "jest --verbose",
|
|
33
33
|
"watch": "webpack --mode development --watch",
|
|
34
34
|
"clean:dist": "rimraf dist",
|
|
35
35
|
"publish:dev": "np",
|
|
@@ -79,7 +79,6 @@
|
|
|
79
79
|
"cz-conventional-changelog-with-jiraid-detection": "^1.0.3",
|
|
80
80
|
"husky": "^6.0.0",
|
|
81
81
|
"jest": "^26.6.3",
|
|
82
|
-
"lodash": "^4.17.21",
|
|
83
82
|
"np": "^7.6.2",
|
|
84
83
|
"npm-run-all": "^4.1.5",
|
|
85
84
|
"rimraf": "^3.0.2",
|