@gravityforms/design-tokens
Version:
Design tokens as PostCSS variables, media queries, and mixins for Gravity Forms development.
40 lines (39 loc) • 2.64 kB
JavaScript
module.exports = {
// Font Family
'--%project_name%-theme-font-family-base': 'var(--%project_name%-common-font-family-base)',
'--%project_name%-theme-font-family-icons': '"%project_name%-icons-orbital"',
// Font Weight
'--%project_name%-theme-font-weight-normal': 'var(--%project_name%-common-font-weight-normal)',
'--%project_name%-theme-font-weight-medium': 'var(--%project_name%-common-font-weight-medium)',
'--%project_name%-theme-font-weight-semibold': 'var(--%project_name%-common-font-weight-semibold)',
// Font Size
'--%project_name%-theme-font-size-2xs': '10px', // 0.625rem
'--%project_name%-theme-font-size-xs': '12px', // 0.75rem
'--%project_name%-theme-font-size-sm': '14px', // 0.875rem
'--%project_name%-theme-font-size-base': '16px', // 1rem
'--%project_name%-theme-font-size-md': '18px', // 1.125rem
'--%project_name%-theme-font-size-lg': '20px', // 1.25rem
'--%project_name%-theme-font-size-xl': '24px', // 1.5rem
'--%project_name%-theme-font-size-2xl': '30px', // 1.875rem
'--%project_name%-theme-font-size-3xl': '36px', // 2.25rem
'--%project_name%-theme-font-size-4xl': '46px', // 2.875rem
'--%project_name%-theme-font-size-5xl': '48px', // 3rem
'--%project_name%-theme-font-size-6xl': '60px', // 3.75rem
'--%project_name%-theme-font-size-7xl': '72px', // 4.5rem
// Line Height
'--%project_name%-theme-line-height-none': 'var(--%project_name%-common-line-height-none)',
'--%project_name%-theme-line-height-even': 'var(--%project_name%-common-line-height-even)',
'--%project_name%-theme-line-height-6xs': 'var(--%project_name%-common-line-height-6xs)',
'--%project_name%-theme-line-height-5xs': 'var(--%project_name%-common-line-height-5xs)',
'--%project_name%-theme-line-height-4xs': 'var(--%project_name%-common-line-height-4xs)',
'--%project_name%-theme-line-height-3xs': 'var(--%project_name%-common-line-height-3xs)',
'--%project_name%-theme-line-height-2xs': 'var(--%project_name%-common-line-height-2xs)',
'--%project_name%-theme-line-height-xs': 'var(--%project_name%-common-line-height-xs)',
'--%project_name%-theme-line-height-sm': 'var(--%project_name%-common-line-height-sm)',
'--%project_name%-theme-line-height-base': 'var(--%project_name%-common-line-height-base)',
'--%project_name%-theme-line-height-md': 'var(--%project_name%-common-line-height-md)',
'--%project_name%-theme-line-height-lg': 'var(--%project_name%-common-line-height-lg)',
// Letter Spacing
'--%project_name%-theme-letter-spacing-tight': 'var(--%project_name%-common-letter-spacing-tight)',
'--%project_name%-theme-letter-spacing-normal': 'var(--%project_name%-common-letter-spacing-normal)',
};