1. Advisor
  2. @xstyled/styled-components
  3. functions
  4. @xstyled/styled-components.th.color
View all @xstyled/styled-components analysis

How to use the @xstyled/styled-components.th.color function in @xstyled/styled-components

To help you get started, we’ve selected a few @xstyled/styled-components 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 gregberge / gregberge.com / src / components / Theme.js View on Github external
light300: '#535988',
        light200: '#445B8D',
        light100: '#363B65',
        darker: th.color('white'),
        accent: '#b54909',
      },
      'monochrome-light': {
        lighter: th.color('black'),
        light100: th.color('gray900'),
        light200: th.color('gray800'),
        light300: th.color('gray700'),
        light400: th.color('gray600'),
        light500: th.color('gray500'),
        light600: th.color('gray400'),
        light700: th.color('gray300'),
        light800: th.color('gray200'),
        light900: th.color('gray100'),
        light950: th.color('gray100'),
        darker: th.color('white'),
        accent: th.color('black'),
      },
      'monochrome-dark': {
        lighter: th.color('white'),
        light100: th.color('gray100'),
        light200: th.color('gray200'),
        light300: th.color('gray300'),
        light400: th.color('gray400'),
        light500: th.color('gray500'),
        light600: th.color('gray600'),
        light700: th.color('gray700'),
        light800: th.color('gray800'),
        light900: th.color('gray900'),
github gregberge / gregberge.com / src / components / Theme.js View on Github external
black: '#000',
    white: '#fff',

    gray100: '#f8f9fa',
    gray200: '#e9ecef',
    gray300: '#dee2e6',
    gray400: '#ced4da',
    gray500: '#adb5bd',
    gray600: '#6c757d',
    gray700: '#495057',
    gray800: '#343a40',
    gray900: '#212529',

    danger: '#FF5252',

    lighter: th.color('white'),
    light100: '#DCDFF7',
    light300: '#ADB2DC',
    light400: '#6870AF',
    light500: '#343C7A',
    light700: '#2e3360',
    light800: '#282E5E',
    light900: '#22264A',
    light950: '#1f2347',
    'navbar-bg': p => transparentize(0.1, th.color('light900')(p)),
    shadow: p => transparentize(0.75, th.color('accent')(p)),
    'shadow-dark': p => transparentize(0.75, th.color('darker')(p)),
    darker: th.color('black'),
    accent: '#FFCC68',

    modes: {
      light: {
github gregberge / gregberge.com / src / components / Theme.js View on Github external
accent: '#b54909',
      },
      'monochrome-light': {
        lighter: th.color('black'),
        light100: th.color('gray900'),
        light200: th.color('gray800'),
        light300: th.color('gray700'),
        light400: th.color('gray600'),
        light500: th.color('gray500'),
        light600: th.color('gray400'),
        light700: th.color('gray300'),
        light800: th.color('gray200'),
        light900: th.color('gray100'),
        light950: th.color('gray100'),
        darker: th.color('white'),
        accent: th.color('black'),
      },
      'monochrome-dark': {
        lighter: th.color('white'),
        light100: th.color('gray100'),
        light200: th.color('gray200'),
        light300: th.color('gray300'),
        light400: th.color('gray400'),
        light500: th.color('gray500'),
        light600: th.color('gray600'),
        light700: th.color('gray700'),
        light800: th.color('gray800'),
        light900: th.color('gray900'),
        light950: th.color('gray900'),
        darker: th.color('black'),
        accent: th.color('white'),
      },
github gregberge / gregberge.com / src / components / Theme.js View on Github external
light200: '#445B8D',
        light100: '#363B65',
        darker: th.color('white'),
        accent: '#b54909',
      },
      'monochrome-light': {
        lighter: th.color('black'),
        light100: th.color('gray900'),
        light200: th.color('gray800'),
        light300: th.color('gray700'),
        light400: th.color('gray600'),
        light500: th.color('gray500'),
        light600: th.color('gray400'),
        light700: th.color('gray300'),
        light800: th.color('gray200'),
        light900: th.color('gray100'),
        light950: th.color('gray100'),
        darker: th.color('white'),
        accent: th.color('black'),
      },
      'monochrome-dark': {
        lighter: th.color('white'),
        light100: th.color('gray100'),
        light200: th.color('gray200'),
        light300: th.color('gray300'),
        light400: th.color('gray400'),
        light500: th.color('gray500'),
        light600: th.color('gray600'),
        light700: th.color('gray700'),
        light800: th.color('gray800'),
        light900: th.color('gray900'),
        light950: th.color('gray900'),
github gregberge / gregberge.com / src / components / Theme.js View on Github external
light900: '#EFEFF5',
        light800: '#F5F5F5',
        light700: '#E6E8F5',
        light500: '#D8D8E5',
        light400: '#4b547d',
        light300: '#535988',
        light200: '#445B8D',
        light100: '#363B65',
        darker: th.color('white'),
        accent: '#b54909',
      },
      'monochrome-light': {
        lighter: th.color('black'),
        light100: th.color('gray900'),
        light200: th.color('gray800'),
        light300: th.color('gray700'),
        light400: th.color('gray600'),
        light500: th.color('gray500'),
        light600: th.color('gray400'),
        light700: th.color('gray300'),
        light800: th.color('gray200'),
        light900: th.color('gray100'),
        light950: th.color('gray100'),
        darker: th.color('white'),
        accent: th.color('black'),
      },
      'monochrome-dark': {
        lighter: th.color('white'),
        light100: th.color('gray100'),
        light200: th.color('gray200'),
        light300: th.color('gray300'),
        light400: th.color('gray400'),
github gregberge / gregberge.com / src / components / Theme.js View on Github external
light500: th.color('gray500'),
        light600: th.color('gray600'),
        light700: th.color('gray700'),
        light800: th.color('gray800'),
        light900: th.color('gray900'),
        light950: th.color('gray900'),
        darker: th.color('black'),
        accent: th.color('white'),
      },
    },

    bg: th.color('light900'),
    text: th.color('light300'),
    'card-border': th.color('light800'),
    'card-border-hover': th.color('light700'),
    'card-gradient-light': th.color('light700'),
    'card-gradient-dark': th.color('light950'),
  },
  transitions: {
    base: '.2s ease-in-out all',
  },
  transformers: {
    ...rpxTransformers,
  },
}

export function ThemeInitializer({ children }) {
  return (
    
      {children}
    
  )
github gregberge / gregberge.com / src / components / Theme.js View on Github external
    'navbar-bg': p => transparentize(0.1, th.color('light900')(p)),
    shadow: p => transparentize(0.75, th.color('accent')(p)),
github gregberge / gregberge.com / src / components / Theme.js View on Github external
danger: '#FF5252',

    lighter: th.color('white'),
    light100: '#DCDFF7',
    light300: '#ADB2DC',
    light400: '#6870AF',
    light500: '#343C7A',
    light700: '#2e3360',
    light800: '#282E5E',
    light900: '#22264A',
    light950: '#1f2347',
    'navbar-bg': p => transparentize(0.1, th.color('light900')(p)),
    shadow: p => transparentize(0.75, th.color('accent')(p)),
    'shadow-dark': p => transparentize(0.75, th.color('darker')(p)),
    darker: th.color('black'),
    accent: '#FFCC68',

    modes: {
      light: {
        lighter: '#100F4D',
        light950: '#F6F6F6',
        light900: '#EFEFF5',
        light800: '#F5F5F5',
        light700: '#E6E8F5',
        light500: '#D8D8E5',
        light400: '#4b547d',
        light300: '#535988',
        light200: '#445B8D',
        light100: '#363B65',
        darker: th.color('white'),
        accent: '#b54909',
github gregberge / gregberge.com / src / components / Theme.js View on Github external
light: {
        lighter: '#100F4D',
        light950: '#F6F6F6',
        light900: '#EFEFF5',
        light800: '#F5F5F5',
        light700: '#E6E8F5',
        light500: '#D8D8E5',
        light400: '#4b547d',
        light300: '#535988',
        light200: '#445B8D',
        light100: '#363B65',
        darker: th.color('white'),
        accent: '#b54909',
      },
      'monochrome-light': {
        lighter: th.color('black'),
        light100: th.color('gray900'),
        light200: th.color('gray800'),
        light300: th.color('gray700'),
        light400: th.color('gray600'),
        light500: th.color('gray500'),
        light600: th.color('gray400'),
        light700: th.color('gray300'),
        light800: th.color('gray200'),
        light900: th.color('gray100'),
        light950: th.color('gray100'),
        darker: th.color('white'),
        accent: th.color('black'),
      },
      'monochrome-dark': {
        lighter: th.color('white'),
        light100: th.color('gray100'),
github gregberge / gregberge.com / src / components / Theme.js View on Github external
    glow: p => `${th.color('shadow')(p)} 0 0 0 ${th.space(1)(p)}`,
    soft: p => `0 ${th.px(2)(p)} ${th.px(6)(p)} 0 rgba(0, 0, 0, 0.1)`,

@xstyled/styled-components

A utility-first CSS-in-JS framework built for React (styled-components bindings).

GitHub
MIT
Latest version published 1 year ago

Package Health Score

60 / 100
Full package analysis

Popular @xstyled/styled-components functions

Similar packages