Configuration

type SVGCallback = (config?: import('svgo').Config) => import('svgo').Config;

export type IconConfig = {
  disabled?: boolean;
  nodeIds: string[];
  // custom format icon name
  iconName?: (nameFromFigma: string) => string;
  // custom filter icon callback. It allows skipping some unnecessary icons
  skipIcon?: (name: string) => boolean;
  exportPath: string;
  /**
   * for example:
   * exportPath: './test',
   * exportSubdir: 'sub',
   *
   * will download icons to dir ./test/svg/sub
   */
  exportSubdir?: string;
  // If the field is true, then the SVG sprite will be generated
  generateSprite: boolean;
  // If the field is true, then the file with icons' names as types will be created
  generateTypes: boolean;
  // If the field is true, then the extractor will only generate SVG sprite from local icons
  // else all available icons will be downloaded and the sprite will be generated from them
  localIcons?: boolean;
  // It allows changing svgo config if you need or disable at all
  // if this field is a function, then the function will be run before svgo optimization. And changed config from this function will be passed to svgo optimization
  // if this field is boolean and equals `false` then svgo optimization won't be run at all
  optimizeSvg?: false | SVGCallback;
};

export type Config = {
  // your Figma api access key
  apiKey: string;
  // Figma file id
  fileId: string;
  // path to json variables extracted from figma extension
  jsonVariablesPath: string;
  styles: {
    // The main path for exporting all requested data
    exportPath: string;

    /*
      It will parse returned name of colors or etc. and look for allowed themes at the start of names
      example: for allowedThemes: ['light','dark'] all returned names will be parsed by looking for 'light' or 'dark' at the start of name
      And if color name is 'light/text/text-900' then it will be transformed to 'text/text-900' and relate to the 'light' theme
      All others name which are not found by allowed themes will be overlooked.
     */
    allowedThemes?: string[];

    /**
     * It's used to map theme names from figma to custom names.
     * example:
     themesMappingOverrides: {
        solarized: 'dark-solarized',
       'raven-black': 'bbg',
     }

       *you can only path overridden values.
       *If you don't want to override any theme, you can just not pass this field.
    */
    themesMappingOverrides?: Record<string, string>;

    /**
      It's used like default variables inside generated CSS variables
     */
    defaultTheme?: string;
    /** by default all css variables prefixed with 'sh' for example: --sh-color-red */
    cssVariablesNs?: string;
    colors?: {
      disabled?: boolean;
      // custom key name
      keyName?: (name?: string) => string;
      // collections names from figma local variables
      collectionNames: string[];
      // group names in collection
      groupNames?: string[];
    };
    effects?: {
      disabled?: boolean;
      // custom key name
      keyName?: (name?: string) => string;
      // collections names from figma local variables
      collectionNames: string[];
      // group names in collection
      groupNames?: string[];
    };
    textStyles?: {
      disabled?: boolean;
      // custom key name
      keyName?: (nameFromFigma: string) => string;
      // collections names from figma local variables
      collectionNames: string[];
      // This field is to add extra styles with prefix screens
      addStylesWithPrefixScreen?: boolean;
    };
    responsive?: {
      disabled?: boolean;
      // collections names from figma local variables
      collectionNames: string[];
    };
  };

  // Configuration of icons can have more one setting
  icons: IconConfig | IconConfig[];
};

styles: {
  // ...
  effects: {
    disabled: true, // never generate effects
    collectionNames: ['effects'],
  },
},

optimizeSvg: config => ({
  ...config,
  // your changes
}),

export const ICONS = ['icon-one', 'icon-two'] as const;

export type IconsType = (typeof ICONS)[number];

- heading/h500 - bs => {fontSize: 12px}
- heading/h500 - sm => {fontSize: 14px}
- heading/h500 - md => {fontSize: 16px}
- heading/h500 - lg => {fontSize: 20px}

'heading/h500': {
  fontSize: '12px',
  '@media (min-width: 600px)': {
    fontSize: '14px',
  },
  '@media (min-width: 900px)': {
    fontSize: '16px',
  },
  '@media (min-width: 1200px)': {
    fontSize: '20px',
  },
},

export const fontFamily = {
  primary: "var(--sh-font-family-primary, 'Inter'), Arial, sans-serif", // used weights: 400, 500, 700
};

export const textVariants = { /* ... */ };

module.exports = {
  // ...
  styles: {
    exportPath: './theme',
    allowedThemes: ['light', 'dark', 'blue'],
    defaultTheme: 'blue',
    colors: {
      // ...
    },
  },
};

themesMappingOverrides: {
  solarized: 'dark-solarized',
},

[data-theme='solarized'],
[data-theme='dark-solarized'] {
  /* ... */
}

styles: {
  cssVariablesNs: 'acme', // -> --acme-bg100, --acme-dp100, ...
  // ...
},

colors: {
  collectionNames: ['color'],
  groupNames: ['primary', 'secondary'], // keep only primary/* and secondary/* variables
},
effects: {
  collectionNames: ['effects'],
  groupNames: ['shadow'], // keep only shadow/*, drop blur/* and backdrop-blur/*
},

export const DEFAULT_THEME = 'blue';

export const THEMES = ['light', 'dark', 'blue'] as const;

export type Theme = (typeof THEMES)[number];

export const colors = {
  'text-txt600': '#000000',
  'text-txt700': '#000000',
};

export const colors = {
  'text-txt600': '#ffffff',
  'text-txt700': '#ffffff',
};

export const colors = {
  'text-txt600': '#0000ff',
};

export const colors = {
  'text-txt600': '#0000ff', // it will be taken from the default theme if it is defined for a specific color
  'text-txt700': '',
};

export const colors = {
  'text-txt600': 'var(--sh-text-txt600,#0000ff)', // it will be taken from the default theme if it is defined for a specific color
  'text-txt700': "var(--sh-text-txt700,'')",
};

[data-theme='dark'] {
  --sh-text-txt600: #000000;
  --sh-text-txt700: #000000;
}

[data-theme='light'] {
  --sh-text-txt600: #ffffff;
  --sh-text-txt700: #ffffff;
}

[data-theme='blue'] {
  --sh-text-txt600: #0000ff;
}

/* from the blue theme due to it is the default theme */
:root {
  --sh-text-txt600: #0000ff;
  --sh-text-txt700: '';
}

export const effects = {
  boxShadow: {
    dp100: '0px 8px 24px rgba(65, 74, 92, 0.4)',
  },
  backdropBlur: {
    bb200: '10px',
  },
  blur: {
    b100: '2px',
  },
};

export const screens = { sm: '600px', md: '900px', lg: '1200px' };

export const responsiveVariants = {
  '.container-w': { /* css by media queries */ },
};