Merge pull request #842 from primer/color-util-tweaks

Color utility table tweaks

Author: shawnbot

docs/color-system.js

@@ -2,8 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import chroma from 'chroma-js'
 import styled from 'styled-components'
-import {Box, StyledOcticon, Text} from '@primer/components'
-import {Zap} from '@githubprimer/octicons-react'
+import {Box, Text} from '@primer/components'
 import {colors, getPaletteByName} from './color-variables'
 import Table from './Table'
 
@@ -60,7 +59,7 @@ export function PaletteTableFragment(props) {
 }
 
 PaletteTable.defaultProps = {
-  columns: ['alias', 'className', 'variable', 'value'],
+  columns: ['alias', 'variable', 'value'],
   hasHeader: true
 }
 
@@ -105,12 +104,12 @@ PaletteCell.propTypes = {
 PaletteCell.Alias = ({aliases, type, ...rest}) =>
   aliases && aliases[type] ? (
     <PaletteCell.Smart type={type} {...rest}>
-      <StyledOcticon icon={Zap} mr={2} />
       <Var>.{aliases[type]}</Var>
     </PaletteCell.Smart>
   ) : (
     <td />
   )
+
 PaletteCell.Alias.propTypes = {
   aliases: PropTypes.object.isRequired,
   type: PropTypes.string.isRequired
@@ -128,6 +127,7 @@ PaletteCell.Smart = ({type, ...rest}) => {
       return <PaletteCell.Background {...rest} />
   }
 }
+
 PaletteCell.Smart.propTypes = {
   type: PropTypes.string.isRequired
 }
@@ -154,6 +154,7 @@ PaletteValue.PrefixedClass = ({prefix, slug}) => (
     .{prefix}-{slug}
   </Var>
 )
+
 PaletteValue.PrefixedClass.propTypes = {
   prefix: PropTypes.string.isRequired,
   slug: PropTypes.string.isRequired
@@ -200,7 +201,7 @@ export const Var = styled(Text).attrs({
 `
 
 export const PaletteHeading = ({indicatorColor, children, ...rest}) => (
-  <Text as="th" fontWeight="bold" {...rest} style={{borderBottom: `2px solid ${colors.black} !important`}}>
+  <Text as="th" fontWeight="bold" {...rest}>
     <Box pt={3}>{children}</Box>
   </Text>
 )

pages/css/support/color-system.md

@@ -42,7 +42,7 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../../docs/color-syste
         <StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
       </Flex>
       <PaletteTable
-        columns={['variable', 'value' /*, 'className' */]}
+        columns={['variable', 'value']}
         values={[{variable: name, value, slug: name}].concat(values)}
         hasHeader={false}
         cellPadding="8px 16px" />

pages/css/utilities/borders.md

@@ -231,4 +231,4 @@ You can adjust border widths on all sides or each side individually with respons
     'variable',
     'value'
   ]}
-  borderSpacing="0 4px" />
+  style={{borderSpacing: '0 4px'}} />

pages/css/utilities/colors.md

@@ -11,14 +11,14 @@ import {palettes, allColors} from '../../../docs/color-variables'
 import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../../docs/color-system'
 const textColumns = [
   {title: 'Alias', Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />},
-  {title: 'Class', Cell: props => <PaletteCell.Text {...props} style={{borderBottom: props.aliases.text ? `1px solid ${props.value} !important` : null}} />, Value: PaletteValue.PrefixedClass},
+  // {title: 'Class', Cell: props => <PaletteCell.Text {...props} style={{borderBottom: props.aliases.text ? `1px solid ${props.value} !important` : null}} />, Value: PaletteValue.PrefixedClass},
   'variable',
   {title: 'Value', Cell: PaletteCell.Background,  Value: PaletteValue.Value},
 ]
 
 Use color utilities to apply color to the background of elements, text, and borders.
 
-# Table of contents
+## Table of Contents
 
 
 ## Background colors
@@ -29,7 +29,7 @@ Background colors are most commonly used for filling large blocks of content or
 
 <PaletteTable>
   {palettes.map(({name, title, value}) => (
-    <PaletteTableFragment name={name} type="bg" key={name}>
+    <PaletteTableFragment name={name} type="bg" sparse key={name}>
       <tr>
         <PaletteHeading indicatorColor={value} colSpan="4">
           {title}
@@ -133,7 +133,7 @@ You can set the color inheritance on an element by using the `text-inherit` clas
 
 <PaletteTable columns={textColumns}>
   {palettes.map(({name, title, value}) => (
-    <PaletteTableFragment name={name} type="text" prefix="color" columns={textColumns}>
+    <PaletteTableFragment name={name} type="text" sparse prefix="color" columns={textColumns}>
       <tr>
         <PaletteHeading indicatorColor={value} colSpan="4">
           {title}