\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"e9117cd853ba5af7c9ad973672de56b5fadbe2ee","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XC2PZQTYfmm9wIsc7ET6IRh2gER9WnX6SzueTwHlVeq2xmCuQxC2nmpJwQWuszsh5GeBUbd5He11RGce69JQCA==","shasum":"7568d7dd0771684197251a6d676c0fb8f2f71ddb","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.tgz","fileCount":597,"unpackedSize":15328044,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXnDalz64IGyWmugYVCPlqW3G8JqZeXeTfBFoDCYPbAwIgVgP3lKKjWgYVGfbGvxJpT4crJWfErrerASS6Ua5Mf+0="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next_1685625431048_0.758086674041444"},"_hasShrinkwrap":false},"1.17.9-next.2":{"name":"@makesenseorg/design-system","version":"1.17.9-next.2","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system && npm run build:vue3","build:vue3":"cd src && node build-v3.js"},"dependencies":{"dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"e9117cd853ba5af7c9ad973672de56b5fadbe2ee","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-6wAaJPV3U3MtZP4U5ATkkU1WGH0JJs2OXqD7A4Jrt+YuFtduN26ZgmUxN82ZClO97QP8FSz7tBrzOy1/GnYkyA==","shasum":"74827ec0bf60f1b4403d66926e24e6f804a720cd","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.2.tgz","fileCount":597,"unpackedSize":15328010,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyZ04UlSP/eGjcL4397wY1nxtwHIdQs4Tw7zytSFJA/AIgGwSDwvxRn14PE4Qd1AupNrYEgweF8b68Krsj6RQE0b0="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.2_1685625786805_0.9598325953443902"},"_hasShrinkwrap":false},"1.17.9-next.3":{"name":"@makesenseorg/design-system","version":"1.17.9-next.3","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system && npm run build:vue3","build:vue3":"cd src && node build-v3.js"},"dependencies":{"dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"543ab955813076f87e0d7415402ae62113b3129e","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.3","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Dd9uY688Wui7fnCfTSBTmCLKLsYjVp+zIl7A52zpJs8KaNghJcgV5u1Vf3c6cZGwgt82QYIVlBZCdGR2LMotjA==","shasum":"c5f47b205cf0923bc2d4cd4721a5b8c354ebc377","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.3.tgz","fileCount":597,"unpackedSize":15328120,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJ3ihTGAce34l1reSF1mXTU4jwyQ8P7/X2X+MkbKALKAiEAvboKbjHGwETzeTMRmpIe/qVeDAX0DE0hciOrE2VYzyc="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.3_1686211222308_0.7293945603857135"},"_hasShrinkwrap":false},"1.17.9-next.4":{"name":"@makesenseorg/design-system","version":"1.17.9-next.4","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system && npm run build:vue3","build:vue3":"cd src && node build-v3.js"},"dependencies":{"dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"80151022b32475e1dbbe1e3cb649df4407134709","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.4","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-RTFTcO0T+fv8cAtHj4AeT3SlNqr5IjNxuzzBFfT0xrEbGDBOm3uGnEbo43RAzOvvWx3i6hJhsMVy6NXsopdeGQ==","shasum":"1d9c6f5de3d2e0ce39d0937202911efa34b001c5","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.4.tgz","fileCount":597,"unpackedSize":15328465,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOVHpa6+L4bBBMzqMu9cc/wqhrQ/z+jxGlVIh1gPrpCgIgAhV1NaOOwr7asbSiOVELIsA4j8xvCC7C+H/i+5QuIH8="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.4_1687180614496_0.1985276304110033"},"_hasShrinkwrap":false},"1.17.9-next.5":{"name":"@makesenseorg/design-system","version":"1.17.9-next.5","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system && npm run build:vue3","build:vue3":"cd src && node build-v3.js"},"dependencies":{"dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^2.6.11","vue-datepicker-next":"^1.0.2"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eval":"^0.1.4","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.7.14","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"c667ff195eb1a7609da419cce3ed64d1b963345c","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.5","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-loikh5EcNQs6LomUpChz9Dqlc/ao78HtSVMnBTkUWKpk4i3+LlCp1zIYdQRlZT+zJNmzXW89buX0lZZbXgKPFQ==","shasum":"76790cceda57cfc91318cf7ae74e0c70e640aecf","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.5.tgz","fileCount":612,"unpackedSize":18169960,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcb6iz5gm3lRsVhIxgvylFjQxjAKaU5euEVQM3F+7zFgIhAME0tQC1do3lk6SMlzEa9BZKirQtmZVcATrRV671elgA"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.5_1688741319181_0.5645940753630303"},"_hasShrinkwrap":false},"1.17.9-next.6":{"name":"@makesenseorg/design-system","version":"1.17.9-next.6","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js"},"dependencies":{"dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eval":"^0.1.4","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.7.14","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"fd1e0252c50605918e2d494ea5cb755a311b9503","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.6","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-jpuE1ScKfA6WHvK/xRa9zksKoIpJ5dQ+eejKa9Vps3wF0HgcuKS+G9ud4N2UICBi4r64C1Ur2TOcaRStudRMUQ==","shasum":"86f2bd70a7539f6d49cbe1616a9735baa6150af0","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.6.tgz","fileCount":612,"unpackedSize":18169928,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNeB6jLwnb5dc4rUU9x2gzvXUBrKGD5DZKXsOymKvwcQIhAPRfE937tdCdFTN2tULQDkAsnl3bZoPYobdNJuiMd3wo"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.6_1688741722546_0.9585429044338181"},"_hasShrinkwrap":false},"1.17.9-next.7":{"name":"@makesenseorg/design-system","version":"1.17.9-next.7","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"rm -rf dist && cd src/styleguide-vue3 && npm run build && mv dist ../../","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel theo:onchange serve:vue3 dev:guide"},"dependencies":{"@makesenseorg/design-system":"../vue3","cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"8d304682ab38c5967def9f238ce424dbb84c545e","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.7","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-0R/qyWEtq90BP7/1jCjJyVJgqjvy+Hx+9qO8/sUnfsDRltytKsQGnIDDembhH9gnqWMABXygsO2IhzJUZ36Pbg==","shasum":"ca4222f959998cabf82341217f328e6f7dc46c7b","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.7.tgz","fileCount":540,"unpackedSize":12970458,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvD1AG5cFYDVgbk4WXR3Nv9zTWxMPoD2Tzb4ARMI0NpgIhAOzcnVHlK6SsNJ+SwyJTN7bzfMm+tFXqKkTduCgqWxMI"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.7_1694180729960_0.7029577520147374"},"_hasShrinkwrap":false},"1.17.9-next.8":{"name":"@makesenseorg/design-system","version":"1.17.9-next.8","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"rm -rf dist && cd src/styleguide-vue3 && npm run build && mv dist ../../","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"@makesenseorg/design-system":"../vue3","cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"9022d6200b65751b33ec206a0e5cb76bbc5b97a7","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.8","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-9gA7vfcxdd0qAjhiAZz9CkHyliJN8wxZdT8Zq5RKrEwzUtn+B0LoVn2djKuIaDXRpfK/MtzgUWdpcsI/fikBZg==","shasum":"7a23596c2b4c3d9e1b103c62f6b86a2241938b12","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.8.tgz","fileCount":541,"unpackedSize":12970683,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkee+meqSI5vX9s8n0o+bjML5BbjNQ+6h9c0yKD5byoQIhAMr6IQGvuAifamDwFygZumu1np9UOaQLOni5p6R/hCjV"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.8_1694183518711_0.28774756326252526"},"_hasShrinkwrap":false},"1.17.9-next.9":{"name":"@makesenseorg/design-system","version":"1.17.9-next.9","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"rm -rf dist && cd src/styleguide-vue3 && npm run build && mv dist ../../","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"7bd56b92a87fcc22fc46806464f529e9763b981a","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.9-next.9","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-f+ZGMDnKcV0687hsD5/zSilR51hkPSw3F1Kagti4Lwy+RdygrThoiDgAhRAnby0WYcJD+ofDzNwj1TWcGYQb/g==","shasum":"71573ad02b36a1d07dda24d5cfd55c6d836271f3","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.9-next.9.tgz","fileCount":540,"unpackedSize":12970496,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxRm0jE6EUwrZeV9re/U9OZc//VAdVXmg7XJcFxldqaQIhALzEoIYCKaCR1gXPfGD4ehbM4IzuEi4/+HUK8Wm549vj"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.9-next.9_1694183892869_0.8412783301733677"},"_hasShrinkwrap":false},"1.17.10-next.1":{"name":"@makesenseorg/design-system","version":"1.17.10-next.1","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"402311342761c8a286aa01d12141494eb48c897c","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.10-next.1","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-0QxNUnOvw2KRZBpy3Ni+/aLsdFWFZxpNYzv5oIMIn/AGoxE9nQ7ieNnP4wUXdLaVFZN8QiY3yCiEcqa/4maHEg==","shasum":"239dae1d86734f714b57c34ffae7c699a0d5082f","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.10-next.1.tgz","fileCount":540,"unpackedSize":12970649,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyCqeEPCoEO2EVFcZAvY2G0KLAxVaDs8NXN42DSBH9JAIgUgiTfxSBRQL9cmpMAgp7Q8O4CZrwsX1thd39mUcWAas="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.10-next.1_1694435326959_0.5303256341885574"},"_hasShrinkwrap":false},"1.17.10":{"name":"@makesenseorg/design-system","version":"1.17.10","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system"},"dependencies":{"dayjs":"^1.8.26","eval":"^0.1.4","feather-icons":"^4.28.0","quill-mention":"^3.0.4","reset-css":"^5.0.1","vue":"^2.5.17","vue-feather":"^1.0.1","vue2-datepicker":"^3.11.1","vue2-editor":"^2.10.2","vue2-google-maps":"^0.10.7"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./dist/system.umd.min.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"gitHead":"76eef77927bfd3dd25657dbc92e2bc0ec5bb223a","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.10","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-E97dyMRbC+HKORPntVuonXYnopxjWlYfOb+klSUjbIPNXuYErvWAMZBB+7dlbTP6zDsY7fdnfzS1Cu/Ny5bv9w==","shasum":"9b100674ea3e17482e5b4541946134431c3919ff","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.10.tgz","fileCount":418,"unpackedSize":15699874,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxtA8rx15EFpLhg5BHh5sd8S65xDcL7zCkQsdGcsEMZgIhANJLyw2w3Bt0OU84FYMbeoWsFXIsm06dqSf35gQYa15t"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.10_1694435451498_0.9546228893982647"},"_hasShrinkwrap":false},"1.17.10-next.2":{"name":"@makesenseorg/design-system","version":"1.17.10-next.2","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"b2e7602fe873e699e0fa1cd54eb5f96f4ae6187d","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.10-next.2","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-xDDcOcgyQ6KcNw4VpkbNx0FWCWezyMBLdjcr4lnUYMJ2RHJnw4toRQMS56auVWNntCnESdIjwMQFNIWqvPvt7w==","shasum":"514ec69c60652b79e596323156c16b68a710866e","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.10-next.2.tgz","fileCount":540,"unpackedSize":12970665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7OdvpO7XBf8xU8lUFwtCQy1LCMcLkkN8+LPTHhU+guQIhALTOyLkU7vdX5R+uz5+S++TGQJWdqZFfJ9sGXgniUmEB"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.10-next.2_1696405599375_0.12220193790081879"},"_hasShrinkwrap":false},"1.17.11-next.0":{"name":"@makesenseorg/design-system","version":"1.17.11-next.0","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"efcdd3914120799c6db9cd4bd40a8b11bb7f03b7","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.11-next.0","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-aYOYbvbB7gaXj1y306JtXYXnbhte/7HIE7UZSjdbyuPEeoogzFeiM9A/tp1Xg/cjrsMkzxd7iNaG/QMexULZnw==","shasum":"0bb22194c032c080c3e326c68f7ca659232fa27e","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.11-next.0.tgz","fileCount":540,"unpackedSize":12970831,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDShY1ORM8g0CJtJcPumjXpdnZ+Eg2f7wnX5G7ze5e7xAIhAMrKUbFiLG5t7yJ7yRGXbMr2Ac2BdWTiKhtFe8qZuw6C"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.11-next.0_1696924955448_0.24490193081163847"},"_hasShrinkwrap":false},"1.17.11":{"name":"@makesenseorg/design-system","version":"1.17.11","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system"},"dependencies":{"dayjs":"^1.8.26","eval":"^0.1.4","feather-icons":"^4.28.0","quill-mention":"^3.0.4","reset-css":"^5.0.1","vue":"^2.5.17","vue-feather":"^1.0.1","vue2-datepicker":"^3.11.1","vue2-editor":"^2.10.2","vue2-google-maps":"^0.10.7"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./dist/system.umd.min.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"gitHead":"ad66b452f3bd7ba7ded537445e4354713fd97084","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.11","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-2kHXsEWr/qmlUn5J/Oui8V3Vhz1ATlgQuQi0vw2WO7d131tzyS0ivr12v5n9Z/ZJtiGqUrQE3A3lLB5pgVwQdQ==","shasum":"2aed926a1b63a4141a76e7daf6794c91cf3e323f","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.11.tgz","fileCount":418,"unpackedSize":15701280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBW0V2f6uxgPNQB24svZe7Dh6bj6TDf2lPC23UmtoOMCAiBZUxsYT9oZSx7eM8qyWpU3ZX6jt+4owsNWKF/lQp+zyQ=="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.11_1696925048908_0.6107919300837725"},"_hasShrinkwrap":false},"1.17.12-next.0":{"name":"@makesenseorg/design-system","version":"1.17.12-next.0","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"2b2ba3c6afd461718bfc963a83fc4c6ffc0bf6d7","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.12-next.0","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-XTnXCCW6SSCk96WkNt8gIXmWh0O/LklhoYm4zxGnUt5v5l9UWnXe8ZQkDpSQ16iv44UUkXZwRUxXmaDFXMjhzQ==","shasum":"0ecdee48f79c1faab3bee028d9444534086bb414","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.12-next.0.tgz","fileCount":540,"unpackedSize":12971782,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKmlWHOUrLdN8CqL9cLBvP/XmVtieNUl0eJpqiwDcPlAiAzE8Q1E8FXyQHZe64tPcK+4R9ScjeGhDld0qI/Aiyh3Q=="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.12-next.0_1697635568060_0.6824333645806782"},"_hasShrinkwrap":false},"1.17.12-next.1":{"name":"@makesenseorg/design-system","version":"1.17.12-next.1","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"4d68b770f76e190ac30d003ace608da5f4d76333","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.12-next.1","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-y5lkIzfcO/uiF9bHWvNey6OHKA8jjzH6fwR8HV3OB3THf5iQXjjSYW6sf7+pMRk7/fxdxQiJLdt6GXldAcbgAQ==","shasum":"07547e5c0011aa86950bf53dd402936280897d9f","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.12-next.1.tgz","fileCount":540,"unpackedSize":12972318,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsZwroBRCGLzFu7qrMGHE4aty5OXYhN6dTkojNmDjhLAIgZgh1gQj/oGy31vjPwkM3kjSvB1fBiNMBNq67i1qDsBg="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.12-next.1_1698062786653_0.11444941921411789"},"_hasShrinkwrap":false},"1.17.12-next.2":{"name":"@makesenseorg/design-system","version":"1.17.12-next.2","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"faa23b8bc355ec248c56b000a1bf500cbea526e5","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.12-next.2","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-uNsueo8HIHz8wIVQItKWEG3puDdECdK8kQiBNiAK06TzE44l0Mtduoo/vBaaEHhN64BDUo2mpjtbQQ3mIef14A==","shasum":"3535e9b410eb41266eb7dde4acc1d0ae61aedfde","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.12-next.2.tgz","fileCount":540,"unpackedSize":12980121,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSpJ1PNZljwojztsBc9m0D0+ff5hk24XN01cSqc4y47AiEA6gReFFKPa2K0JfDL85zIxwNIAtjWVrDfSl29QDKizXA="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.12-next.2_1700491156078_0.862087726040611"},"_hasShrinkwrap":false},"1.17.13-next.0":{"name":"@makesenseorg/design-system","version":"1.17.13-next.0","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"24f0efe805d66cc9c83c67995c83febbdad21ed0","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.13-next.0","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-KFNlZG/iZVmTIDQkD5LQix/p+ui76DU9u6xIu3K4gXHEK2zz9vrunI2cJpvfB21eMuf2l5C/HeceydKWU5bC6A==","shasum":"4ca14ab92cdb8c424e7979c7f7da9a5f7a405a50","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.13-next.0.tgz","fileCount":540,"unpackedSize":12981127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsXtVI4jXiLSQHRMjsIVAb0anbqFurlA4D1QsFaT8rKAiEA8RN0o/cu0kGQzboRXbMljL4Hkt0rEpENb189Wrles1E="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.13-next.0_1705419737036_0.14203629179828048"},"_hasShrinkwrap":false},"1.17.14":{"name":"@makesenseorg/design-system","version":"1.17.14","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system"},"dependencies":{"dayjs":"^1.8.26","eval":"^0.1.4","feather-icons":"^4.28.0","quill-mention":"^3.0.4","reset-css":"^5.0.1","vue":"^2.5.17","vue-feather":"^1.0.1","vue2-datepicker":"^3.11.1","vue2-editor":"^2.10.2","vue2-google-maps":"^0.10.7"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./dist/system.umd.min.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"gitHead":"ae1addb5db0587f1447dd77d1cffbcfdc00dc517","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.14","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-vJb6Rkb10o6lgr3ApxqPH8QSQ5G5OG9wS1qWSqu6al/59s8R1VHK7JJSe34eDaRy4alylRtaDfVKRVHYZRzw4g==","shasum":"f5c6d2cf32752e7fcbb5ab38f26824e89211d968","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.14.tgz","fileCount":418,"unpackedSize":15708814,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeKWjStqLy3nFwPJr63Vaa9cHR6vgOzDLG2D6JhqrEQgIhAOYA7vNAUUUPJOHeDnje3rbJ1GZgYE2tuGDNFhkavk5Z"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.14_1705421223167_0.5492684683144538"},"_hasShrinkwrap":false},"1.17.13-next.1":{"name":"@makesenseorg/design-system","version":"1.17.13-next.1","engines":{"node":"16.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run build:vue3 && rm -rf docs && cd src/styleguide-vue3 && npm run build && mkdir ../../docs && mv dist/* ../../docs && cd ../../public && cp -r assets 404.html favicon.* brand.svg ../docs/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run theo && npm run build:vue3","build:vue3":"cd src && node build-v3.js","serve:vue3":"onchange \"./src/system/**/*.js\" \"./src/system/**/*.vue\" -- npm run build:vue3","dev:guide":"cd src/styleguide-vue3 && npm run serve","serve:guide":"npm-run-all --parallel build:vue3 theo:onchange serve:vue3 dev:guide"},"dependencies":{"cheerio":"^0.22.0","core-js":"^3.8.3","dayjs":"^1.8.26","feather-icons":"^4.28.0","quill-mention":"^3.0.4","vue":"^3.2.47","vue-datepicker-next":"^1.0.2","vue3-quill":"^0.3.0","vue3-runtime-template":"^1.0.2"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vitejs/plugin-vue":"^1.6.1","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","@vue/eslint-config-prettier":"^4.0.1","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","buffer":"^6.0.3","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","prettier":"^2.4.1","raw-loader":"^0.5.1","reset-css":"^5.0.1","sass":"^1.58.3","sass-loader":"^13.2.0","simple-assign":"^0.1.0","stream-browserify":"^3.0.0","theo":"^8.1.5","util":"^0.12.5","vite":"^2.5.4","vue-click-outside":"^1.0.7","vue-docgen-api":"^4.73.0","vue-router":"^4.0.3","vue-svg-loader":"^0.8.0","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./vue3/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","gitHead":"3d27d6df5b786eb8f2c127c9dc453dd26403e949","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.13-next.1","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-NpJXaFW7nJ5KaJm1NeufxuqBA1zv4YQ5Je+HEJTueXVM5OYn/zJo2XgQghPJ0IAwx2TNwf4OaPHMJCK+0HGn+g==","shasum":"3de2fb07f72e8feda36cdbface0ebb8b8e56fdf6","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.13-next.1.tgz","fileCount":540,"unpackedSize":12981327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpf/BmaQv0sTYoSYhBzuyny1QWDoCZjkyNnLneis3z8AiBleCRonQrKZ6MKKmqqyREnf5fKS1MkrPz8fwz9rAXrHw=="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.13-next.1_1706518798176_0.23030828925052438"},"_hasShrinkwrap":false},"1.17.15":{"name":"@makesenseorg/design-system","version":"1.17.15","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system"},"dependencies":{"dayjs":"^1.8.26","eval":"^0.1.4","feather-icons":"^4.28.0","quill-mention":"^3.0.4","reset-css":"^5.0.1","vue":"^2.5.17","vue-feather":"^1.0.1","vue2-datepicker":"^3.11.1","vue2-editor":"^2.10.2","vue2-google-maps":"^0.10.7"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./dist/system.umd.min.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"gitHead":"6a019121d516178d3329e43ede4f63546b7e5d49","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.17.15","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-t+PjHRWJFNS0b3kmKhf0JQUQBwH85oG8crv8VXmoWR1VttZniLkEEcClysl3f+XLXJoolyU8bRdPwXy5YQHk3w==","shasum":"cc3935955f225a301fa21ff17d4bcb8f7701ff18","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.17.15.tgz","fileCount":418,"unpackedSize":15708994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLeJlQpvtAfCT1q/vsJNz3yp8UuTkMA4uk4XCaCsvUnAiAUtuo6yFF7FRfFg6vEUj5XKWovSIyl7Oa9LzBbfSVX2Q=="}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.17.15_1707219233047_0.6929785807788706"},"_hasShrinkwrap":false},"1.18.0":{"name":"@makesenseorg/design-system","version":"1.18.0","engines":{"node":"14.x"},"scripts":{"serve":"http-server ./docs -o -s","build":"npm run theo && vue-cli-service build; mkdir docs/assets; cp -r src/styleguide/assets public/","lint":"vue-cli-service lint","dev":"npm-run-all --parallel theo:onchange theo servedev","install-playground":"cd src/playground && npm install","playground":"npm run build:system && cd src/playground && npm run dev","servedev":"vue-cli-service serve --open","build:components":"cd src && node build-test.js && cd .. && create-index ./dist/components -x js vue -i","build:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --target lib --name system ./src/library.js && npm run build:components","build-report:system":"npm run theo && cross-env BUILD=library NODE_ENV=production vue-cli-service build --report --target lib --name system ./src/library.js && npm run build:components","theo":"node ./buildtokens.js","theo:onchange":"onchange \"./src/system/tokens/*.yml\" \"./src/system/tokens/themes/**/*.yml\" -- npm run theo","test:unit":"vue-cli-service test:unit","prepack":"npm run build:system"},"dependencies":{"dayjs":"^1.8.26","eval":"^0.1.4","feather-icons":"^4.28.0","quill-mention":"^3.0.4","reset-css":"^5.0.1","vue":"^2.5.17","vue-feather":"^1.0.1","vue2-datepicker":"^3.11.1","vue2-editor":"^2.10.2","vue2-google-maps":"^0.10.7"},"devDependencies":{"@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/standalone":"^7.0.0-beta.56","@vue/cli-plugin-babel":"^3.0.0-rc.12","@vue/cli-plugin-eslint":"^3.0.0-rc.12","@vue/cli-plugin-unit-jest":"^3.0.1","@vue/cli-service":"^3.0.0-rc.12","@vue/eslint-config-prettier":"^4.0.1","@vue/test-utils":"^1.0.0-beta.20","async-validator":"^1.8.5","babel-core":"7.0.0-bridge.0","babel-jest":"^23.0.1","babel-plugin-transform-require-context":"^0.0.3","babel-polyfill":"^6.26.0","chalk":"^4.1.0","cheerio":"^1.0.0-rc.2","child_process":"^1.0.2","clipboard-copy":"^2.0.1","clone-deep":"^4.0.0","codemirror":"^5.39.2","create-index":"^2.6.0","cross-env":"^5.2.0","dot-prop":"^4.2.0","fs":"0.0.1-security","glob":"^7.1.6","husky":"^4.3.0","lodash":"^4.17.20","markdown-it":"^8.4.2","markdown-it-abbr":"^1.0.4","markdown-it-deflist":"^2.0.3","markdown-it-emoji":"^1.4.0","markdown-it-footnote":"^3.0.1","markdown-it-ins":"^2.0.0","markdown-it-katex":"^2.0.3","markdown-it-mark":"^2.0.0","markdown-it-sub":"^1.0.0","markdown-it-sup":"^1.0.0","markdown-it-task-lists":"^2.1.1","mkdirp":"^0.5.1","ncp":"^2.0.0","npm-run-all":"^4.1.3","onchange":"^4.1.0","ora":"^5.1.0","path":"^0.12.7","raw-loader":"^0.5.1","sass":"^1.57.1","sass-loader":"^7.1.0","theo":"^8.1.5","vue-click-outside":"^1.0.7","vue-docgen-api":"^2.3.13","vue-router":"^3.0.1","vue-svg-loader":"^0.8.0","vue-template-compiler":"^2.5.17","vuep":"git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox","webpack-bundle-analyzer":"^3.3.2","webpack-merge-and-include-globally":"^2.0.11"},"author":{"name":"makesense","url":"makesense.org"},"main":"./dist/system.umd.min.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"homepage":"https://makesense-design-system.netlify.com","sideEffects":["*.scss","*.css","**.vue"],"gitHead":"b690654a41e71aaa7cafa67d4ed9b77f54d9a16f","description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"},"_id":"@makesenseorg/design-system@1.18.0","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-xUhjtnD1ug+jq0/idS3d54GpZLrfBEwVUUkGE8UYQcPnjFfN3R3BAVpp1cxqpMv2wxQehFheay7lPi472mPUlQ==","shasum":"3f44ffe48bca6d226b9e66393fc8706e131d1cb0","tarball":"https://registry.npmjs.org/@makesenseorg/design-system/-/design-system-1.18.0.tgz","fileCount":418,"unpackedSize":15712023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmSP9Osl+nyVT3JdEwFut7E8q5njf/YwU/N8WWlhHBRgIhAOkj0kKRjc71gUG4KlYOmwpdX53PjW5kG2b3tjtN5ElB"}]},"_npmUser":{"name":"makesenseorg","email":"digitale@makesense.org"},"directories":{},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_1.18.0_1710338529774_0.5839104339153687"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-21T16:18:22.796Z","0.1.0":"2020-04-21T16:18:23.533Z","modified":"2024-03-13T14:02:10.523Z","0.1.1":"2020-04-30T15:48:54.526Z","0.1.2":"2020-05-05T15:00:58.545Z","0.1.3":"2020-05-07T15:09:31.156Z","0.1.4":"2020-05-07T15:25:27.592Z","0.1.5":"2020-05-07T15:42:41.061Z","0.1.6":"2020-05-07T15:51:44.805Z","0.1.7":"2020-05-07T15:59:10.360Z","0.1.8":"2020-05-13T13:40:26.147Z","0.1.9":"2020-05-13T13:48:47.992Z","0.1.10":"2020-05-13T14:13:36.171Z","0.1.11":"2020-05-13T14:36:29.560Z","0.1.12":"2020-06-22T15:05:10.974Z","0.1.13":"2020-06-25T13:51:45.096Z","0.1.14":"2020-06-25T14:26:38.357Z","0.1.15":"2020-06-26T07:54:04.632Z","0.1.16":"2020-07-20T08:26:00.917Z","0.1.17":"2020-07-20T20:01:07.693Z","0.1.18":"2020-07-20T20:18:27.811Z","0.1.19":"2020-07-21T09:23:35.288Z","0.1.20":"2020-07-21T15:20:17.228Z","0.1.21":"2020-07-21T15:40:14.871Z","0.1.22":"2020-07-21T21:48:05.221Z","0.1.23":"2020-07-21T22:00:51.665Z","0.1.24":"2020-07-21T22:05:40.870Z","0.1.25":"2020-07-21T22:24:08.305Z","0.1.26":"2020-07-21T22:28:56.411Z","0.1.27":"2020-07-22T07:07:33.286Z","0.1.28":"2020-07-22T07:32:26.060Z","0.1.29":"2020-07-22T10:22:47.007Z","0.1.30":"2020-07-22T10:39:29.399Z","0.1.31":"2020-07-22T10:49:24.843Z","0.1.32":"2020-07-22T21:27:30.619Z","0.1.33":"2020-07-23T10:10:09.351Z","0.1.34":"2020-07-23T10:18:21.034Z","0.1.35":"2020-07-23T10:31:57.489Z","0.1.36":"2020-07-23T22:17:59.379Z","0.1.37":"2020-07-24T12:30:23.807Z","0.1.38":"2020-07-24T13:39:46.218Z","0.1.39":"2020-07-30T07:24:36.671Z","0.1.40":"2020-07-30T13:30:05.183Z","0.1.41":"2020-07-30T13:35:12.869Z","0.1.42":"2020-07-31T09:43:26.748Z","0.1.43":"2020-09-04T08:57:52.263Z","0.1.45":"2020-09-04T10:09:08.189Z","0.1.46":"2020-09-04T12:16:25.853Z","0.1.47":"2020-09-14T08:25:33.135Z","0.1.48":"2020-09-14T09:04:28.613Z","0.1.49":"2020-09-14T13:24:19.543Z","0.1.50":"2020-09-14T13:30:37.829Z","0.2.0":"2020-09-15T15:02:02.608Z","0.2.1":"2020-09-15T15:22:40.279Z","0.2.2":"2020-09-16T10:29:42.516Z","0.2.3":"2020-09-16T14:48:44.468Z","0.2.4":"2020-09-30T22:34:43.190Z","0.2.5":"2020-10-06T10:10:13.909Z","0.3.0":"2020-10-06T16:12:15.787Z","0.3.1":"2020-10-12T08:36:34.792Z","0.3.2":"2020-11-26T17:11:49.339Z","0.3.3":"2020-12-10T10:54:15.696Z","0.3.4":"2020-12-10T13:49:16.348Z","1.0.0":"2020-12-18T08:58:35.629Z","1.0.1":"2021-02-22T18:18:12.361Z","1.1.1":"2021-03-03T15:48:22.737Z","1.1.2":"2021-03-03T16:00:13.865Z","1.1.3":"2021-04-26T11:41:59.097Z","1.2.0":"2021-05-04T16:46:06.378Z","1.2.1":"2021-05-17T14:39:14.481Z","1.3.0":"2021-05-19T10:43:26.205Z","1.3.1":"2021-05-24T12:02:25.913Z","1.3.2":"2021-05-24T14:53:45.365Z","1.3.3":"2021-05-31T13:22:47.336Z","1.3.4":"2021-06-01T16:46:17.098Z","1.4.0":"2021-06-18T18:12:29.756Z","1.5.0":"2021-06-24T16:16:05.926Z","1.5.1":"2021-07-01T10:06:21.875Z","1.5.2":"2021-07-01T10:46:48.630Z","1.5.3":"2021-07-02T14:38:34.221Z","1.6.0":"2021-07-07T10:26:50.964Z","1.6.1":"2021-07-07T10:28:57.158Z","1.6.2":"2021-07-07T15:24:46.783Z","1.7.0":"2021-07-12T09:44:30.045Z","1.7.1":"2021-07-12T16:50:17.219Z","1.7.2":"2021-07-15T11:54:50.611Z","1.7.3":"2021-07-27T09:15:08.209Z","1.7.4":"2021-07-27T15:23:07.390Z","1.7.5":"2021-08-03T10:20:38.694Z","1.7.6":"2021-08-05T09:34:44.906Z","1.7.7":"2021-08-05T14:46:39.509Z","1.7.8":"2021-08-09T08:50:05.329Z","1.7.9":"2021-08-10T10:37:38.279Z","1.7.10":"2021-08-10T10:44:46.868Z","1.7.11":"2021-08-10T12:28:04.591Z","1.7.12":"2021-08-11T14:13:54.487Z","1.7.14":"2021-08-12T14:59:40.931Z","1.7.15":"2021-08-12T15:28:51.925Z","1.7.16":"2021-08-31T15:59:31.160Z","1.7.17":"2021-08-31T16:19:06.472Z","1.7.19":"2021-09-01T09:59:32.961Z","1.7.20":"2021-09-01T10:24:46.736Z","1.8.0":"2021-09-07T14:48:45.634Z","1.9.0":"2021-09-20T14:17:56.240Z","1.9.1":"2021-10-11T15:14:53.846Z","1.10.0":"2021-10-27T11:17:10.044Z","1.10.1":"2021-11-08T17:28:32.993Z","1.11.0":"2021-11-17T13:50:15.488Z","1.11.1":"2021-11-22T08:31:28.766Z","1.11.2":"2021-11-24T15:58:36.006Z","1.11.3":"2021-11-29T09:32:31.648Z","1.7.21":"2021-11-29T09:42:58.285Z","1.11.4":"2021-11-30T15:29:20.375Z","1.12.0":"2021-11-30T16:31:41.396Z","1.12.1":"2021-12-02T15:20:37.374Z","1.12.2":"2021-12-16T18:24:57.744Z","1.13.0":"2022-01-20T15:48:21.725Z","1.13.1":"2022-03-14T13:37:06.866Z","1.13.2":"2022-03-17T10:48:35.957Z","1.13.3":"2022-03-28T10:24:19.180Z","1.13.4":"2022-03-31T15:44:26.029Z","1.14.0":"2022-04-06T10:02:02.914Z","1.14.1":"2022-04-13T09:16:06.890Z","1.15.0":"2022-06-21T16:07:23.012Z","1.15.1":"2022-07-05T09:52:10.196Z","1.15.2":"2022-07-06T13:14:12.841Z","1.15.3":"2022-08-01T14:41:19.586Z","1.16.0":"2022-09-21T14:26:05.982Z","1.16.1":"2022-09-21T14:37:14.080Z","1.16.2":"2022-09-21T14:47:37.541Z","1.16.3":"2022-10-04T09:31:08.453Z","1.16.4":"2023-01-24T17:56:46.128Z","1.16.5":"2023-01-31T09:32:14.954Z","1.16.6":"2023-01-31T09:58:41.375Z","1.16.7":"2023-01-31T17:26:55.722Z","1.17.0":"2023-03-08T14:25:12.994Z","1.17.1":"2023-03-14T09:00:54.778Z","1.17.2":"2023-03-14T09:19:22.060Z","1.17.3":"2023-03-14T09:53:17.056Z","1.17.4":"2023-03-14T15:08:08.432Z","1.17.5":"2023-03-14T15:19:57.460Z","1.17.6":"2023-03-14T17:11:32.157Z","1.17.7":"2023-03-15T10:23:34.198Z","1.17.8":"2023-04-19T10:00:18.933Z","1.17.9":"2023-05-11T12:36:23.603Z","1.17.9-next":"2023-06-01T13:17:11.365Z","1.17.9-next.2":"2023-06-01T13:23:07.126Z","1.17.9-next.3":"2023-06-08T08:00:22.565Z","1.17.9-next.4":"2023-06-19T13:16:54.874Z","1.17.9-next.5":"2023-07-07T14:48:39.519Z","1.17.9-next.6":"2023-07-07T14:55:22.793Z","1.17.9-next.7":"2023-09-08T13:45:30.391Z","1.17.9-next.8":"2023-09-08T14:31:59.032Z","1.17.9-next.9":"2023-09-08T14:38:13.255Z","1.17.10-next.1":"2023-09-11T12:28:47.412Z","1.17.10":"2023-09-11T12:30:51.887Z","1.17.10-next.2":"2023-10-04T07:46:39.739Z","1.17.11-next.0":"2023-10-10T08:02:35.869Z","1.17.11":"2023-10-10T08:04:09.345Z","1.17.12-next.0":"2023-10-18T13:26:08.480Z","1.17.12-next.1":"2023-10-23T12:06:27.001Z","1.17.12-next.2":"2023-11-20T14:39:16.382Z","1.17.13-next.0":"2024-01-16T15:42:17.242Z","1.17.14":"2024-01-16T16:07:03.422Z","1.17.13-next.1":"2024-01-29T08:59:58.432Z","1.17.15":"2024-02-06T11:33:53.346Z","1.18.0":"2024-03-13T14:02:10.108Z"},"maintainers":[{"name":"makesenseorg","email":"digitale@makesense.org"}],"description":"[](https://www.npmjs.com/package/@makesenseorg/design-system) [](https://app.n","homepage":"https://makesense-design-system.netlify.com","repository":{"type":"git","url":"git+https://github.com/makesenseorg/makesense_design-system.git"},"author":{"name":"makesense","url":"makesense.org"},"license":"MIT","readme":"# Makesense design system\n\n[](https://www.npmjs.com/package/@makesenseorg/design-system)\n[](https://app.netlify.com/sites/makesense-design-system/deploys)\n\nThe makesense design system is build to make makesense design guidelines and Vue component available accross our multiple web applications.\n\nLiving styleguide demo: https://makesense-design-system.netlify.com\n## Table of content\n1. [Use in a Vue app](#vue)\n 1. [Install dependency](#vue-1)\n 2. [Import in the app](#vue-2)\n 3. [Change the theme colors](#vue-3)\n 4. [Import the styles and variables](#vue-4)\n 5. [Usage](#vue-5)\n2. [Use in a Nuxt app](#nuxt)\n 1. [Add as a dependency](#nuxt-1)\n 2. [Create a plugin](#c-2)\n 3. [Change the theme colors on client side](#nuxt-3)\n 4. [Import the styles and variables](#nuxt-4)\n 5. [Usage](#nuxt-5)\n3. [Contributing](#contributing)\n 1. [Developing](#developing)\n 2. [Testing](#testing)\n 2. [Building](#building)\n 2. [Publishing](#publishing)\n\n\n## Use in a Vue app \n\n### 1. Install dependency \n\n```\nnpm i @makesenseorg/design-system\n```\n\n### 2. Import in the app \n\nImport the design system in the app entry file (usually `index.js` or `main.js`)\n\n```js\nimport DesignSystem from '@makesenseorg/design-system'\nimport '@makesenseorg/design-system/dist/system.css'\n\nVue.use(DesignSystem);\n...\n```\n\n### 3. Change the theme colors \n\nJust below, load the app theme, to get all the colors related to your app. The theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nVue.prototype.$loadTheme('base')\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n### 4. Import the styles and variables \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file.\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n```js\n// globally inside vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n sass: {\n data: `@import \"@makesenseorg/design-system/dist/shared.scss\";`,\n },\n },\n },\n};\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \n\n```vue\n\n \n Hello world !\n
\n\n\n\n\n\n```\n\n\n## Use in a Nuxt app \n\n### 1. Add as a dependency \n\n```js\nnpm i @makesenseorg/design-system\n```\n\n### 2. Create a plugin \n\nAdd the plugin in `nuxt.config.js`.\n\n```js\nplugins: [\"~/plugins/design-system\"],\n```\n\nCreate the file `design-system.js` in `plugins` folder.\n\n```js\nimport Vue from \"vue\";\nimport DesignSystem from \"@makesenseorg/design-system\";\n\nVue.use(DesignSystem);\n...\n\n```\n\n### 3. Change the theme colors \nIn order to change the theme color, you can use the function `loadTheme`, in `plugins/design-system.js`. \nThe theme needs to exist in the design system. (list of available themes in `./src/tokens/themes`)\nThe default name is `base`.\n\n```js\n...\nif (process.client) {\n Vue.prototype.$loadTheme('jobs')\n}\n```\n\nYou can also change the theme using `this.$loadTheme(theme_name)` inside a view or a component.\n\n> **⚠️ Warning ⚠️**\n> It is important to only use `loadTheme` on the client side, as it would throw a `document is not defined` error on the server side.\n\n### 4. Import the global CSS styles \n\nIn order to have access to the design system variables and mixins, you need to import the `shared.scss` file either locally in each component, or once globally in the app.\nThe `system.css` file is a global file providing reset classes, fonts, and basic styling.\nThe `base.css` and `jobs.css` register the design tokens as CSS variables. It is important to load them here to prevent a jump on first client load.\n\nNote: You might need to run `npm install node-sass@4.14.1 sass-loader@7.1.0`\n\n#### 1. Install style-ressources \n\nIn order to load the styles globally, you need to install style-resources module\n\n```\nnpm install --save-dev @nuxtjs/style-resources\n```\n\n#### 2. Update nuxt.config.js \n\nIn `nuxt.config.js`, register the module and add the style files\n\n```js\ncss: [\n \"@makesenseorg/design-system/dist/system.css\",\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/base.css\",\n // you need to specify your theme here to make sure it's loaded on server side\n \"@makesenseorg/design-system/src/system/tokens/generated/themes/jobs.css\"\n ],\nmodules: [\n '@nuxtjs/style-resources',\n],\nstyleResources: {\n scss: [\n \"@makesenseorg/design-system/dist/shared.scss\",\n ],\n},\n```\n\n✨ **You're done! You can now use the components, mixins, scss variables.** ✨\n\n### 5. Usage \n\nIn your App or in your app components, use the design system components like so : \nYou can use atoms directly without importing them. However for layouts and molecules, you need to manually import and register the component\n\n```vue\n\n \n \n Hello world !\n \n Made by makesense\n
\n\n\n\n\n\n```\n\n## Contributing \n\n```\nnpm install\n```\n\n### 1. Developing \n\nCompiles and hot-reloads living styleguide\n\n```\nnpm run dev\n```\n\n### 2. Testing new components in a live playground \n\nCompiles design system and uses it in a nuxt app.\nBefore publishing new components, please test them in this playground app.\n\nThe first time you use the playground, run :\n\n```\nnpm run install-playground\n```\n\nWhen you want to test a component in the playground, run :\n\n```\nnpm run playground\n```\n\nNote: the command takes a while because it needs to build the system first in order to inject it as a dependency in the playground.\n\n### 3. Building \n\n#### Living styleguide \n\nCompiles living styleguide to `./docs`\n\n```\nnpm run build\n```\n\n#### Library \n\nCompiles design system as a library to `./dist`\n\n```\nnpm run build:system\n```\n\n### 4. Helper \n\n#### Serve living styleguide locally \n\nfor example to develop on another application with a newer version of the styleguide\n\n```\nnpm run serve\n```\n\n#### Lints and fixes files \n\n```\nnpm run lint\n```\n\n### 5. Publishing \n\nThe repo is automatically publish when the version is updated and pushed to master.\n\n#### Semantic versioning rules \n\n| Code status | Stage | Rule | Example version |\n| ----------------------------------------- | ------------- | ------------------------------------------------------------------ | --------------- |\n| First release | New product | Start with 1.0.0 | 1.0.0 |\n| Backward compatible bug fixes | Patch release | Increment the third digit | 1.0.1 |\n| Backward compatible new features | Minor release | Increment the middle digit and reset last digit to zero | 1.1.0 |\n| Changes that break backward compatibility | Major release | Increment the first digit and reset middle and last digits to zero | 2.0.0 |\n\n## Thanks\n\nThanks to CION design system for providing the design system boilerplate.\n\n## License\n\n[MIT License](./LICENSE) - Copyright (c) Makesense\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/makesenseorg/makesense_design-system/issues"}}