feat(many): add data visualization colors, refactor theme code

docs/getting-started/theming-components.md

@@ -57,7 +57,7 @@ InstUI's color palette is the same for every theme. The numbers in the color nam
 ---
 type: example
 ---
-<ThemeColors colors={canvas.colors.primitives}></ThemeColors>
+<ThemeColors colors={canvas.colors.primitives} label=""></ThemeColors>
 ```
 
 Every theme in InstUI is built using these colors. Ideally users should never interact directly with this palette, here it's only displayed only for reference.

docs/guides/accessing-the-dom.md

@@ -1,7 +1,7 @@
 ---
 title: Accessing the DOM
 category: Guides
-order: 6
+order: 4
 ---
 
 ## Accessing the DOM

docs/guides/color-system.md

@@ -0,0 +1,49 @@
+---
+title: Color System
+category: Guides
+order: 5
+---
+
+## Colors
+
+Colors are divided into two main technical groups: primitive and semantic colors. Primitive colors store the pure hex values. The primitive colors are the building blocks of the semantic colors. Examples of semantic colors: ui, contrasts, dataVisualization.
+
+### Primitives
+
+These are here for reference only, usually not needed for InstUI development. Available from the themes and from `@instructure/ui-themes`
+
+```jsx
+---
+type: example
+---
+<ThemeColors colors={canvas.colors.primitives} label=""></ThemeColors>
+```
+
+### Additional Primitives
+
+These are here for reference only, usually not needed for InstUI development. Available from `@instructure/ui-themes`
+
+```jsx
+---
+type: example
+---
+<ThemeColors colors={additionalPrimitives} label=""></ThemeColors>
+```
+
+### Data visualization
+
+The color names show their hue value and their contrast value on a white background. They don't tell how to use them or for what data they can be applied to. Each hue has 4 primary and 5 secondary colors.
+
+- The data visualization color palette is for data representation only. Like graphs, chars and plots.
+- These are solid colors and can not be used for creating gradients.
+- First you have to use all 4 of the primary colors of a hue, then you can use the 5 secondary ones.
+- Use them on a white background
+
+Available from `@instructure/ui-themes`
+
+```jsx
+---
+type: example
+---
+<ColorTable colors={dataVisualization} colorNames={additionalPrimitives}></ColorTable>
+```

docs/guides/focus-management.md

@@ -1,7 +1,7 @@
 ---
 title: Focus Management
 category: Guides
-order: 5
+order: 3
 ---
 
 ## The Focus Management Problem

docs/guides/using-theme-overrides.md

@@ -1,7 +1,7 @@
 ---
 title: Using theme overrides
 category: Guides
-order: 4
+order: 2
 ---
 
 ## Using theme overrides
@@ -40,7 +40,7 @@ InstUI leverages the [ThemeRegistry](/#ThemeRegistry) package to achieve global
 type: code
 ---
 // app/init sets the global theme
-import { canvas } from '@instructure/ui-themes'
+import canvas from '@instructure/ui-themes'
 
 canvas.use()
 ```

packages/__docs__/globals.js

@@ -48,6 +48,10 @@ import avatarPortrait from './buildScripts/samplemedia/avatarPortrait.jpg'
 import placeholderImage from './buildScripts/samplemedia/placeholder-image'
 // eslint-disable-next-line no-restricted-imports
 import ThemeColors from './src/ThemeColors'
+// eslint-disable-next-line no-restricted-imports
+import ColorTable from './src/ColorTable'
+
+import { additionalPrimitives, dataVisualization } from '@instructure/ui-themes'
 
 const lorem = new LoremIpsum({
   sentencesPerParagraph: {
@@ -81,7 +85,10 @@ const globals = {
   useEffect,
   useState,
   useRef,
-  ThemeColors
+  additionalPrimitives,
+  dataVisualization,
+  ThemeColors,
+  ColorTable
 }
 
 Object.keys(globals).forEach((key) => {

packages/__docs__/src/ColorTable/index.tsx

@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** @jsx jsx */
+import { Component } from 'react'
+import { jsx } from '@instructure/emotion'
+
+import { Heading } from '../Heading'
+import { Table } from '@instructure/ui-table'
+import { View } from '@instructure/ui-view'
+import { ColorSwatch } from '../ColorSwatch'
+import { ColorTableProps } from './props'
+
+class ColorTable extends Component<ColorTableProps> {
+  renderRows() {
+    const colorMap = Object.keys(this.props.colorNames).reduce((acc, color) => {
+      const hex = this.props.colorNames[color]
+      return { ...acc, [hex]: color }
+    }, {})
+
+    return Object.keys(this.props.colors).map((key) => (
+      <Table.Row key={key}>
+        <Table.Cell>
+          <code>{key}</code>
+        </Table.Cell>
+        <Table.Cell>
+          <View margin="0 xx-small 0 0">
+            <ColorSwatch color={this.props.colors[key]} />
+          </View>
+          <code>
+            {colorMap[this.props.colors[key]]}{' '}
+            <span css={{ font: '#334451', fontSize: '0.875rem' }}>
+              ({this.props.colors[key]})
+            </span>
+          </code>
+        </Table.Cell>
+      </Table.Row>
+    ))
+  }
+
+  render() {
+    const headingElement = 'h3'
+    const headingLevel = 'h2'
+    const margin = 'small none large'
+    const padding = 'small'
+    const label = 'name' + 'variables'
+    return (
+      <View key={label} as="div" padding={'none'}>
+        <Heading as={headingElement} level={headingLevel}></Heading>
+        <View
+          as="div"
+          background="secondary"
+          padding={padding}
+          margin={margin}
+          borderRadius="medium"
+        >
+          <Table caption={label} layout="fixed">
+            <Table.Head>
+              <Table.Row>
+                <Table.ColHeader id="Name" key="Name">
+                  Name
+                </Table.ColHeader>
+                <Table.ColHeader id="Value" key="value">
+                  Value
+                </Table.ColHeader>
+              </Table.Row>
+            </Table.Head>
+            <Table.Body>{this.renderRows()}</Table.Body>
+          </Table>
+        </View>
+      </View>
+    )
+  }
+}
+
+export default ColorTable
+export { ColorTable }

packages/ui-theme-tokens/src/common/colors/index.ts → packages/__docs__/src/ColorTable/props.ts

@@ -21,11 +21,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import type { PropValidators } from '@instructure/shared-types'
+import PropTypes from 'prop-types'
 
-import primitives from './primitves'
+type ColorTableOwnProps = {
+  colors: any
+  colorNames: any
+}
+
+type PropKeys = keyof ColorTableOwnProps
+
+type ColorTableProps = ColorTableOwnProps
 
-const colors = {
-  primitives
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+const propTypes: PropValidators<PropKeys> = {
+  colors: PropTypes.object.isRequired,
+  colorNames: PropTypes.object.isRequired
 }
 
-export default colors
+const allowedProps: AllowedPropKeys = ['colors', 'colorNames']
+
+export type { ColorTableProps }
+export { propTypes, allowedProps }

packages/__docs__/src/Theme/index.tsx

@@ -183,17 +183,25 @@ class Theme extends Component<ThemeProps> {
       baseColors = data.primitives
       delete newData.values
 
-      this._colorMap = this.mapColors(baseColors)
-      subSections.push(<ThemeColors colors={baseColors} />)
+      this._colorMap = this.mapColors({
+        ...baseColors,
+        ...data.additionalPrimitives
+      })
+      subSections.push(<ThemeColors colors={baseColors} label="primitives" />)
     }
 
     Object.keys(newData).forEach((key) => {
       //primitives are the color palette above
-      if (key === 'primitives') {
+      if (
+        key === 'primitives' ||
+        key === 'additionalPrimitives' ||
+        key === 'dataVisualization'
+      ) {
         return
       }
 
       const item = data[key]
+
       if (typeof item === 'object') {
         const subData: Record<string, { text: string; color: string }> = {}
         const subKeys = Object.keys(item) as string[]
@@ -241,13 +249,15 @@ class Theme extends Component<ThemeProps> {
 
     const { themeKey, variables, description } = this.props
 
-    Object.keys(variables).forEach((name) => {
-      const value = variables[name]
+    Object.keys(variables)
+      .sort((a, b) => (a === 'colors' ? -1 : b === 'colors' ? 1 : 0))
+      .forEach((name) => {
+        const value = variables[name]
 
-      if (value && typeof value === 'object') {
-        sections.push(this.renderSection(name, value))
-      }
-    })
+        if (value && typeof value === 'object') {
+          sections.push(this.renderSection(name, value))
+        }
+      })
 
     return (
       <div>

packages/__docs__/src/ThemeColors/index.tsx

@@ -24,15 +24,10 @@
 
 import React, { Component } from 'react'
 
-import { MetricGroup, Metric } from '@instructure/ui-metric'
-import { Text } from '@instructure/ui-text'
-import { ContextView, View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view'
 import { Flex } from '@instructure/ui-flex'
 import { Responsive } from '@instructure/ui-responsive'
 import { contrast } from '@instructure/ui-color-utils'
-import { SimpleSelect } from '@instructure/ui-simple-select'
-
-import { ColorSwatch } from '../ColorSwatch'
 import { ColorCard } from '../ColorCard'
 import { Heading } from '../Heading'
 
@@ -55,8 +50,19 @@ class ThemeColors extends Component<ThemeColorsProps, ThemeColorsState> {
     return Object.keys(colors).reduce((res: any, color) => {
       const category = color
         .split('')
-        .filter((char) => isNaN(Number(char)))
-        .join('')
+        .reduce(
+          (acc: { hadNumber: boolean; res: string[] }, char: any) => {
+            if (acc.hadNumber) {
+              return acc
+            }
+            if (isNaN(char)) {
+              return { ...acc, res: [...acc.res, char] }
+            }
+            return { ...acc, hadNumber: true }
+          },
+          { hadNumber: false, res: [] }
+        )
+        .res.join('')
 
       return {
         ...res,
@@ -86,7 +92,7 @@ class ThemeColors extends Component<ThemeColorsProps, ThemeColorsState> {
           return (
             <View as="div" padding="small">
               <Heading level="h3" as="h4">
-                Color palette (Primitive colors)
+                {this.props.label}
               </Heading>
               {Object.keys(colorGroups).map((colorGroup) => (
                 <Flex key={colorGroup} wrap="wrap" margin="0 0 large 0">