aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
43 lines (42 loc) • 2.18 kB
JavaScript
module.exports = {
extend: {
colors: {
primary: 'var(--aura-color-semantic-primary)',
success: 'var(--aura-color-semantic-success)',
warning: 'var(--aura-color-semantic-warning)',
danger: 'var(--aura-color-semantic-danger)',
info: 'var(--aura-color-semantic-info)',
neutral: 'var(--aura-color-semantic-neutral)',
},
spacing: {
'0': 'var(--aura-space-0)',
'1': 'var(--aura-space-1)',
'2': 'var(--aura-space-2)',
'3': 'var(--aura-space-3)',
'4': 'var(--aura-space-4)',
'5': 'var(--aura-space-5)',
'6': 'var(--aura-space-6)',
'8': 'var(--aura-space-8)',
'10': 'var(--aura-space-10)',
'12': 'var(--aura-space-12)',
'16': 'var(--aura-space-16)',
},
borderRadius: {
'xs': 'var(--aura-radius-xs)',
'sm': 'var(--aura-radius-sm)',
'md': 'var(--aura-radius-md)',
'lg': 'var(--aura-radius-lg)',
'xl': 'var(--aura-radius-xl)',
'pill': 'var(--aura-radius-pill)',
},
fontSize: {
'display': ['var(--aura-type-display-font-size)', { lineHeight: 'var(--aura-type-display-line-height)', letterSpacing: 'var(--aura-type-display-tracking)' }],
'headline': ['var(--aura-type-headline-font-size)', { lineHeight: 'var(--aura-type-headline-line-height)', letterSpacing: 'var(--aura-type-headline-tracking)' }],
'title': ['var(--aura-type-title-font-size)', { lineHeight: 'var(--aura-type-title-line-height)', letterSpacing: 'var(--aura-type-title-tracking)' }],
'subtitle': ['var(--aura-type-subtitle-font-size)', { lineHeight: 'var(--aura-type-subtitle-line-height)', letterSpacing: 'var(--aura-type-subtitle-tracking)' }],
'body': ['var(--aura-type-body-font-size)', { lineHeight: 'var(--aura-type-body-line-height)', letterSpacing: 'var(--aura-type-body-tracking)' }],
'caption': ['var(--aura-type-caption-font-size)', { lineHeight: 'var(--aura-type-caption-line-height)', letterSpacing: 'var(--aura-type-caption-tracking)' }],
'label': ['var(--aura-type-label-font-size)', { lineHeight: 'var(--aura-type-label-line-height)', letterSpacing: 'var(--aura-type-label-tracking)' }],
},
},
};