How to use the @lskjs/theme/getTheme function in @lskjs/theme
To help you get started, we’ve selected a few @lskjs/theme examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
lskjs / ux / packages / dashboard / src / atoms / ModalHelp / ModalHelp.styles.js View on Github 
background-color: ${p => getTheme(p.theme, 'colors.darkerBackground')};case 'info':
return css`
background-color: ${getTheme(p.theme, 'colors.info')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'success':
return css`
background-color: ${getTheme(p.theme, 'colors.success')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'warning':
return css`
background-color: ${getTheme(p.theme, 'colors.warning')};
color: ${getTheme(p.theme, 'colors.main')};`;
case 'danger':
return css`
background-color: ${getTheme(p.theme, 'colors.danger')};
color: ${getTheme(p.theme, 'colors.white')};`;
default:
return '';
}
}}
`;const warningBaseTheme = ({ theme }) => css`
color: ${getTheme(theme, 'colors.main')};
background-color: ${getTheme(theme, 'colors.lighterGray')};
&:hover {
color: ${getTheme(theme, 'colors.white')};
background-color: ${getTheme(theme, 'colors.warning')};
}
&:focus {
color: ${getTheme(theme, 'colors.white')};
background-color: ${getTheme(theme, 'colors.darkerWarning')};
}
&:active {
color: ${getTheme(theme, 'colors.white')};
background-color: ${getTheme(theme, 'colors.warning')};
}
`; color: ${p => getTheme(p.theme, 'colors.white')};
`;${p => (p.checked && `
background-color: ${getTheme(p.theme, 'colors.primary')};
${Handler} {
margin-left: auto;
}
`)}
`; background-color: ${p => getTheme(p.theme, 'colors.darkerBackground')};
height: ${p => p.height}; font-family: ${p => getTheme(p.theme, 'fontFamily')};
`;case 'primary':
return css`
background-color: ${getTheme(p.theme, 'colors.primary')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'info':
return css`
background-color: ${getTheme(p.theme, 'colors.info')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'success':
return css`
background-color: ${getTheme(p.theme, 'colors.success')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'warning':
return css`
background-color: ${getTheme(p.theme, 'colors.warning')};
color: ${getTheme(p.theme, 'colors.main')};`;
case 'danger':
return css`
background-color: ${getTheme(p.theme, 'colors.danger')};
color: ${getTheme(p.theme, 'colors.white')};`;
default:
return '';
}
}}
`;${(p) => {
switch (p.paint) {
case 'light':
return css`
background-color: ${getTheme(p.theme, 'colors.lightGray')};
color: ${getTheme(p.theme, 'colors.main')};`;
case 'dark':
return css`
background-color: ${getTheme(p.theme, 'colors.black')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'primary':
return css`
background-color: ${getTheme(p.theme, 'colors.primary')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'info':
return css`
background-color: ${getTheme(p.theme, 'colors.info')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'success':
return css`
background-color: ${getTheme(p.theme, 'colors.success')};
color: ${getTheme(p.theme, 'colors.white')};`;
case 'warning':
return css`
background-color: ${getTheme(p.theme, 'colors.warning')}; font-family: ${p => getTheme(p.theme, 'fontFamily')};
margin: 0;
