remove capitalize util

components/BackgroundSelect.js

@@ -5,7 +5,7 @@ import ColorPicker from './ColorPicker'
 import Button from './Button'
 import Popout, { managePopout } from './Popout'
 import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
-import { capitalize, stringifyRGBA } from '../lib/util'
+import { stringifyRGBA } from '../lib/util'
 
 function validateColor(str) {
   if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) {
@@ -67,10 +67,10 @@ class BackgroundSelect extends React.PureComponent {
                 role="button"
                 tabIndex={0}
                 key={tab}
-                className={`picker-tab ${mode === tab ? 'active' : ''}`}
+                className={`picker-tab capitalize ${mode === tab ? 'active' : ''}`}
                 onClick={this.selectTab.bind(null, tab)}
               >
-                {capitalize(tab)}
+                {tab}
               </div>
             ))}
           </div>

components/Themes/ThemeCreate.js

@@ -6,7 +6,7 @@ import ListSetting from '../ListSetting'
 import Popout from '../Popout'
 import ColorPicker from '../ColorPicker'
 import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
-import { capitalize, stringifyRGBA, generateId } from '../../lib/util'
+import { stringifyRGBA, generateId } from '../../lib/util'
 
 const colorPickerStyle = {
   backgroundColor: COLORS.BLACK,
@@ -19,7 +19,7 @@ const colorPresets = []
 const HighlightPicker = ({ title, onChange, color }) => (
   <div className="color-picker-container">
     <div className="color-picker-header">
-      <span>{title}</span>
+      <span className="capitalize">{title}</span>
     </div>
     <ColorPicker
       color={color}
@@ -87,7 +87,7 @@ const ThemeCreate = ({
             {({ name }) => <span>{name}</span>}
           </ListSetting>
         </div>
-        <div className="theme-colors">
+        <div className="theme-colors capitalize">
           {HIGHLIGHT_KEYS.map(key => (
             <div className="field" key={key}>
               <Button
@@ -96,7 +96,7 @@ const ThemeCreate = ({
                 background={highlight === key ? COLORS.HOVER : COLORS.BLACK}
               >
                 <div className="row">
-                  <span>{capitalize(key)}</span>
+                  <span className="capitalize">{key}</span>
                   <span
                     className="color-square"
                     style={{
@@ -133,7 +133,7 @@ const ThemeCreate = ({
       </div>
       {highlight && (
         <HighlightPicker
-          title={capitalize(highlight)}
+          title={highlight}
           color={highlights[highlight]}
           onChange={({ rgb }) => updateHighlights({ [highlight]: stringifyRGBA(rgb) })}
         />
@@ -177,7 +177,6 @@ const ThemeCreate = ({
             display: flex;
             flex-wrap: wrap;
             border-top: 2px solid ${COLORS.SECONDARY};
-            text-transform: capitalize;
           }
 
           .theme-colors .field {

components/style/Reset.js

@@ -218,6 +218,10 @@ export default () => (
         display: flex;
       }
 
+      .capitalize {
+        text-transform: capitalize;
+      }
+
       /* include just until we have a keyboard navigation style system */
       [role='button']:focus {
         outline: none;

lib/util.js

@@ -97,8 +97,6 @@ export const formatCode = async code => {
 
 export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
 
-export const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
-
 export const generateId = () =>
   Math.random()
     .toString(36)