Typography

demo/content/Text.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import {
    Grid,
@@ -13,10 +12,6 @@ import {
 import style from '../style.less'
 
 export default class DemoContentText extends Component {
-   static propTypes = {
-      contents: PropTypes.array
-   }
-
    constructor(props) {
       super(props)
 
@@ -176,8 +171,10 @@ export default class DemoContentText extends Component {
                               <td>String</td>
                               <td>-</td>
                               <td>
-                                 <p>CSS color (e.g. #CCC)</p>
-                                 <p>Will be able to pass hex, rgba, or preset classes</p>
+                                 <p>
+                                    All css color values supported including hex,
+                                     rgba, or hsl (e.g. #CCC)
+                                 </p>
                               </td>
                            </tr>
                            <tr>

package.json

@@ -44,7 +44,8 @@
     "form-data": "2.1.2",
     "moment": "2.22.0",
     "react-files": "2.4.5",
-    "react-router-dom": "4.2.2"
+    "react-router-dom": "4.2.2",
+    "tinycolor2": "1.4.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.43",

src/components/OIO/defaults.js

@@ -9,58 +9,74 @@ export default {
          medium: '36px',
          small: '30px',
          tiny: '24px'
-      }
+      },
+      fontSize: '16px'
    },
    fontSizes: {
+      0.8: {
+         fontSize: '0.55rem',
+         lineHeight: '1.2'
+      },
+      0.9: {
+         fontSize: '0.6rem',
+         lineHeight: '1.2'
+      },
       1: {
-         fontSize: '10px',
-         lineHeight: '16px'
+         fontSize: '0.7rem',
+         lineHeight: '1.3'
       },
       2: {
-         fontSize: '12px',
-         lineHeight: '17px'
+         fontSize: '0.75rem',
+         lineHeight: '1.3'
       },
       3: {
-         fontSize: '14px',
-         lineHeight: '19px'
+         fontSize: '0.875rem',
+         lineHeight: '1.3'
       },
       4: {
-         fontSize: '16px',
-         lineHeight: '21px'
+         fontSize: '1rem',
+         lineHeight: '1.3'
       },
       5: {
-         fontSize: '19px',
-         lineHeight: '23px'
+         fontSize: '1.125rem',
+         lineHeight: '1.3'
       },
       6: {
-         fontSize: '24px',
-         lineHeight: '30px'
+         fontSize: '1.5rem',
+         lineHeight: '1.3'
       },
       7: {
-         fontSize: '30px',
-         lineHeight: '1.15em'
+         fontSize: '1.65rem',
+         lineHeight: '1.3'
       },
       8: {
-         fontSize: '36px',
-         lineHeight: '1.1em'
+         fontSize: '2rem',
+         lineHeight: '1.3'
       },
       9: {
-         fontSize: '42px',
-         lineHeight: '1.1em'
+         fontSize: '2.25rem',
+         lineHeight: '1.2'
       },
       10: {
-         fontSize: '51px',
-         lineHeight: '1em'
+         fontSize: '2.625rem',
+         lineHeight: '1.125'
       },
       11: {
-         fontSize: '60px',
-         lineHeight: '1em'
+         fontSize: '3rem',
+         lineHeight: '1.125'
       },
       12: {
-         fontSize: '78px',
-         lineHeight: '78px'
+         fontSize: '3.375rem',
+         lineHeight: '1.125'
       }
    },
+   fontWeights: {
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700'
+   },
    viewport: {
       breakpoints: {
          a: '0px',

src/components/OIO/index.js

@@ -11,7 +11,8 @@ export default class OIO extends Component {
       className: PropTypes.string,
       fontFamily: PropTypes.string,
       fontSizes: PropTypes.object,
-      primaryColor: PropTypes.string
+      primaryColor: PropTypes.string,
+      fontWeights: PropTypes.object
    }
 
    static defaultProps = {
@@ -28,6 +29,7 @@ export default class OIO extends Component {
       const OIOStyles = {
          fontFamily: this.props.fontFamily,
          fontSizes: this.props.fontSizes,
+         fontWeights: this.props.fontWeights,
          primaryColor: this.props.primaryColor
       }
 
@@ -41,6 +43,9 @@ export default class OIO extends Component {
          OIOStyles.fontFamily = this.props.fontFamily
       }
 
+      // Set Root Document font size (for font-sizes using rem units)
+      document.documentElement.setAttribute('style', `font-size: ${defaults.base.fontSize}`)
+
       return (
          <div
             className={classNames(style.OIO, this.props.className)}

src/components/Text/index.js

@@ -1,14 +1,29 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import classNames from 'classnames'
+import tinyColor from 'tinycolor2'
 import Button from '../Button'
 import ButtonGroup from '../ButtonGroup'
 import Textarea from '../Form/Textarea'
 import { getWindowSize, getAttributeForCurrentSize } from '../../utils/size'
 import style from './style.less'
-import colors from '../../foundation/colors.less'
+
+// Legacy Shades of Gray
+// TODO: This will be deprecated
+const legacyGrays = {
+   gray10: '#F5F5F5',
+   gray20: '#EEEEEE',
+   gray30: '#E0E0E0',
+   gray40: '#BDBDBD',
+   gray50: '#9E9E9E',
+   gray60: '#757575',
+   gray70: '#616161',
+   gray80: '#424242',
+   gray90: '#212121'
+}
 
 export default class Text extends Component {
+   /* eslint-disable */
    static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
@@ -24,10 +39,11 @@ export default class Text extends Component {
       editing: PropTypes.bool,
       fontFamily: PropTypes.string,
       letterSpacing: PropTypes.string,
-      size: PropTypes.string,
+      relativeSize: PropTypes.bool,
+      size: PropTypes.string.isRequired,
       style: PropTypes.object,
       uppercase: PropTypes.bool,
-      weight: PropTypes.string
+      weight: PropTypes.string.isRequired
    }
 
    static defaultProps = {
@@ -37,9 +53,11 @@ export default class Text extends Component {
       editorState: 'ready',
       editorShowEditButton: false,
       editing: false,
+      relativeSize: false,
       size: '3',
       weight: 'normal'
    }
+   /* eslint-enable */
 
    static contextTypes = {
       OIOStyles: PropTypes.object
@@ -180,30 +198,45 @@ export default class Text extends Component {
    // =====================================================
 
    render() {
-      const fontSize = getAttributeForCurrentSize(this.state.size, this.props.size)
+      const { color, fontFamily, letterSpacing, relativeSize, size, uppercase, weight } = this.props
+      const fontSize = getAttributeForCurrentSize(this.state.size, size)
       const textStyle = {
+         fontWeight: this.context.OIOStyles.fontWeights[weight],
          ...this.props.style,
          ...this.context.OIOStyles.fontSizes[fontSize]
       }
 
-      if (this.props.fontFamily) {
-         textStyle.fontFamily = this.props.fontFamily
+      if (relativeSize) {
+         textStyle.fontSize = `${parseFloat(textStyle.fontSize)}em`
+      }
+
+      if (fontFamily) {
+         textStyle.fontFamily = fontFamily
+      }
+
+      if (letterSpacing) {
+         textStyle.letterSpacing = letterSpacing
       }
 
-      if (this.props.letterSpacing) {
-         textStyle.letterSpacing = this.props.letterSpacing
+      if (uppercase) {
+         textStyle.textTransform = 'uppercase'
+      }
+
+      if (color) {
+         const legacyShadesOfGrayNames = Object.keys(legacyGrays)
+         const useLegacyColor = legacyShadesOfGrayNames.includes(color)
+
+         if (useLegacyColor) {
+            textStyle.color = legacyGrays[color]
+         } else {
+            textStyle.color = tinyColor(color).toRgbString()
+         }
       }
 
       const textClasses = [
-         style[this.props.weight],
-         colors[this.props.color],
          this.props.className
       ]
 
-      if (this.props.uppercase) {
-         textClasses.push(style.uppercase)
-      }
-
       const editing = this.props.editable && this.state.editing
       const editorValue = this.props.editable && this.props.editorValue
 

src/components/Text/style.less

@@ -1,5 +1,3 @@
-.uppercase { text-transform: uppercase; }
-
 .editContainer {
    word-wrap: break-word;
 }
@@ -14,13 +12,3 @@
    height: 35px;
    max-height: 350px;
 }
-
-//============================================================================
-// Font Weights
-//============================================================================
-
-.light    { font-weight: 300; }
-.normal   { font-weight: 400; }
-.medium   { font-weight: 500; }
-.semibold { font-weight: 600; }
-.bold     { font-weight: 700; }