Modus Variables

This project provides a CSS sheet of variables for the Modus Design System, accessible via the modus-variables npm package.

Getting Started

1. Install the package:

   npm i --save-dev @trimble-oss/modus-variables copyfiles

2. Set up the postinstall script in your package.json:

   Create a postinstall script to copy the CSS file automatically. This will copy your CSS file to your public directory after running npm install. We recommend using copyfiles.

   {
     "name": "your-project-name",
     "version": "1.0.0",
     "scripts": {
       "postinstall": "copyfiles -f ./node_modules/@trimble-oss/modus-variables/css/modus-variables.css ./public"
     },
     "dependencies": {
       "@trimble-oss/modus-variables": "^1.0.0",
       "copyfiles": "^2.4.1"
     }
   }

3. Reference the CSS file in your HTML:

   Add the following line to reference the CSS file in your HTML file:

   <link rel="stylesheet" type="text/css" href="public/modus-variables.css">

4. Use the variables in your CSS:

   You can now use the Modus variables globally:

   .my-element {
     color: var(--col_trimble_blue);
   }