Add setting option to exclude mode from token value

* new setting to allow to only preserve mode in token name but exclude it from token value
* add documentation in README.md
* extend Checkbox component to ember Info component inline to the checkbox label
* update jest moduleMapper to resolve "@src"

Author: Omar Adobati

README.md

@@ -315,7 +315,12 @@ You can define any additional prefix via this option, e.g `*`. This can be helpf
 
 ### Reference mode in variables
 
-In the output JSON generated by the variables, the mode names are included. You can configure whether to include these mode names in the output JSON or not. By default, the mode names are included.
+![Design Tokens plugin mode export settings](/_resources/settings_mode.png)
+
+In the output JSON generated by the variables, the mode names are included. You can configure whether to include these mode names in the output JSON or not.  
+By default, the mode names are included in both the token names and the token values. You can turn off this behavior by disabling the "Enable/Disable mode referencing" checkbox.
+If you wish to keep the mode in the token names, but not in the token values, you can disable the first option and enable "Avoid mode in token value".
+This last options is disabled when the first one is enabled.
 
 ### Aliases (Standard format only)
 

_resources/_archive/settings.png

@@ -26,6 +26,11 @@
     "version": "npm run set-version && npm run build && git add --all"
   },
   "author": "Lukas Oppermann <[email protected]> (https://vea.re)",
+  "contributors": [
+    {
+      "name": "Omar Adobati <[email protected]> (http://github.com/0m4r)"
+    }
+  ],
   "license": "MIT",
   "devDependencies": {
     "@ctrl/tinycolor": "^3.4.0",
@@ -141,7 +146,8 @@
       "**/tests/unit/!(skip.)*.test.[jt]s?(x)"
     ],
     "moduleNameMapper": {
-      "^@config/(.*)$": "<rootDir>/src/config/$1"
+      "^@config/(.*)$": "<rootDir>/src/config/$1",
+      "^@src/(.*)$": "<rootDir>/src/$1"
     }
   },
   "dependencies": {

_resources/settings.png

@@ -21,6 +21,7 @@ export const defaultSettings: Settings = {
   keyInName: false,
   prefixInName: true,
   modeReference: true,
+  modeInTokenName: true,
   prefix: {
     color: 'color',
     gradient: 'gradient',

_resources/settings_mode.png

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css'
 import * as React from 'react'
+import { Info } from './Info'
 
 const style = css`
 &.checkbox {
@@ -139,6 +140,10 @@ type props = {
     value: boolean,
     event: React.ChangeEvent<HTMLInputElement>
   ) => void;
+  info?: {
+    width: number,
+    label: string
+  }
 }
 
 export const Checkbox = ({
@@ -149,7 +154,8 @@ export const Checkbox = ({
   label,
   defaultValue,
   checked,
-  onChange
+  onChange,
+  info,
 }: props) => {
   let inputConfig: any = {
     id: id || `${type}--${(Math.random() * 100000000).toFixed(0)}`
@@ -192,6 +198,9 @@ export const Checkbox = ({
       />
       <label className={`${type}__label`} htmlFor={inputConfig.id}>
         {label}
+        {info && info.label && 
+          <Info width={info.width} label={info.label} />
+        }
       </label>
     </div>
   )

dist/plugin.js

@@ -230,11 +230,9 @@ export const GeneralSettings = () => {
         <div>
           <Title size="small" weight="bold">
             Reference mode in variables
-            <Info
-              width={240}
-              label="If disabled, the exported json will not include the mode of variables."
-            />
+
           </Title>
+          
           <Checkbox
             label="Enable/disable mode referencing"
             type="switch"
@@ -244,6 +242,25 @@ export const GeneralSettings = () => {
                 draft.modeReference = value;
               })
             }
+            info={{
+               width: 240,
+              label:"If disabled, the exported json will not include the mode of variables, nor in the token name, nor in the token value"
+            }}
+          />
+          <Checkbox
+            label="Avoid mode referencing in token values"
+            type="switch"
+            checked={settings.modeInTokenName}
+            isDisabled={!settings.modeReference}
+            onChange={(value) =>
+              updateSettings((draft) => {
+                draft.modeInTokenName = value;
+              })
+            }
+            info={{
+              width: 240,
+              label:"If enabled, the exported json will not include the mode of variables in the token value."
+            }}
           />
         </div>
       </div>

dist/ui.html

@@ -77,14 +77,14 @@ export const getVariables = (figma: PluginAPI, settings: Settings) => {
       // return each mode value as a separate variable
       return Object.entries(variable.valuesByMode).map(([id, value]) => {
         // Only add mode if there's more than one
-        const addMode = settings.modeReference && modes.length > 1
+        const addMode = modes.length > 1 && (settings.modeInTokenName || settings.modeReference)
         return {
           ...extractVariable(
             variable,
             value,
             modes.find(({ modeId }) => modeId === id)
           ),
-          // name is contstructed from collection, mode and variable name
+          // name is constructed from collection, mode and variable name
 
           name: addMode
             ? `${collection}/${

dist/ui.js

@@ -36,6 +36,7 @@ const baseSettings = {
   keyInName: false,
   prefixInName: true,
   modeReference: true,
+  modeInTokenName: true,
   prefix: {
     color: 'color',
     gradient: 'gradient',

package.json

@@ -27,6 +27,7 @@ export type Settings = {
   keyInName: boolean,
   prefixInName: boolean,
   modeReference: boolean,
+  modeInTokenName: boolean,
   prefix: {
     color: string,
     gradient: string,