taro-material
Version:
Mini Program components that implement Google's Material Design.
180 lines (178 loc) • 6.16 kB
JavaScript
const theme = {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
palette: {
common: {
black: '#000',
white: '#fff',
type: 'light'
},
inherit: {
light: 'inherit',
main: 'inherit',
dark: 'inherit',
contrastText: 'inherit'
},
default: {
light: '#fafafa',
main: '#eeeeee',
dark: '#212121',
contrastText: 'rgba(0, 0, 0, 0.87)'
},
primary: {
light: '#4dabf5',
main: '#2196f3',
dark: '#1769aa',
contrastText: '#fff'
},
secondary: {
light: '#ff4081',
main: '#f50057',
dark: '#c51162',
contrastText: '#fff'
},
error: {
light: '#e57373',
main: '#f44336',
dark: '#d32f2f',
contrastText: '#fff'
},
progress: {
light: '#ffac33',
main: '#ff9800',
dark: '#b26a00',
contrastText: '#fff'
},
warning: {
light: '#ff784e',
main: '#ff5722',
dark: '#b23c17',
contrastText: '#fff'
},
success: {
light: '#6fbf73',
main: '#4caf50',
dark: '#357a38',
contrastText: '#fff'
},
grey: {
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
A100: '#d5d5d5',
A200: '#aaaaaa',
A400: '#303030',
A700: '#616161',
contrastThreshold: 3,
tonalOffset: 0.2
},
text: {
primary: 'rgba(0, 0, 0, 0.87)',
secondary: 'rgba(0, 0, 0, 0.54)',
disabled: 'rgba(0, 0, 0, 0.38)',
hint: 'rgba(0, 0, 0, 0.38)',
divider: 'rgba(0, 0, 0, 0.12)',
primary2: 'rgba(255, 255, 255, 0.87)',
secondary2: 'rgba(255, 255, 255, 0.54)',
disabled2: 'rgba(255, 255, 255, 0.38)',
hint2: 'rgba(255, 255, 255, 0.38)',
divider2: 'rgba(255, 255, 255, 0.12)'
},
background: {
paper: '#fff',
default: '#fafafa'
},
action: {
active: 'rgba(0, 0, 0, 0.54)',
hover: 'rgba(0, 0, 0, 0.08)',
hoverOpacity: 0.08,
selected: 'rgba(0, 0, 0, 0.14)',
disabled: 'rgba(0, 0, 0, 0.26)',
disabledBackground: 'rgba(0, 0, 0, 0.12)'
}
},
shadows: {
0: 'none',
1: '0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12)',
2: '0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
3: '0px 1px 8px 0px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 3px 3px -2px rgba(0, 0, 0, 0.12)',
4: '0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)',
5: '0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12)',
6: '0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)',
7: '0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0, 0, 0, 0.12)',
8: '0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
9: '0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0, 0, 0, 0.12)',
10: '0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12)',
11: '0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0, 0, 0, 0.12)',
12: '0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12)',
13: '0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0, 0, 0, 0.12)',
14: '0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0, 0, 0, 0.12)',
15: '0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0, 0, 0, 0.12)',
16: '0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12)',
17: '0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0, 0, 0, 0.12)',
18: '0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0, 0, 0, 0.12)',
19: '0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0, 0, 0, 0.12)',
20: '0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0, 0, 0, 0.12)',
21: '0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0, 0, 0, 0.12)',
22: '0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0, 0, 0, 0.12)',
23: '0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0, 0, 0, 0.12)',
24: '0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12)'
},
typography: {
fontWeight: {
light: 300,
regular: 400,
medium: 500
},
fontSize: 32,
fontFamily: "'Roboto', 'NotoSansCJKsc', 'Helvetica', 'Arial', sans-serif"
},
spacing: {
unit: 8
},
shape: {
borderRadius: 4
},
transitions: {
easing: {
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
},
duration: {
shortest: 150,
shorter: 200,
short: 250,
standard: 300,
complex: 375,
enteringScreen: 225,
leavingScreen: 195
}
},
zIndex: {
watermark: 0,
divider: 100,
mobileStepper: 1000,
backTop: 1050,
dropdown: 1060,
toolBar: 1080,
appBar: 1100,
affix: 1120,
drawer: 1200,
modal: 1300,
curtain: 1350,
snackbar: 1400,
tooltip: 1500
}
};
export default theme;