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.

github feathericons / feathericons.com / src / gatsby-plugin-theme-ui / index.js View on Github external
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: {
github feathericons / feathericons.com / src / gatsby-plugin-theme-ui / index.js View on Github external
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"',
github feathericons / feathericons.com / src / gatsby-plugin-theme-ui / index.js View on Github external
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:
github feathericons / feathericons.com / src / gatsby-plugin-theme-ui / index.js View on Github external
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

MIT
Latest version published 6 days ago

Package Health Score

90 / 100
Full package analysis