Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
neutral: c.grey[50],
neutralLight: c.grey[30],
background: c.white,
accent: c.yellow[60],
light: c.purple[10],
lightActive: c.purple[20],
},
input: {
background: c.white,
backgroundFocus: c.white,
border: c.grey[30],
focusBorder: c.white,
focusBoxShadow: c.purple[60],
icon: c.grey[50],
iconFocus: c.grey[60],
placeholder: c.text.placeholder,
},
// new tokens
card: {
background: c.white,
color: c.grey[50],
header: c.black,
starterLabelBackground: c.teal[5],
starterLabelText: c.teal[70],
pluginLabelBackground: c.orange[5],
pluginLabelText: c.orange[90],
},
modal: {
background: c.white,
overlayBackground: hex2rgba(c.white, 0.95),
},
navigation: {
background: c.white,
// Primary brand color for links, buttons, etc.
primary: c.gatsby,
// A secondary brand color for alternative styling
secondary: c.purple[40],
// A contrast color for emphasizing UI
accent: c.orange[60],
// A faint color for backgrounds, borders, and accents that do not require high contrast with the background color
muted: c.grey[5],
// end Theme-UI required keys
banner: c.purple[70],
// gatsby-design-tokens has the following in colors.text,
// which conflicts with theme-ui's default color `text`
// making text.header and text.secondary available as
// `heading` and `textMuted` resolves that
heading: c.text.header, // text.header
textMuted: c.text.secondary, // text.secondary
// moved `text.placeholder` to `input.placeholder`
// ref. e.g. https://github.com/system-ui/theme-ui/blob/702c43e804046a94389e7a12a8bba4c4f436b14e/packages/presets/src/tailwind.js#L6
// transparent: `transparent`,
// expand `gatsby-design-tokens` defaults
code: {
...c.code,
// refactor names
background: c.code.bg,
backgroundInline: c.code.bgInline,
// modify token color values to comply to WCAG 2.0 AA standard contrast ratios
// changed
selector: `#b94185`,
keyword: `#096fb3`,
comment: `#527713`,
tag: `#137886`,