How to use @primer/primitives - 4 common examples
To help you get started, we’ve selected a few @primer/primitives 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.
feathericons / feathericons.com / src / gatsby-plugin-theme-ui / index.js View on Github 
import { colors } from '@primer/primitives'
export default {
useColorSchemeMediaQuery: true,
colors: {
primary: '#0066ff',
text: colors.gray[8],
background: colors.white,
muted: colors.gray[1],
border: colors.gray[3],
icon: colors.gray[4],
modes: {
dark: {
text: colors.white,
background: colors.gray[8],
muted: colors.gray[9],
border: colors.gray[7],
icon: colors.gray[4],
},
},
},
space: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96],
fonts: {import { colors } from '@primer/primitives'
export default {
useColorSchemeMediaQuery: true,
colors: {
primary: '#0066ff',
text: colors.gray[8],
background: colors.white,
muted: colors.gray[1],
border: colors.gray[3],
icon: colors.gray[4],
modes: {
dark: {
text: colors.white,
background: colors.gray[8],
muted: colors.gray[9],
border: colors.gray[7],
icon: colors.gray[4],
},
},
},
space: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96],
fonts: {
sansSerif:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',import { colors } from '@primer/primitives'
export default {
useColorSchemeMediaQuery: true,
colors: {
primary: '#0066ff',
text: colors.gray[8],
background: colors.white,
muted: colors.gray[1],
border: colors.gray[3],
icon: colors.gray[4],
modes: {
dark: {
text: colors.white,
background: colors.gray[8],
muted: colors.gray[9],
border: colors.gray[7],
icon: colors.gray[4],
},
},
},
space: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96],
fonts: {
sansSerif:import { colors } from '@primer/primitives'
export default {
useColorSchemeMediaQuery: true,
colors: {
primary: '#0066ff',
text: colors.gray[8],
background: colors.white,
muted: colors.gray[1],
border: colors.gray[3],
icon: colors.gray[4],
modes: {
dark: {
text: colors.white,
background: colors.gray[8],
muted: colors.gray[9],
border: colors.gray[7],
icon: colors.gray[4],
},
},
},
space: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96],
fonts: {
sansSerif:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
monospace:
'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
},
fontSizes: [12, 14, 16, 18, 20, 24, 32],
fontWeights: {@primer/primitives
Typography, spacing, and color primitives for Primer design system
