Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save abhishekbhardwaj/edf62514302eaca83077a1d3d71e916e to your computer and use it in GitHub Desktop.
Save abhishekbhardwaj/edf62514302eaca83077a1d3d71e916e to your computer and use it in GitHub Desktop.
Convert Tailwind Colors to PascalCase for ReactNative.
const _ = require('lodash');
// https://tailwindcss.com/docs/colors/#default-color-palette
let colors = {
'transparent': 'transparent',
'black': '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
'red': '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
'orange': '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
'yellow': '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
'green': '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
'teal': '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
'blue': '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
'indigo': '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
'purple': '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
'pink': '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
};
let transformedColors = {};
Object.keys(colors).forEach(i => {
transformedColors[_.upperFirst(_.camelCase(i))] = colors[i];
});
console.log(transformedColors);
@abhishekbhardwaj
Copy link
Author

{ Transparent: 'transparent',
  Black: '#22292f',
  GreyDarkest: '#3d4852',
  GreyDarker: '#606f7b',
  GreyDark: '#8795a1',
  Grey: '#b8c2cc',
  GreyLight: '#dae1e7',
  GreyLighter: '#f1f5f8',
  GreyLightest: '#f8fafc',
  White: '#ffffff',
  RedDarkest: '#3b0d0c',
  RedDarker: '#621b18',
  RedDark: '#cc1f1a',
  Red: '#e3342f',
  RedLight: '#ef5753',
  RedLighter: '#f9acaa',
  RedLightest: '#fcebea',
  OrangeDarkest: '#462a16',
  OrangeDarker: '#613b1f',
  OrangeDark: '#de751f',
  Orange: '#f6993f',
  OrangeLight: '#faad63',
  OrangeLighter: '#fcd9b6',
  OrangeLightest: '#fff5eb',
  YellowDarkest: '#453411',
  YellowDarker: '#684f1d',
  YellowDark: '#f2d024',
  Yellow: '#ffed4a',
  YellowLight: '#fff382',
  YellowLighter: '#fff9c2',
  YellowLightest: '#fcfbeb',
  GreenDarkest: '#0f2f21',
  GreenDarker: '#1a4731',
  GreenDark: '#1f9d55',
  Green: '#38c172',
  GreenLight: '#51d88a',
  GreenLighter: '#a2f5bf',
  GreenLightest: '#e3fcec',
  TealDarkest: '#0d3331',
  TealDarker: '#20504f',
  TealDark: '#38a89d',
  Teal: '#4dc0b5',
  TealLight: '#64d5ca',
  TealLighter: '#a0f0ed',
  TealLightest: '#e8fffe',
  BlueDarkest: '#12283a',
  BlueDarker: '#1c3d5a',
  BlueDark: '#2779bd',
  Blue: '#3490dc',
  BlueLight: '#6cb2eb',
  BlueLighter: '#bcdefa',
  BlueLightest: '#eff8ff',
  IndigoDarkest: '#191e38',
  IndigoDarker: '#2f365f',
  IndigoDark: '#5661b3',
  Indigo: '#6574cd',
  IndigoLight: '#7886d7',
  IndigoLighter: '#b2b7ff',
  IndigoLightest: '#e6e8ff',
  PurpleDarkest: '#21183c',
  PurpleDarker: '#382b5f',
  PurpleDark: '#794acf',
  Purple: '#9561e2',
  PurpleLight: '#a779e9',
  PurpleLighter: '#d6bbfc',
  PurpleLightest: '#f3ebff',
  PinkDarkest: '#451225',
  PinkDarker: '#6f213f',
  PinkDark: '#eb5286',
  Pink: '#f66d9b',
  PinkLight: '#fa7ea8',
  PinkLighter: '#ffbbca',
  PinkLightest: '#ffebef' }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment