@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
103 lines • 4.22 kB
JavaScript
export const colors = {
background: {
default: 'var(--color-background-default)',
'default-hover': 'var(--color-background-default-hover)',
'default-pressed': 'var(--color-background-default-pressed)',
alternative: 'var(--color-background-alternative)',
'alternative-hover': 'var(--color-background-alternative-hover)',
'alternative-pressed': 'var(--color-background-alternative-pressed)',
section: 'var(--color-background-section)',
subsection: 'var(--color-background-subsection)',
muted: 'var(--color-background-muted)',
'muted-hover': 'var(--color-background-muted-hover)',
'muted-pressed': 'var(--color-background-muted-pressed)',
hover: 'var(--color-background-hover)',
pressed: 'var(--color-background-pressed)',
},
text: {
default: 'var(--color-text-default)',
alternative: 'var(--color-text-alternative)',
muted: 'var(--color-text-muted)',
},
border: {
default: 'var(--color-border-default)',
muted: 'var(--color-border-muted)',
},
icon: {
default: 'var(--color-icon-default)',
'default-hover': 'var(--color-icon-default-hover)',
'default-pressed': 'var(--color-icon-default-pressed)',
alternative: 'var(--color-icon-alternative)',
muted: 'var(--color-icon-muted)',
inverse: 'var(--color-icon-inverse)',
},
overlay: {
default: 'var(--color-overlay-default)',
alternative: 'var(--color-overlay-alternative)',
inverse: 'var(--color-overlay-inverse)',
},
primary: {
default: 'var(--color-primary-default)',
'default-hover': 'var(--color-primary-default-hover)',
'default-pressed': 'var(--color-primary-default-pressed)',
alternative: 'var(--color-primary-alternative)',
muted: 'var(--color-primary-muted)',
inverse: 'var(--color-primary-inverse)',
'muted-hover': 'var(--color-primary-muted-hover)',
'muted-pressed': 'var(--color-primary-muted-pressed)',
},
error: {
default: 'var(--color-error-default)',
'default-hover': 'var(--color-error-default-hover)',
'default-pressed': 'var(--color-error-default-pressed)',
alternative: 'var(--color-error-alternative)',
muted: 'var(--color-error-muted)',
inverse: 'var(--color-error-inverse)',
'muted-hover': 'var(--color-error-muted-hover)',
'muted-pressed': 'var(--color-error-muted-pressed)',
},
warning: {
default: 'var(--color-warning-default)',
'default-hover': 'var(--color-warning-default-hover)',
'default-pressed': 'var(--color-warning-default-pressed)',
muted: 'var(--color-warning-muted)',
inverse: 'var(--color-warning-inverse)',
'muted-hover': 'var(--color-warning-muted-hover)',
'muted-pressed': 'var(--color-warning-muted-pressed)',
},
success: {
default: 'var(--color-success-default)',
'default-hover': 'var(--color-success-default-hover)',
'default-pressed': 'var(--color-success-default-pressed)',
muted: 'var(--color-success-muted)',
inverse: 'var(--color-success-inverse)',
'muted-hover': 'var(--color-success-muted-hover)',
'muted-pressed': 'var(--color-success-muted-pressed)',
},
info: {
default: 'var(--color-info-default)',
muted: 'var(--color-info-muted)',
inverse: 'var(--color-info-inverse)',
},
accent01: {
light: 'var(--color-accent01-light)',
normal: 'var(--color-accent01-normal)',
dark: 'var(--color-accent01-dark)',
},
accent02: {
light: 'var(--color-accent02-light)',
normal: 'var(--color-accent02-normal)',
dark: 'var(--color-accent02-dark)',
},
accent03: {
light: 'var(--color-accent03-light)',
normal: 'var(--color-accent03-normal)',
dark: 'var(--color-accent03-dark)',
},
accent04: {
light: 'var(--color-accent04-light)',
normal: 'var(--color-accent04-normal)',
dark: 'var(--color-accent04-dark)',
},
};
//# sourceMappingURL=colors.mjs.map