handoff-app 0.2.1 → 0.3.1

package/Changelog.md

@@ -6,6 +6,51 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.1] - 2023-04-03
+
+This release fixes two small bugs, one that throws an error on builds because
+of a missing type declaration in the config.
+
+### Bugfixes
+
+- Builds against 0.3.0 are failing because of a missing type. Effects is missing
+  from the return type of the DocumentObjects. This adds that type to fix.
+- RGBA Colors are listed on the foundations as percent instead of 255 values.
+  This changes the display values, without changing the generated tokens.
+
+## [0.3.0] - 2023-03-31
+
+This release creates base foundation tokens in the /exported directory. This
+is a major step forward allowing projects to use color, typography and effects as
+named tokens in projects in addition to component tokens.
+
+### Changes
+
+- Adds foundation token css and scss files so projects can reference colors,
+  typography and effects.
+  - Tokens are exported to the /exported folder
+  - Foundation token files follow the form - {type of foundation}.scss contains
+    the css vars and {type of foundation}\_vars.scss contains the scss variables
+  - Color tokens are either hex for solid colors or rgba for alpha channel colors
+  - Two color map arrays are provided $color-groups and $color-names
+  - Color tokens are in the form $color-{group}-{name}: {hex/rgba};
+  - Typography tokens support
+    - font-family
+    - font-size
+    - font-weight
+    - line-height
+    - letter-spacing
+    - paragraph-spacing
+  - One Typography map is provided $type-sizes
+  - Typography tokens are in the form $typography-{size}-{property}: {value}
+  - Effects are are currently limited to drop and inner shadows
+  - Effects include a map of effect names $effects
+  - Effects are in the form $effect-{name}: {shadow definition}
+
+### Bugfixes
+
+- Adds the proper sidebar menu icon for effects
+
 ## [0.2.1] - 2023-03-28
 
 This release fixes a small typo in the installer. The version in the installed

package/docs/foundations.md

@@ -13,7 +13,7 @@ menu:
     image: hero-colors
   - path: foundations/effects
     title: Effects
-    image: hero-colors
+    image: hero-effects
   - path: foundations/logo
     title: Logos
     image: react

package/figma-exporter/api/dist/figma-exporter-api.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var documentationObject = require('../../dist/documentation-object-22658761.cjs.dev.js');
+var documentationObject = require('../../dist/documentation-object-1ccc37b9.cjs.dev.js');
 require('lodash/isEqual');
 require('axios');
 require('archiver');

package/figma-exporter/api/dist/figma-exporter-api.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var documentationObject = require('../../dist/documentation-object-4f3b8be5.cjs.prod.js');
+var documentationObject = require('../../dist/documentation-object-d7872020.cjs.prod.js');
 require('lodash/isEqual');
 require('axios');
 require('archiver');

package/figma-exporter/dist/declarations/src/exporters/components/utils.d.ts

@@ -43,5 +43,6 @@ export declare function findChildNodeWithTypeAndName<Type extends FigmaTypes.Nod
 }> | null;
 export declare function getComponentNamePart(componentName: string, partKey: string): string | undefined;
 export declare const isValidTheme: (theme: string) => theme is "light" | "dark";
-export declare const isValidEffectType: (effect: string) => effect is "DROP_SHADOW";
+export declare const isValidEffectType: (effect: FigmaTypes.Effect['type']) => boolean;
+export declare const isShadowEffectType: (effect: FigmaTypes.Effect['type']) => boolean;
 export declare const normalizeNamePart: (namePart: string) => string;

package/figma-exporter/dist/declarations/src/exporters/design.d.ts

@@ -1,10 +1,7 @@
 import { ColorObject, EffectObject, TypographyObject } from '../types';
 declare const getFileDesignTokens: (fileId: string, accessToken: string) => Promise<{
     color: ColorObject[];
-    effect: EffectObject[];
     typography: TypographyObject[];
-} | {
-    color: never[];
-    typography: never[];
+    effect: EffectObject[];
 }>;
 export default getFileDesignTokens;

package/figma-exporter/dist/declarations/src/transformers/css/design/colors.d.ts

@@ -0,0 +1,2 @@
+import { ColorObject } from "../../../types";
+export default function transformColors(colors: ColorObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/css/design/effects.d.ts

@@ -0,0 +1,2 @@
+import { EffectObject } from "../../../types";
+export default function transformEffects(effects: EffectObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/css/design/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyObject } from "../../../types";
+export default function transformTypography(typography: TypographyObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/css/index.d.ts

@@ -1,6 +1,7 @@
 import { DocumentationObject } from '../../types';
 interface CssTransformerOutput {
     components: Record<keyof DocumentationObject['components'], string>;
+    design: Record<'colors' | 'typography' | 'effects', string>;
 }
 export default function cssTransformer(documentationObject: DocumentationObject): CssTransformerOutput;
 export {};

package/figma-exporter/dist/declarations/src/transformers/css/utils.d.ts

@@ -20,7 +20,6 @@ export declare const transformFigmaPaintToCssColor: (paint: FigmaTypes.Paint) =>
 export declare const transformFigmaTextAlignToCss: (textAlign: FigmaTypes.TypeStyle['textAlignHorizontal']) => string;
 export declare const transformFigmaTextDecorationToCss: (textDecoration: FigmaTypes.TypeStyle['textDecoration']) => string;
 export declare const transformFigmaTextCaseToCssTextTransform: (textCase: FigmaTypes.TypeStyle['textCase']) => string;
-export declare const transformFigmaEffectToCssBoxShadow: (effect: FigmaTypes.Effect) => string;
 export interface AbstractComponent {
     componentType?: string;
     /**

package/figma-exporter/dist/declarations/src/transformers/scss/design/colors.d.ts

@@ -0,0 +1,2 @@
+import { ColorObject } from "../../../types";
+export default function transformColors(colors: ColorObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/scss/design/effects.d.ts

@@ -0,0 +1,2 @@
+import { EffectObject } from "../../../types";
+export default function transformEffects(effects: EffectObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/scss/design/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyObject } from "../../../types";
+export default function transformTypography(typography: TypographyObject[]): string;

package/figma-exporter/dist/declarations/src/transformers/scss/index.d.ts

@@ -1,6 +1,7 @@
 import { DocumentationObject } from '../../types';
 interface ScssTransformerOutput {
     components: Record<keyof DocumentationObject['components'], string>;
+    design: Record<'colors' | 'typography' | 'effects', string>;
 }
 export default function scssTransformer(documentationObject: DocumentationObject): ScssTransformerOutput;
 export {};

package/figma-exporter/dist/declarations/src/types.d.ts

@@ -1,10 +1,12 @@
 import type { DocumentComponentsObject } from './exporters/components';
+import { Effect } from './figma/types';
 export interface ColorGroup {
     group: string;
     colors: ColorObject[];
 }
 export interface EffectObject {
     name: string;
+    machineName: string;
     group: string;
     effects: EffectParametersObject[];
 }
@@ -15,6 +17,7 @@ export interface ColorObject {
     hex: string;
     rgb: RGBObject;
     sass: string;
+    machineName: string;
 }
 export interface TypographyObject {
     name: string;
@@ -23,11 +26,8 @@ export interface TypographyObject {
     values: any;
 }
 export interface EffectParametersObject {
-    type: 'DROP_SHADOW';
-    visible: boolean;
-    color: RGBObject;
-    offset: OffsetObject;
-    radius: number;
+    type: Effect['type'];
+    value: string;
 }
 export interface RGBObject {
     r: number;
@@ -53,6 +53,7 @@ export interface DocumentationObject {
     design: {
         color: ColorObject[];
         typography: TypographyObject[];
+        effect: EffectObject[];
     };
     components: DocumentComponentsObject;
     assets: {

package/figma-exporter/dist/{documentation-object-22658761.cjs.dev.js → documentation-object-1ccc37b9.cjs.dev.js}

@@ -273,7 +273,10 @@ const isValidTheme = theme => {
   return ['light', 'dark'].includes(theme);
 };
 const isValidEffectType = effect => {
-  return ['DROP_SHADOW'].includes(effect);
+  return isShadowEffectType(effect);
+};
+const isShadowEffectType = effect => {
+  return ['DROP_SHADOW', 'INNER_SHADOW'].includes(effect);
 };
 const normalizeNamePart = namePart => {
   return namePart.replace(/[^a-z0-9]+/gi, '-').replace(/^-/g, '').replace(/-$/g, '').toLowerCase();
@@ -1873,12 +1876,12 @@ const transformFigmaEffectToCssBoxShadow = effect => {
   if (!visible) {
     return '';
   }
-  if (type === 'DROP_SHADOW' && color && offset) {
+  if (isShadowEffectType(type) && color && offset) {
     const {
       x,
       y
     } = offset;
-    return `${x}px ${y}px ${radius ?? 0}px ${spread ? spread + 'px ' : ''}${transformFigmaColorToCssColor(color)}`;
+    return `${x}px ${y}px ${radius ?? 0}px ${spread ? spread + 'px ' : ''}${transformFigmaColorToCssColor(color)}${type === 'INNER_SHADOW' ? ' inset' : ''}`;
   }
   return '';
 };
@@ -1937,6 +1940,9 @@ function figmaColorToHex(color) {
   return hex;
 }
 
+const toMachineName = name => {
+  return name.toLowerCase().replace(/[^a-z0-9\s\-]/gi, '').replace(/\s\-\s|\s+/gi, '-');
+};
 const fieldData = name => {
   let nameArray = name.split('/');
   const data = {
@@ -1945,12 +1951,12 @@ const fieldData = name => {
     group: ''
   };
   if (nameArray[1]) {
-    data.group = nameArray[0].toLowerCase();
+    data.group = toMachineName(nameArray[0]);
     data.name = nameArray[1];
-    data.machine_name = data.name.toLowerCase().replace(/[^a-z0-9]/gi, ' ').replaceAll('  ', ' ').replaceAll(' ', '-');
+    data.machine_name = toMachineName(data.name);
   } else {
     data.name = nameArray[0];
-    data.machine_name = data.name.toLowerCase().replace(/[^a-z0-9]/gi, ' ').replaceAll('  ', ' ').replaceAll(' ', '-');
+    data.machine_name = toMachineName(data.name);
   }
   return data;
 };
@@ -1994,13 +2000,11 @@ const getFileDesignTokens = async (fileId, accessToken) => {
         if (isArray(document.effects) && document.effects.length > 0) {
           effectsArray.push({
             name,
+            machineName: machine_name,
             group,
-            effects: document.effects.filter(effect => isValidEffectType(effect.type)).map(effect => ({
+            effects: document.effects.filter(effect => isValidEffectType(effect.type) && effect.visible).map(effect => ({
               type: effect.type,
-              visible: effect.visible,
-              color: effect.color,
-              offset: effect.offset,
-              radius: effect.radius
+              value: isShadowEffectType(effect.type) ? transformFigmaEffectToCssBoxShadow(effect) : ''
             }))
           });
         } else if (isArray(document.fills) && document.fills[0] && document.fills[0].type === 'SOLID' && document.fills[0].color) {
@@ -2011,7 +2015,8 @@ const getFileDesignTokens = async (fileId, accessToken) => {
             type: 'color',
             hex: figmaColorToHex(color),
             rgb: color,
-            sass: `$color-${group}-${machine_name}`
+            sass: `$color-${group}-${machine_name}`,
+            machineName: machine_name
           });
         }
       }
@@ -2036,7 +2041,7 @@ const getFileDesignTokens = async (fileId, accessToken) => {
         });
       }
     });
-    console.log(chalk__default["default"].green('Colors and Typography Exported'));
+    chalk__default["default"].green('Colors, Effects and Typography Exported');
     const data = {
       color: colorsArray,
       effect: effectsArray,

package/figma-exporter/dist/{documentation-object-4f3b8be5.cjs.prod.js → documentation-object-d7872020.cjs.prod.js}

@@ -273,7 +273,10 @@ const isValidTheme = theme => {
   return ['light', 'dark'].includes(theme);
 };
 const isValidEffectType = effect => {
-  return ['DROP_SHADOW'].includes(effect);
+  return isShadowEffectType(effect);
+};
+const isShadowEffectType = effect => {
+  return ['DROP_SHADOW', 'INNER_SHADOW'].includes(effect);
 };
 const normalizeNamePart = namePart => {
   return namePart.replace(/[^a-z0-9]+/gi, '-').replace(/^-/g, '').replace(/-$/g, '').toLowerCase();
@@ -1873,12 +1876,12 @@ const transformFigmaEffectToCssBoxShadow = effect => {
   if (!visible) {
     return '';
   }
-  if (type === 'DROP_SHADOW' && color && offset) {
+  if (isShadowEffectType(type) && color && offset) {
     const {
       x,
       y
     } = offset;
-    return `${x}px ${y}px ${radius ?? 0}px ${spread ? spread + 'px ' : ''}${transformFigmaColorToCssColor(color)}`;
+    return `${x}px ${y}px ${radius ?? 0}px ${spread ? spread + 'px ' : ''}${transformFigmaColorToCssColor(color)}${type === 'INNER_SHADOW' ? ' inset' : ''}`;
   }
   return '';
 };
@@ -1937,6 +1940,9 @@ function figmaColorToHex(color) {
   return hex;
 }
 
+const toMachineName = name => {
+  return name.toLowerCase().replace(/[^a-z0-9\s\-]/gi, '').replace(/\s\-\s|\s+/gi, '-');
+};
 const fieldData = name => {
   let nameArray = name.split('/');
   const data = {
@@ -1945,12 +1951,12 @@ const fieldData = name => {
     group: ''
   };
   if (nameArray[1]) {
-    data.group = nameArray[0].toLowerCase();
+    data.group = toMachineName(nameArray[0]);
     data.name = nameArray[1];
-    data.machine_name = data.name.toLowerCase().replace(/[^a-z0-9]/gi, ' ').replaceAll('  ', ' ').replaceAll(' ', '-');
+    data.machine_name = toMachineName(data.name);
   } else {
     data.name = nameArray[0];
-    data.machine_name = data.name.toLowerCase().replace(/[^a-z0-9]/gi, ' ').replaceAll('  ', ' ').replaceAll(' ', '-');
+    data.machine_name = toMachineName(data.name);
   }
   return data;
 };
@@ -1994,13 +2000,11 @@ const getFileDesignTokens = async (fileId, accessToken) => {
         if (isArray(document.effects) && document.effects.length > 0) {
           effectsArray.push({
             name,
+            machineName: machine_name,
             group,
-            effects: document.effects.filter(effect => isValidEffectType(effect.type)).map(effect => ({
+            effects: document.effects.filter(effect => isValidEffectType(effect.type) && effect.visible).map(effect => ({
               type: effect.type,
-              visible: effect.visible,
-              color: effect.color,
-              offset: effect.offset,
-              radius: effect.radius
+              value: isShadowEffectType(effect.type) ? transformFigmaEffectToCssBoxShadow(effect) : ''
             }))
           });
         } else if (isArray(document.fills) && document.fills[0] && document.fills[0].type === 'SOLID' && document.fills[0].color) {
@@ -2011,7 +2015,8 @@ const getFileDesignTokens = async (fileId, accessToken) => {
             type: 'color',
             hex: figmaColorToHex(color),
             rgb: color,
-            sass: `$color-${group}-${machine_name}`
+            sass: `$color-${group}-${machine_name}`,
+            machineName: machine_name
           });
         }
       }
@@ -2036,7 +2041,7 @@ const getFileDesignTokens = async (fileId, accessToken) => {
         });
       }
     });
-    console.log(chalk__default["default"].green('Colors and Typography Exported'));
+    chalk__default["default"].green('Colors, Effects and Typography Exported');
     const data = {
       color: colorsArray,
       effect: effectsArray,

package/figma-exporter/dist/figma-exporter.cjs.dev.js

@@ -4,7 +4,7 @@ require('dotenv/config');
 var path = require('path');
 var fs = require('fs-extra');
 var stream = require('node:stream');
-var documentationObject = require('./documentation-object-22658761.cjs.dev.js');
+var documentationObject = require('./documentation-object-1ccc37b9.cjs.dev.js');
 var capitalize = require('lodash/capitalize');
 var lodash = require('lodash');
 var Mustache = require('mustache');
@@ -4789,6 +4789,36 @@ const transformTooltipComponentTokensToScssVariables = ({
   };
 };
 
+function transformColors$1(colors) {
+  const stringBuilder = [];
+  colors.forEach(color => {
+    stringBuilder.push(`$color-${color.group}-${color.machineName}: ${color.hex};`);
+  });
+  return stringBuilder.join('\n');
+}
+
+function transformEffects$1(effects) {
+  const stringBuilder = [];
+  const validEffects = effects?.filter(effect => effect.effects && effect.effects.length > 0);
+  if (validEffects) {
+    validEffects.forEach(effect => {
+      stringBuilder.push(`$effect-${effect.group}-${effect.machineName}: ${effect.effects.map(effect => effect.value).join(', ') || 'none'};`);
+    });
+  }
+  return stringBuilder.join('\n');
+}
+
+function transformTypography$1(typography) {
+  const stringBuilder = [];
+  typography.forEach(type => {
+    stringBuilder.push([`$typography-${getTypeName$1(type)}-font-family: '${type.values.fontFamily}';`, `$typography-${getTypeName$1(type)}-font-size: ${type.values.fontSize}px;`, `$typography-${getTypeName$1(type)}-font-weight: ${type.values.fontWeight};`, `$typography-${getTypeName$1(type)}-line-height: ${(type.values.lineHeightPx / type.values.fontSize).toFixed(1)};`, `$typography-${getTypeName$1(type)}-letter-spacing: ${type.values.letterSpacing}px;`, `$typography-${getTypeName$1(type)}-paragraph-spacing: ${type.values.paragraphSpacing | 20}px;`].join('\n'));
+  });
+  return stringBuilder.join('\n');
+}
+function getTypeName$1(type) {
+  return type.group ? `${type.group}-${type.machine_name}` : `${type.machine_name}`;
+}
+
 function scssTransformer(documentationObject) {
   const components = {
     // Buttons
@@ -4820,8 +4850,14 @@ ${Object.entries(transformPaginationComponentTokensToScssVariables(pagination)).
     radios: documentationObject.components.radios.map(radio => `// ${capitalize__default["default"](radio.componentType === 'design' ? '' : radio.size)} pagination${radio.componentType === 'design' ? `, theme: ${capitalize__default["default"](radio.theme)}, state: ${capitalize__default["default"](radio.state)}` : ''}
 ${Object.entries(transformRadioComponentTokensToScssVariables(radio)).map(([variable, value]) => `${variable}: ${value.value};`).join('\n')}`).join('\n\n')
   };
+  const design = {
+    colors: transformColors$1(documentationObject.design.color),
+    typography: transformTypography$1(documentationObject.design.typography),
+    effects: transformEffects$1(documentationObject.design.effect)
+  };
   return {
-    components
+    components,
+    design
   };
 }
 
@@ -9324,6 +9360,43 @@ const transformTooltipComponentTokensToCssVariables = ({
   };
 };
 
+function transformColors(colors) {
+  const stringBuilder = [];
+  stringBuilder.push(`$color-groups: ( ${Array.from(new Set(colors.map(color => `"${color.group}"`))).join(', ')} );`);
+  stringBuilder.push(`$color-names: ( ${colors.map(color => `"${color.group}-${color.machineName}"`).join(', ')} );`);
+  stringBuilder.push(``);
+  colors.forEach(color => {
+    stringBuilder.push(`--color-${color.group}-${color.machineName}: ${color.hex};`);
+  });
+  return stringBuilder.join('\n');
+}
+
+function transformEffects(effects) {
+  const stringBuilder = [];
+  const validEffects = effects?.filter(effect => effect.effects && effect.effects.length > 0);
+  if (validEffects) {
+    stringBuilder.push(`$effects: ( ${validEffects.map(effect => `"${effect.group}-${effect.machineName}"`).join(', ')} );`);
+    stringBuilder.push(``);
+    validEffects.forEach(effect => {
+      stringBuilder.push(`--effect-${effect.group}-${effect.machineName}: ${effect.effects.map(effect => effect.value).join(', ') || 'none'};`);
+    });
+  }
+  return stringBuilder.join('\n');
+}
+
+function transformTypography(typography) {
+  const stringBuilder = [];
+  stringBuilder.push(`$type-sizes: ( ${typography.map(type => `"${getTypeName(type)}"`).join(', ')} );`);
+  stringBuilder.push(``);
+  typography.forEach(type => {
+    stringBuilder.push([`--typography-${getTypeName(type)}-font-family: '${type.values.fontFamily}';`, `--typography-${getTypeName(type)}-font-size: ${type.values.fontSize}px;`, `--typography-${getTypeName(type)}-font-weight: ${type.values.fontWeight};`, `--typography-${getTypeName(type)}-line-height: ${(type.values.lineHeightPx / type.values.fontSize).toFixed(1)};`, `--typography-${getTypeName(type)}-letter-spacing: ${type.values.letterSpacing}px;`, `--typography-${getTypeName(type)}-paragraph-spacing: ${type.values.paragraphSpacing | 20}px;`].join('\n'));
+  });
+  return stringBuilder.join('\n');
+}
+function getTypeName(type) {
+  return type.group ? `${type.group}-${type.machine_name}` : `${type.machine_name}`;
+}
+
 function cssTransformer(documentationObject) {
   const components = {
     // Buttons
@@ -9338,8 +9411,14 @@ function cssTransformer(documentationObject) {
     tooltips: transformTooltipComponentsToCssVariables(documentationObject.components.tooltips),
     radios: transformRadioComponentsToCssVariables(documentationObject.components.radios)
   };
+  const design = {
+    colors: transformColors(documentationObject.design.color),
+    typography: transformTypography(documentationObject.design.typography),
+    effects: transformEffects(documentationObject.design.effect)
+  };
   return {
-    components
+    components,
+    design
   };
 }
 
@@ -9444,7 +9523,7 @@ const buildPreview = async documentationObject => {
 const buildStyles = async documentationObject => {
   const cssFiles = cssTransformer(documentationObject);
   const scssFiles = scssTransformer(documentationObject);
-  await Promise.all([fs__namespace.ensureDir(variablesFilePath).then(() => Promise.all(Object.entries(cssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content))))]);
+  await Promise.all([fs__namespace.ensureDir(variablesFilePath).then(() => Promise.all(Object.entries(cssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(cssFiles.design).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.design).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content))))]);
 };
 /**
  * Run the entire pipeline

package/figma-exporter/dist/figma-exporter.cjs.prod.js

@@ -4,7 +4,7 @@ require('dotenv/config');
 var path = require('path');
 var fs = require('fs-extra');
 var stream = require('node:stream');
-var documentationObject = require('./documentation-object-4f3b8be5.cjs.prod.js');
+var documentationObject = require('./documentation-object-d7872020.cjs.prod.js');
 var capitalize = require('lodash/capitalize');
 var lodash = require('lodash');
 var Mustache = require('mustache');
@@ -4789,6 +4789,36 @@ const transformTooltipComponentTokensToScssVariables = ({
   };
 };
 
+function transformColors$1(colors) {
+  const stringBuilder = [];
+  colors.forEach(color => {
+    stringBuilder.push(`$color-${color.group}-${color.machineName}: ${color.hex};`);
+  });
+  return stringBuilder.join('\n');
+}
+
+function transformEffects$1(effects) {
+  const stringBuilder = [];
+  const validEffects = effects?.filter(effect => effect.effects && effect.effects.length > 0);
+  if (validEffects) {
+    validEffects.forEach(effect => {
+      stringBuilder.push(`$effect-${effect.group}-${effect.machineName}: ${effect.effects.map(effect => effect.value).join(', ') || 'none'};`);
+    });
+  }
+  return stringBuilder.join('\n');
+}
+
+function transformTypography$1(typography) {
+  const stringBuilder = [];
+  typography.forEach(type => {
+    stringBuilder.push([`$typography-${getTypeName$1(type)}-font-family: '${type.values.fontFamily}';`, `$typography-${getTypeName$1(type)}-font-size: ${type.values.fontSize}px;`, `$typography-${getTypeName$1(type)}-font-weight: ${type.values.fontWeight};`, `$typography-${getTypeName$1(type)}-line-height: ${(type.values.lineHeightPx / type.values.fontSize).toFixed(1)};`, `$typography-${getTypeName$1(type)}-letter-spacing: ${type.values.letterSpacing}px;`, `$typography-${getTypeName$1(type)}-paragraph-spacing: ${type.values.paragraphSpacing | 20}px;`].join('\n'));
+  });
+  return stringBuilder.join('\n');
+}
+function getTypeName$1(type) {
+  return type.group ? `${type.group}-${type.machine_name}` : `${type.machine_name}`;
+}
+
 function scssTransformer(documentationObject) {
   const components = {
     // Buttons
@@ -4820,8 +4850,14 @@ ${Object.entries(transformPaginationComponentTokensToScssVariables(pagination)).
     radios: documentationObject.components.radios.map(radio => `// ${capitalize__default["default"](radio.componentType === 'design' ? '' : radio.size)} pagination${radio.componentType === 'design' ? `, theme: ${capitalize__default["default"](radio.theme)}, state: ${capitalize__default["default"](radio.state)}` : ''}
 ${Object.entries(transformRadioComponentTokensToScssVariables(radio)).map(([variable, value]) => `${variable}: ${value.value};`).join('\n')}`).join('\n\n')
   };
+  const design = {
+    colors: transformColors$1(documentationObject.design.color),
+    typography: transformTypography$1(documentationObject.design.typography),
+    effects: transformEffects$1(documentationObject.design.effect)
+  };
   return {
-    components
+    components,
+    design
   };
 }
 
@@ -9324,6 +9360,43 @@ const transformTooltipComponentTokensToCssVariables = ({
   };
 };
 
+function transformColors(colors) {
+  const stringBuilder = [];
+  stringBuilder.push(`$color-groups: ( ${Array.from(new Set(colors.map(color => `"${color.group}"`))).join(', ')} );`);
+  stringBuilder.push(`$color-names: ( ${colors.map(color => `"${color.group}-${color.machineName}"`).join(', ')} );`);
+  stringBuilder.push(``);
+  colors.forEach(color => {
+    stringBuilder.push(`--color-${color.group}-${color.machineName}: ${color.hex};`);
+  });
+  return stringBuilder.join('\n');
+}
+
+function transformEffects(effects) {
+  const stringBuilder = [];
+  const validEffects = effects?.filter(effect => effect.effects && effect.effects.length > 0);
+  if (validEffects) {
+    stringBuilder.push(`$effects: ( ${validEffects.map(effect => `"${effect.group}-${effect.machineName}"`).join(', ')} );`);
+    stringBuilder.push(``);
+    validEffects.forEach(effect => {
+      stringBuilder.push(`--effect-${effect.group}-${effect.machineName}: ${effect.effects.map(effect => effect.value).join(', ') || 'none'};`);
+    });
+  }
+  return stringBuilder.join('\n');
+}
+
+function transformTypography(typography) {
+  const stringBuilder = [];
+  stringBuilder.push(`$type-sizes: ( ${typography.map(type => `"${getTypeName(type)}"`).join(', ')} );`);
+  stringBuilder.push(``);
+  typography.forEach(type => {
+    stringBuilder.push([`--typography-${getTypeName(type)}-font-family: '${type.values.fontFamily}';`, `--typography-${getTypeName(type)}-font-size: ${type.values.fontSize}px;`, `--typography-${getTypeName(type)}-font-weight: ${type.values.fontWeight};`, `--typography-${getTypeName(type)}-line-height: ${(type.values.lineHeightPx / type.values.fontSize).toFixed(1)};`, `--typography-${getTypeName(type)}-letter-spacing: ${type.values.letterSpacing}px;`, `--typography-${getTypeName(type)}-paragraph-spacing: ${type.values.paragraphSpacing | 20}px;`].join('\n'));
+  });
+  return stringBuilder.join('\n');
+}
+function getTypeName(type) {
+  return type.group ? `${type.group}-${type.machine_name}` : `${type.machine_name}`;
+}
+
 function cssTransformer(documentationObject) {
   const components = {
     // Buttons
@@ -9338,8 +9411,14 @@ function cssTransformer(documentationObject) {
     tooltips: transformTooltipComponentsToCssVariables(documentationObject.components.tooltips),
     radios: transformRadioComponentsToCssVariables(documentationObject.components.radios)
   };
+  const design = {
+    colors: transformColors(documentationObject.design.color),
+    typography: transformTypography(documentationObject.design.typography),
+    effects: transformEffects(documentationObject.design.effect)
+  };
   return {
-    components
+    components,
+    design
   };
 }
 
@@ -9444,7 +9523,7 @@ const buildPreview = async documentationObject => {
 const buildStyles = async documentationObject => {
   const cssFiles = cssTransformer(documentationObject);
   const scssFiles = scssTransformer(documentationObject);
-  await Promise.all([fs__namespace.ensureDir(variablesFilePath).then(() => Promise.all(Object.entries(cssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content))))]);
+  await Promise.all([fs__namespace.ensureDir(variablesFilePath).then(() => Promise.all(Object.entries(cssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(cssFiles.design).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.components).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content)))).then(() => Promise.all(Object.entries(scssFiles.design).map(([name, content]) => fs__namespace.writeFile(`${variablesFilePath}/${name}_vars.scss`, content))))]);
 };
 /**
  * Run the entire pipeline

package/figma-exporter/src/exporters/components/utils.ts

@@ -73,8 +73,12 @@ export const isValidTheme = (theme: string): theme is 'light' | 'dark' => {
   return ['light', 'dark'].includes(theme);
 };
 
-export const isValidEffectType = (effect: string): effect is 'DROP_SHADOW' => {
-  return ['DROP_SHADOW'].includes(effect);
+export const isValidEffectType = (effect: FigmaTypes.Effect['type']): boolean => {
+  return isShadowEffectType(effect);
+}
+
+export const isShadowEffectType = (effect: FigmaTypes.Effect['type']): boolean => {
+  return ['DROP_SHADOW', 'INNER_SHADOW'].includes(effect);
 }
 
 export const normalizeNamePart = (namePart: string) => {