How to use the @theme-ui/color.tint function in @theme-ui/color
To help you get started, we’ve selected a few @theme-ui/color 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.
LekoArts / gatsby-themes / themes / gatsby-theme-minimal-blog / src / styles / code.ts View on Github 
import { tint } from "@theme-ui/color"
export default {
"[data-name='live-editor']": {
fontSize: 1,
"textarea, pre": {
padding: (t: any) => `${t.space[3]} !important`,
},
},
"[data-name='live-preview']": {
padding: (t: any) => `calc(${t.space[2]} + 10px) !important`,
backgroundColor: tint(`primary`, 0.7),
},
".prism-code": {
fontSize: 1,
padding: 3,
webkitOverflowScrolling: `touch`,
backgroundColor: `transparent`,
overflow: `initial`,
float: `left`,
minWidth: `100%`,
mb: 0,
'&[data-linenumber="false"]': {
".token-line": {
pl: 3,
},
},
},@theme-ui/color
Color manipulation utilities for Theme UI
