chore(shared-types,ui-themes): rename datavizualization to camelcase

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="Color palette (Primitive colors)"></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="Additional Primitive colors"></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>
+```

packages/__docs__/globals.js

@@ -52,7 +52,7 @@ import ThemeColors from './src/ThemeColors'
 // eslint-disable-next-line no-restricted-imports
 import ColorTable from './src/ColorTable'
 
-import { additionalPrimitives, datavisualization } from '@instructure/ui-themes'
+import { additionalPrimitives, dataVisualization } from '@instructure/ui-themes'
 
 const lorem = new LoremIpsum({
   sentencesPerParagraph: {
@@ -87,7 +87,7 @@ const globals = {
   useState,
   useRef,
   additionalPrimitives,
-  datavisualization,
+  dataVisualization,
   ThemeColors,
   ColorTable
 }

packages/__docs__/src/Theme/index.tsx

@@ -200,7 +200,7 @@ class Theme extends Component<ThemeProps> {
       if (
         key === 'primitives' ||
         key === 'additionalPrimitives' ||
-        key === 'datavisualization'
+        key === 'dataVisualization'
       ) {
         return
       }

packages/shared-types/src/Colors.ts

@@ -260,7 +260,7 @@ type UI = {
   lineConnector: Contrasts['grey1424']
 }
 
-type Datavisualization = {
+type DataVisualization = {
   rose12Primary: AdditionalPrimitives['rose12']
   rose30Primary: AdditionalPrimitives['rose30']
   rose45Primary: AdditionalPrimitives['rose45']
@@ -395,5 +395,5 @@ export type {
   AdditionalPrimitives,
   Contrasts,
   UI,
-  Datavisualization
+  DataVisualization
 }

packages/ui-themes/src/index.ts

@@ -28,7 +28,7 @@ import type {
   BaseTheme,
   Primitives,
   AdditionalPrimitives,
-  Datavisualization,
+  DataVisualization,
   UI
 } from '@instructure/shared-types'
 
@@ -39,7 +39,7 @@ import {
   primitives,
   additionalPrimitives
 } from './sharedThemeTokens/colors/primitives'
-import datavisualization from './sharedThemeTokens/colors/datavisualization'
+import dataVisualization from './sharedThemeTokens/colors/dataVisualization'
 
 type ThemeMap = {
   canvas: CanvasTheme
@@ -64,7 +64,7 @@ export {
   canvasHighContrast,
   primitives,
   additionalPrimitives,
-  datavisualization
+  dataVisualization
 }
 export default canvas
 export type {
@@ -78,6 +78,6 @@ export type {
   CanvasHighContrastTheme,
   Primitives,
   AdditionalPrimitives,
-  Datavisualization,
+  DataVisualization,
   UI
 }

packages/ui-themes/src/sharedThemeTokens/colors/datavisualization.ts → packages/ui-themes/src/sharedThemeTokens/colors/dataVisualization.ts

@@ -23,9 +23,9 @@
  */
 
 import { additionalPrimitives } from './primitives'
-import type { Datavisualization } from '@instructure/shared-types'
+import type { DataVisualization } from '@instructure/shared-types'
 
-const datavisualization: Datavisualization = {
+const dataVisualization: DataVisualization = {
   rose12Primary: additionalPrimitives.rose12,
   rose30Primary: additionalPrimitives.rose30,
   rose45Primary: additionalPrimitives.rose45,
@@ -148,4 +148,4 @@ const datavisualization: Datavisualization = {
   stone90Secondary: additionalPrimitives.stone90
 }
 
-export default datavisualization
+export default dataVisualization

packages/ui-themes/src/themes/canvas/colors.ts

@@ -26,7 +26,7 @@ import {
   primitives,
   additionalPrimitives
 } from '../../sharedThemeTokens/colors/primitives'
-import datavisualization from '../../sharedThemeTokens/colors/datavisualization'
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization'
 import getUIColors from '../../utils/getUIColors'
 
 import type { Contrasts, UI } from '@instructure/shared-types'
@@ -70,7 +70,7 @@ const colors = {
   additionalPrimitives,
   contrasts,
   ui,
-  datavisualization
+  dataVisualization
 }
 export default { primitives, contrasts, ui }
 export { colors }

packages/ui-themes/src/themes/canvasHighContrast/colors.ts

@@ -26,7 +26,7 @@ import {
   primitives,
   additionalPrimitives
 } from '../../sharedThemeTokens/colors/primitives'
-import datavisualization from '../../sharedThemeTokens/colors/datavisualization'
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization'
 import getUIColors from '../../utils/getUIColors'
 
 import type { UI, Contrasts } from '@instructure/shared-types'
@@ -70,7 +70,7 @@ const colors = {
   additionalPrimitives,
   contrasts,
   ui,
-  datavisualization
+  dataVisualization
 }
 export default { primitives, contrasts, ui }
 export { colors }