From 1ede3f2cb0238de440e22b9d2bc02da9f2f76311 Mon Sep 17 00:00:00 2001
From: vicky-comeau <110498164+vicky-comeau@users.noreply.github.com>
Date: Wed, 1 Nov 2023 09:20:15 -0400
Subject: [PATCH] Feat: [HOP-68, HOP-69] Data Viz tokens and color sections
 (#81)

---
 .changeset/proud-clocks-worry.md              |    6 +
 .../components/tableSection/TableSection.tsx  |    2 +
 apps/docs/components/tabs/Tabs.tsx            |   16 +-
 apps/docs/content/tokens/semantic/color.mdx   |  312 ++++-
 apps/docs/datas/tokens-dark.json              |   20 +
 apps/docs/datas/tokens.json                   | 1060 +++++++++++++++
 .../tokens/src/style-dictionary/config.ts     |    2 +-
 .../tokens/semantic/dark/dataViz.tokens.json  |   22 +
 .../tokens/semantic/light/dataViz.tokens.json | 1134 +++++++++++++++++
 9 files changed, 2561 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/proud-clocks-worry.md
 create mode 100644 packages/tokens/src/tokens/semantic/dark/dataViz.tokens.json
 create mode 100644 packages/tokens/src/tokens/semantic/light/dataViz.tokens.json

diff --git a/.changeset/proud-clocks-worry.md b/.changeset/proud-clocks-worry.md
new file mode 100644
index 000000000..b33ecacf8
--- /dev/null
+++ b/.changeset/proud-clocks-worry.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/tokens": minor
+"docs": minor
+---
+
+Added data viz tokens and added sections to the color page in the docs.
diff --git a/apps/docs/components/tableSection/TableSection.tsx b/apps/docs/components/tableSection/TableSection.tsx
index d40156086..1a81e7649 100644
--- a/apps/docs/components/tableSection/TableSection.tsx
+++ b/apps/docs/components/tableSection/TableSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Table from "@/components/ui/table/Table";
 
diff --git a/apps/docs/components/tabs/Tabs.tsx b/apps/docs/components/tabs/Tabs.tsx
index 4bda09288..c0418e95f 100644
--- a/apps/docs/components/tabs/Tabs.tsx
+++ b/apps/docs/components/tabs/Tabs.tsx
@@ -1,33 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { Children, useState, type ReactElement, isValidElement } from "react";
 import cx from "classnames";
 
-import Table from "@/components/ui/table/Table";
-
 import "./tabs.css";
 
 interface TabProps {
     title: string;
     category: string;
-    data: {
-        name: string;
-        value: string;
-    }[];
 }
 
 interface TabsProps {
     tabs: TabProps[];
     className?: string;
+    children?: React.ReactNode;
 }
 
-const Tabs = ({ tabs, className }: TabsProps) => {
+const Tabs = ({ tabs, className, children }: TabsProps) => {
     const [selected, setSelected] = useState(0);
 
     const handleOnClick = (index: number): void => {
         setSelected(index);
     };
 
+    const arrayChildren = Children.toArray(children);
+    const selectedChild = arrayChildren[selected];
+
     return (
         <div className={cx("hd-tabs", className)}>
             <ul className="hd-tabs__list">
@@ -47,7 +45,7 @@ const Tabs = ({ tabs, className }: TabsProps) => {
                 ))}
             </ul>
             <div className="hd-tabs__content">
-                <div className="hd-tabs__pane"><Table category={tabs[selected].category} data={tabs[selected].data} /></div>
+                <div className="hd-tabs__pane">{(selectedChild && isValidElement(selectedChild)) && (selectedChild as ReactElement).props.children}</div>
             </div>
         </div>
     );
diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
index a7984162f..831b6e55d 100644
--- a/apps/docs/content/tokens/semantic/color.mdx
+++ b/apps/docs/content/tokens/semantic/color.mdx
@@ -8,10 +8,316 @@ import tokensDark from '../../../datas/tokens-dark.json';
 export const categoryKey = "color";
 
 export const tabs = [
-  { title: "Light", data: tokens.semantic[categoryKey], category: categoryKey },
-  { title: "Dark", data: tokensDark.semantic[categoryKey], category: categoryKey },
+  { title: "Light", category: categoryKey },
+  { title: "Dark", category: categoryKey }
 ];
 
+{/* It's important to keep the Headers with ##, with no spaces on the left so that it shows up in the aside.
+We do not want to do this for the dark mode, otherwise, we see double the headers in the aside. */}
+
 # Semantic Color
+<Tabs tabs={tabs}>
+  <div>
+## Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-neutral"]
+    } />
+## Primary
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-primary"]
+    } />
+## Success
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-success"]
+    } />
+## Warning
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-warning"]
+    } />
+## Danger
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-danger"]
+    } />
+## Information
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-information"]
+    } />
+## Upsell
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-upsell"]
+    } />
+
+## Decorative
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option6"]
+    } />
+    ### Option 7
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option7"]
+    } />
+    ### Option 8
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option8"]
+    } />
+    ### Option 9
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option9"]
+    } />
+
+## Status
+
+    ### Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-neutral"]
+    } />
+    ### Progress
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-progress"]
+    } />
+    ### Positive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-positive"]
+    } />
+    ### Caution
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-caution"]
+    } />
+    ### Negative
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-negative"]
+    } />
+    ### Inactive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-inactive"]
+    } />
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option6"]
+    } />
+
+## Data Visualization
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-unavailable", "hop-text"]
+    } />
+
+    ### Monochromatic - Primary
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-primary"]
+    } />
+
+    ### Monochromatic - Positive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-positive"]
+    } />
+
+    ### Monochromatic - Negative
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-negative"]
+    } />
+
+    ### Diverging Sequence 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-diverging-sequence-1"]
+    } />
+
+    ### Diverging Sequence 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-diverging-sequence-2"]
+    } />
+
+    ### Categorical - Sequences
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-sequence"]
+    } />
+
+    ### Categorical - 2 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-2"]
+    } />
+
+    ### Categorical - 3 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-3"]
+    } />
+
+    ### Categorical - 4 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-4"]
+    } />
+
+    ### Categorical - 5 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-5"]
+    } />
+
+    ### Categorical - 6 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-6"]
+    } />
+  </div>
+  <div>
+    ## Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-neutral"]
+    } />
+    ## Primary
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-primary"]
+    } />
+    ## Success
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-success"]
+    } />
+    ## Warning
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-warning"]
+    } />
+    ## Danger
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-danger"]
+    } />
+    ## Information
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-information"]
+    } />
+    ## Upsell
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-upsell"]
+    } />
+
+    ## Decorative
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option6"]
+    } />
+    ### Option 7
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option7"]
+    } />
+    ### Option 8
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option8"]
+    } />
+    ### Option 9
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option9"]
+    } />
+
+    ## Status
+
+    ### Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-neutral"]
+    } />
+    ### Progress
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-progress"]
+    } />
+    ### Positive
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-positive"]
+    } />
+    ### Caution
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-caution"]
+    } />
+    ### Negative
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-negative"]
+    } />
+    ### Inactive
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-inactive"]
+    } />
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option6"]
+    } />
 
-<Tabs tabs={tabs} />
\ No newline at end of file
+    ## Data Visualization
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-unavailable", "hop-text"]
+    } />
+  </div>
+</Tabs>
\ No newline at end of file
diff --git a/apps/docs/datas/tokens-dark.json b/apps/docs/datas/tokens-dark.json
index bb58ce84b..2020940eb 100644
--- a/apps/docs/datas/tokens-dark.json
+++ b/apps/docs/datas/tokens-dark.json
@@ -1762,6 +1762,26 @@
       {
         "name": "hop-status-positive-text",
         "value": "#132a27"
+      },
+      {
+        "name": "hop-unavailable",
+        "value": "#636362"
+      },
+      {
+        "name": "hop-unavailable-weak",
+        "value": "#777775"
+      },
+      {
+        "name": "hop-unavailable-strong",
+        "value": "#505050"
+      },
+      {
+        "name": "hop-text-onlight",
+        "value": "#3c3c3c"
+      },
+      {
+        "name": "hop-text-ondark",
+        "value": "#ffffff"
       }
     ],
     "shadow": [],
diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json
index e8174b483..0eab65b61 100644
--- a/apps/docs/datas/tokens.json
+++ b/apps/docs/datas/tokens.json
@@ -1774,6 +1774,1066 @@
       {
         "name": "hop-status-positive-text",
         "value": "#115a52"
+      },
+      {
+        "name": "hop-monochromatic-primary-25",
+        "value": "#f5f6ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-50",
+        "value": "#e6ebff"
+      },
+      {
+        "name": "hop-monochromatic-primary-75",
+        "value": "#d6e0ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-100",
+        "value": "#b9cbff"
+      },
+      {
+        "name": "hop-monochromatic-primary-200",
+        "value": "#95b1ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-300",
+        "value": "#6c8ffd"
+      },
+      {
+        "name": "hop-monochromatic-primary-400",
+        "value": "#4767fe"
+      },
+      {
+        "name": "hop-monochromatic-primary-500",
+        "value": "#3b57ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-600",
+        "value": "#2a43e8"
+      },
+      {
+        "name": "hop-monochromatic-primary-700",
+        "value": "#2040c7"
+      },
+      {
+        "name": "hop-monochromatic-primary-800",
+        "value": "#1b3587"
+      },
+      {
+        "name": "hop-monochromatic-primary-900",
+        "value": "#152450"
+      },
+      {
+        "name": "hop-monochromatic-primary-25-hover",
+        "value": "#e6ebff"
+      },
+      {
+        "name": "hop-monochromatic-primary-50-hover",
+        "value": "#d6e0ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-75-hover",
+        "value": "#b9cbff"
+      },
+      {
+        "name": "hop-monochromatic-primary-100-hover",
+        "value": "#95b1ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-200-hover",
+        "value": "#6c8ffd"
+      },
+      {
+        "name": "hop-monochromatic-primary-300-hover",
+        "value": "#4767fe"
+      },
+      {
+        "name": "hop-monochromatic-primary-400-hover",
+        "value": "#3b57ff"
+      },
+      {
+        "name": "hop-monochromatic-primary-500-hover",
+        "value": "#2a43e8"
+      },
+      {
+        "name": "hop-monochromatic-primary-600-hover",
+        "value": "#2040c7"
+      },
+      {
+        "name": "hop-monochromatic-primary-700-hover",
+        "value": "#1b3587"
+      },
+      {
+        "name": "hop-monochromatic-primary-800-hover",
+        "value": "#152450"
+      },
+      {
+        "name": "hop-monochromatic-primary-900-hover",
+        "value": "#0b173a"
+      },
+      {
+        "name": "hop-monochromatic-positive-25",
+        "value": "#f4f9e9"
+      },
+      {
+        "name": "hop-monochromatic-positive-50",
+        "value": "#e3f3b9"
+      },
+      {
+        "name": "hop-monochromatic-positive-75",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-monochromatic-positive-100",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-monochromatic-positive-200",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-monochromatic-positive-300",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-monochromatic-positive-400",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-monochromatic-positive-500",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-monochromatic-positive-600",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-monochromatic-positive-700",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-monochromatic-positive-800",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-monochromatic-positive-900",
+        "value": "#132a27"
+      },
+      {
+        "name": "hop-monochromatic-positive-25-hover",
+        "value": "#e3f3b9"
+      },
+      {
+        "name": "hop-monochromatic-positive-50-hover",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-monochromatic-positive-75-hover",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-monochromatic-positive-100-hover",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-monochromatic-positive-200-hover",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-monochromatic-positive-300-hover",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-monochromatic-positive-400-hover",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-monochromatic-positive-500-hover",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-monochromatic-positive-600-hover",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-monochromatic-positive-700-hover",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-monochromatic-positive-800-hover",
+        "value": "#132a27"
+      },
+      {
+        "name": "hop-monochromatic-positive-900-hover",
+        "value": "#0a1716"
+      },
+      {
+        "name": "hop-monochromatic-negative-25",
+        "value": "#fdf6f6"
+      },
+      {
+        "name": "hop-monochromatic-negative-50",
+        "value": "#fde6e5"
+      },
+      {
+        "name": "hop-monochromatic-negative-75",
+        "value": "#ffd6d3"
+      },
+      {
+        "name": "hop-monochromatic-negative-100",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-monochromatic-negative-200",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-monochromatic-negative-300",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-monochromatic-negative-400",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-monochromatic-negative-500",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-monochromatic-negative-600",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-monochromatic-negative-700",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-monochromatic-negative-800",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-monochromatic-negative-900",
+        "value": "#431a17"
+      },
+      {
+        "name": "hop-monochromatic-negative-25-hover",
+        "value": "#fde6e5"
+      },
+      {
+        "name": "hop-monochromatic-negative-50-hover",
+        "value": "#ffd6d3"
+      },
+      {
+        "name": "hop-monochromatic-negative-75-hover",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-monochromatic-negative-100-hover",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-monochromatic-negative-200-hover",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-monochromatic-negative-300-hover",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-monochromatic-negative-400-hover",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-monochromatic-negative-500-hover",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-monochromatic-negative-600-hover",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-monochromatic-negative-700-hover",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-monochromatic-negative-800-hover",
+        "value": "#431a17"
+      },
+      {
+        "name": "hop-monochromatic-negative-900-hover",
+        "value": "#2d100d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive9",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive9-hover",
+        "value": "#132a27"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive8",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive8-hover",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive7",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive7-hover",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive6",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive6-hover",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive5",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive5-hover",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive4",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive-4-hover",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive3",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive3-hover",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive2",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive2-hover",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive1",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-diverging-sequence-1-positive1-hover",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-neutral",
+        "value": "#f7e694"
+      },
+      {
+        "name": "hop-diverging-sequence-1-neutral-hover",
+        "value": "#eac96d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative1",
+        "value": "#ffd8be"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative1-hover",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative2",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative2-hover",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative3",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative3-hover",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative4",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative4-hover",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative5",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative5-hover",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative6",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative6-hover",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative7",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative7-hover",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative8",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative8-hover",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative9",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-diverging-sequence-1-negative9-hover",
+        "value": "#431a17"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive10",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive10-hover",
+        "value": "#132a27"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive9",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive9-hover",
+        "value": "#16433d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive8",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive8-hover",
+        "value": "#115a52"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive7",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive7-hover",
+        "value": "#0a6f64"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive6",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive6-hover",
+        "value": "#0c796b"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive5",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive5-hover",
+        "value": "#188a71"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive4",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive4-hover",
+        "value": "#47a584"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive3",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive3-hover",
+        "value": "#7dc291"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive2",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive2-hover",
+        "value": "#aad89d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive1",
+        "value": "#e3f3b9"
+      },
+      {
+        "name": "hop-diverging-sequence-2-positive1-hover",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative1",
+        "value": "#fde6e5"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative1-hover",
+        "value": "#ffd6d3"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative2",
+        "value": "#ffd6d3"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative2-hover",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative3",
+        "value": "#ffbcb7"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative3-hover",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative4",
+        "value": "#ff8e8e"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative4-hover",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative5",
+        "value": "#f56263"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative5-hover",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative6",
+        "value": "#df3236"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative6-hover",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative7",
+        "value": "#cb2e31"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative7-hover",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative8",
+        "value": "#ba2d2d"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative8-hover",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative9",
+        "value": "#952927"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative9-hover",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative10",
+        "value": "#6c2320"
+      },
+      {
+        "name": "hop-diverging-sequence-2-negative10-hover",
+        "value": "#431a17"
+      },
+      {
+        "name": "hop-categorical-sequence-category1",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-sequence-category1-hover",
+        "value": "#ade2ff"
+      },
+      {
+        "name": "hop-categorical-sequence-category2",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-sequence-category2-hover",
+        "value": "#e6c675"
+      },
+      {
+        "name": "hop-categorical-sequence-category3",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-sequence-category3-hover",
+        "value": "#bfb8f5"
+      },
+      {
+        "name": "hop-categorical-sequence-category4",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-sequence-category4-hover",
+        "value": "#a4ae98"
+      },
+      {
+        "name": "hop-categorical-sequence-category5",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-sequence-category5-hover",
+        "value": "#f99fb8"
+      },
+      {
+        "name": "hop-categorical-sequence-category6",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-sequence-category6-hover",
+        "value": "#a9d08b"
+      },
+      {
+        "name": "hop-categorical-sequence-category7",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-sequence-category7-hover",
+        "value": "#fae275"
+      },
+      {
+        "name": "hop-categorical-sequence-category8",
+        "value": "#e8ddd0"
+      },
+      {
+        "name": "hop-categorical-sequence-category8-hover",
+        "value": "#ddcebb"
+      },
+      {
+        "name": "hop-categorical-sequence-category9",
+        "value": "#a7e6dc"
+      },
+      {
+        "name": "hop-categorical-sequence-category9-hover",
+        "value": "#90e0d2"
+      },
+      {
+        "name": "hop-categorical-sequence-category10",
+        "value": "#aecdd5"
+      },
+      {
+        "name": "hop-categorical-sequence-category10-hover",
+        "value": "#93bdc8"
+      },
+      {
+        "name": "hop-categorical-sequence-category11",
+        "value": "#ffbf92"
+      },
+      {
+        "name": "hop-categorical-sequence-category-11-hover",
+        "value": "#ffac70"
+      },
+      {
+        "name": "hop-categorical-sequence-category12",
+        "value": "#a0b8fa"
+      },
+      {
+        "name": "hop-categorical-sequence-cateogry12-hover",
+        "value": "#779af8"
+      },
+      {
+        "name": "hop-categorical-sequence-category13",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-sequence-category13-hover",
+        "value": "#54b692"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option6-category2",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option6-category1",
+        "value": "#ffbf92"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option5-category2",
+        "value": "#a0b8fa"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option5-category1",
+        "value": "#a7e6dc"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option4-category2",
+        "value": "#6c8ffd"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option4-category1",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option3-category2",
+        "value": "#ff9b3f"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option3-category1",
+        "value": "#2f48ff"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option2-category2",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option2-category1",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option1-category2",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-2colorgroup-option1-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option1-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option1-category2",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option1-category3",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option2-category1",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option2-category2",
+        "value": "#a7e6dc"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option2-category3",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option3-category1",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option3-category2",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option3-category3",
+        "value": "#aecdd5"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option4-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option4-category2",
+        "value": "#a0b8fa"
+      },
+      {
+        "name": "hop-categorical-3colorgroup-option4-category3",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option1-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option1-category2",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option1-category3",
+        "value": "#cde8ac"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option1-category4",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option2-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option2-category2",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option2-category3",
+        "value": "#84d0b4"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option2-category4",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option3-category1",
+        "value": "#ffbf92"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option3-category2",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option3-category3",
+        "value": "#2e70a8"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option3-category4",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option4-category1",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option4-category2",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option4-category3",
+        "value": "#fa4d59"
+      },
+      {
+        "name": "hop-categorical-4colorgroup-option4-category4",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option1-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option1-category2",
+        "value": "#ff9b3f"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option1-category3",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option1-category4",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option1-category5",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option2-category1",
+        "value": "#ff9b3f"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option2-category2",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option2-category3",
+        "value": "#2e70a8"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option2-category4",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option2-category5",
+        "value": "#c5bef6"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option3-category1",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option3-category2",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option3-category3",
+        "value": "#aecdd5"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option3-category4",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option3-category5",
+        "value": "#ffbf92"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option4-category1",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option4-category2",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option4-category3",
+        "value": "#fa4d59"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option4-category4",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-5colorgroup-option4-category5",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category2",
+        "value": "#a0b8fa"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category3",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category4",
+        "value": "#fa4d59"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category5",
+        "value": "#ecd599"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option1-category6",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category1",
+        "value": "#2e70a8"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category2",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category3",
+        "value": "#69bfa0"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category4",
+        "value": "#ff9b3f"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category5",
+        "value": "#a7e6dc"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option2-category6",
+        "value": "#d2cdf8"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category1",
+        "value": "#b6bead"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category2",
+        "value": "#aecdd5"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category3",
+        "value": "#e8ddd0"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category4",
+        "value": "#a7e6dc"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category5",
+        "value": "#2e70a8"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option3-category6",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category1",
+        "value": "#fbbdcf"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category2",
+        "value": "#a0b8fa"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category3",
+        "value": "#ffbf92"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category4",
+        "value": "#c7ebff"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category5",
+        "value": "#bfdca9"
+      },
+      {
+        "name": "hop-categorical-6colorgroup-option4-category6",
+        "value": "#fbe997"
+      },
+      {
+        "name": "hop-unavailable",
+        "value": "#e0dfdd"
+      },
+      {
+        "name": "hop-unavailable-weak",
+        "value": "#ecebe8"
+      },
+      {
+        "name": "hop-unavailable-strong",
+        "value": "#ccccca"
+      },
+      {
+        "name": "hop-text-onlight",
+        "value": "#3c3c3c"
+      },
+      {
+        "name": "hop-text-ondark",
+        "value": "#ffffff"
       }
     ],
     "shadow": [
diff --git a/packages/tokens/src/style-dictionary/config.ts b/packages/tokens/src/style-dictionary/config.ts
index 1ce7c1d82..45909d769 100644
--- a/packages/tokens/src/style-dictionary/config.ts
+++ b/packages/tokens/src/style-dictionary/config.ts
@@ -20,7 +20,7 @@ export const fontsConfig = {
                             "category": "asset",
                             "type": "font"
                         }
-                    },
+                    }
                 }
             ],
             "actions": ["copy_assets"]
diff --git a/packages/tokens/src/tokens/semantic/dark/dataViz.tokens.json b/packages/tokens/src/tokens/semantic/dark/dataViz.tokens.json
new file mode 100644
index 000000000..f520929f0
--- /dev/null
+++ b/packages/tokens/src/tokens/semantic/dark/dataViz.tokens.json
@@ -0,0 +1,22 @@
+{
+  "unavailable": {
+    "$type": "color",
+    "$value": "{rock.600}"
+  },
+  "unavailable-weak": {
+    "$type": "color",
+    "$value": "{rock.400}"
+  },
+  "unavailable-strong": {
+    "$type": "color",
+    "$value": "{rock.700}"
+  },
+  "text-onlight": {
+    "$type": "color",
+    "$value": "{rock.800}"
+  },
+  "text-ondark": {
+    "$type": "color",
+    "$value": "{samoyed}"
+  }
+}
\ No newline at end of file
diff --git a/packages/tokens/src/tokens/semantic/light/dataViz.tokens.json b/packages/tokens/src/tokens/semantic/light/dataViz.tokens.json
new file mode 100644
index 000000000..0e7669226
--- /dev/null
+++ b/packages/tokens/src/tokens/semantic/light/dataViz.tokens.json
@@ -0,0 +1,1134 @@
+{
+  "monochromatic": {
+    "primary": {
+      "25": {
+        "$type": "color",
+        "$value": "#f5f6ff"
+      },
+      "50": {
+        "$type": "color",
+        "$value": "#e6ebff"
+      },
+      "75": {
+        "$type": "color",
+        "$value": "#d6e0ff"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#b9cbff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#95b1ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#6c8ffd"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#4767fe"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#3b57ff"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#2a43e8"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2040c7"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#1b3587"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#152450"
+      },
+      "25-hover": {
+        "$type": "color",
+        "$value": "#e6ebff"
+      },
+      "50-hover": {
+        "$type": "color",
+        "$value": "#d6e0ff"
+      },
+      "75-hover": {
+        "$type": "color",
+        "$value": "#b9cbff"
+      },
+      "100-hover": {
+        "$type": "color",
+        "$value": "#95b1ff"
+      },
+      "200-hover": {
+        "$type": "color",
+        "$value": "#6c8ffd"
+      },
+      "300-hover": {
+        "$type": "color",
+        "$value": "#4767fe"
+      },
+      "400-hover": {
+        "$type": "color",
+        "$value": "#3b57ff"
+      },
+      "500-hover": {
+        "$type": "color",
+        "$value": "#2a43e8"
+      },
+      "600-hover": {
+        "$type": "color",
+        "$value": "#2040c7"
+      },
+      "700-hover": {
+        "$type": "color",
+        "$value": "#1b3587"
+      },
+      "800-hover": {
+        "$type": "color",
+        "$value": "#152450"
+      },
+      "900-hover": {
+        "$type": "color",
+        "$value": "#0b173a"
+      }
+    },
+    "positive": {
+      "25": {
+        "$type": "color",
+        "$value": "#f4f9e9"
+      },
+      "50": {
+        "$type": "color",
+        "$value": "#e3f3b9"
+      },
+      "75": {
+        "$type": "color",
+        "$value": "#cde8ac"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#132a27"
+      },
+      "25-hover": {
+        "$type": "color",
+        "$value": "#e3f3b9"
+      },
+      "50-hover": {
+        "$type": "color",
+        "$value": "#cde8ac"
+      },
+      "75-hover": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "100-hover": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "200-hover": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "300-hover": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "400-hover": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "500-hover": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "600-hover": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "700-hover": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "800-hover": {
+        "$type": "color",
+        "$value": "#132a27"
+      },
+      "900-hover": {
+        "$type": "color",
+        "$value": "#0a1716"
+      }
+    },
+    "negative": {
+      "25": {
+        "$type": "color",
+        "$value": "#fdf6f6"
+      },
+      "50": {
+        "$type": "color",
+        "$value": "#fde6e5"
+      },
+      "75": {
+        "$type": "color",
+        "$value": "#ffd6d3"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#431a17"
+      },
+      "25-hover": {
+        "$type": "color",
+        "$value": "#fde6e5"
+      },
+      "50-hover": {
+        "$type": "color",
+        "$value": "#ffd6d3"
+      },
+      "75-hover": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "100-hover": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "200-hover": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "300-hover": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "400-hover": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "500-hover": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "600-hover": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "700-hover": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "800-hover": {
+        "$type": "color",
+        "$value": "#431a17"
+      },
+      "900-hover": {
+        "$type": "color",
+        "$value": "#2d100d"
+      }
+    }
+  },
+  "diverging": {
+    "sequence 1": {
+      "positive9": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "positive9-hover": {
+        "$type": "color",
+        "$value": "#132a27"
+      },
+      "positive8": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "positive8-hover": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "positive7": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "positive7-hover": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "positive6": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "positive6-hover": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "positive5": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "positive5-hover": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "positive4": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "positive-4-hover": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "positive3": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "positive3-hover": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "positive2": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "positive2-hover": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "positive1": {
+        "$type": "color",
+        "$value": "#cde8ac"
+      },
+      "positive1-hover": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "neutral": {
+        "$type": "color",
+        "$value": "#f7e694"
+      },
+      "neutral-hover": {
+        "$type": "color",
+        "$value": "#eac96d"
+      },
+      "negative1": {
+        "$type": "color",
+        "$value": "#ffd8be"
+      },
+      "negative1-hover": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "negative2": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "negative2-hover": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "negative3": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "negative3-hover": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "negative4": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "negative4-hover": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "negative5": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "negative5-hover": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "negative6": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "negative6-hover": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "negative7": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "negative7-hover": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "negative8": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "negative8-hover": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "negative9": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "negative9-hover": {
+        "$type": "color",
+        "$value": "#431a17"
+      }
+    },
+    "sequence 2": {
+      "positive10": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "positive10-hover": {
+        "$type": "color",
+        "$value": "#132a27"
+      },
+      "positive9": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "positive9-hover": {
+        "$type": "color",
+        "$value": "#16433d"
+      },
+      "positive8": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "positive8-hover": {
+        "$type": "color",
+        "$value": "#115a52"
+      },
+      "positive7": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "positive7-hover": {
+        "$type": "color",
+        "$value": "#0a6f64"
+      },
+      "positive6": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "positive6-hover": {
+        "$type": "color",
+        "$value": "#0c796b"
+      },
+      "positive5": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "positive5-hover": {
+        "$type": "color",
+        "$value": "#188a71"
+      },
+      "positive4": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "positive4-hover": {
+        "$type": "color",
+        "$value": "#47a584"
+      },
+      "positive3": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "positive3-hover": {
+        "$type": "color",
+        "$value": "#7dc291"
+      },
+      "positive2": {
+        "$type": "color",
+        "$value": "#cde8ac"
+      },
+      "positive2-hover": {
+        "$type": "color",
+        "$value": "#aad89d"
+      },
+      "positive1": {
+        "$type": "color",
+        "$value": "#e3f3b9"
+      },
+      "positive1-hover": {
+        "$type": "color",
+        "$value": "#cde8ac"
+      },
+      "negative1": {
+        "$type": "color",
+        "$value": "#fde6e5"
+      },
+      "negative1-hover": {
+        "$type": "color",
+        "$value": "#ffd6d3"
+      },
+      "negative2": {
+        "$type": "color",
+        "$value": "#ffd6d3"
+      },
+      "negative2-hover": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "negative3": {
+        "$type": "color",
+        "$value": "#ffbcb7"
+      },
+      "negative3-hover": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "negative4": {
+        "$type": "color",
+        "$value": "#ff8e8e"
+      },
+      "negative4-hover": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "negative5": {
+        "$type": "color",
+        "$value": "#f56263"
+      },
+      "negative5-hover": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "negative6": {
+        "$type": "color",
+        "$value": "#df3236"
+      },
+      "negative6-hover": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "negative7": {
+        "$type": "color",
+        "$value": "#cb2e31"
+      },
+      "negative7-hover": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "negative8": {
+        "$type": "color",
+        "$value": "#ba2d2d"
+      },
+      "negative8-hover": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "negative9": {
+        "$type": "color",
+        "$value": "#952927"
+      },
+      "negative9-hover": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "negative10": {
+        "$type": "color",
+        "$value": "#6c2320"
+      },
+      "negative10-hover": {
+        "$type": "color",
+        "$value": "#431a17"
+      }
+    }
+  },
+  "categorical": {
+    "sequence": {
+      "category1": {
+        "$type": "color",
+        "$value": "#c7ebff"
+      },
+      "category1-hover": {
+        "$type": "color",
+        "$value": "#ade2ff"
+      },
+      "category2": {
+        "$type": "color",
+        "$value": "#ecd599"
+      },
+      "category2-hover": {
+        "$type": "color",
+        "$value": "#e6c675"
+      },
+      "category3": {
+        "$type": "color",
+        "$value": "#d2cdf8"
+      },
+      "category3-hover": {
+        "$type": "color",
+        "$value": "#bfb8f5"
+      },
+      "category4": {
+        "$type": "color",
+        "$value": "#b6bead"
+      },
+      "category4-hover": {
+        "$type": "color",
+        "$value": "#a4ae98"
+      },
+      "category5": {
+        "$type": "color",
+        "$value": "#fbbdcf"
+      },
+      "category5-hover": {
+        "$type": "color",
+        "$value": "#f99fb8"
+      },
+      "category6": {
+        "$type": "color",
+        "$value": "#bfdca9"
+      },
+      "category6-hover": {
+        "$type": "color",
+        "$value": "#a9d08b"
+      },
+      "category7": {
+        "$type": "color",
+        "$value": "#fbe997"
+      },
+      "category7-hover": {
+        "$type": "color",
+        "$value": "#fae275"
+      },
+      "category8": {
+        "$type": "color",
+        "$value": "#e8ddd0"
+      },
+      "category8-hover": {
+        "$type": "color",
+        "$value": "#ddcebb"
+      },
+      "category9": {
+        "$type": "color",
+        "$value": "#a7e6dc"
+      },
+      "category9-hover": {
+        "$type": "color",
+        "$value": "#90e0d2"
+      },
+      "category10": {
+        "$type": "color",
+        "$value": "#aecdd5"
+      },
+      "category10-hover": {
+        "$type": "color",
+        "$value": "#93bdc8"
+      },
+      "category11": {
+        "$type": "color",
+        "$value": "#ffbf92"
+      },
+      "category-11-hover": {
+        "$type": "color",
+        "$value": "#ffac70"
+      },
+      "category12": {
+        "$type": "color",
+        "$value": "#a0b8fa"
+      },
+      "cateogry12-hover": {
+        "$type": "color",
+        "$value": "#779af8"
+      },
+      "category13": {
+        "$type": "color",
+        "$value": "#69bfa0"
+      },
+      "category13-hover": {
+        "$type": "color",
+        "$value": "#54b692"
+      }
+    },
+    "2colorgroup": {
+      "option6": {
+        "category2": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#ffbf92"
+        }
+      },
+      "option5": {
+        "category2": {
+          "$type": "color",
+          "$value": "#a0b8fa"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#a7e6dc"
+        }
+      },
+      "option4": {
+        "category2": {
+          "$type": "color",
+          "$value": "#6c8ffd"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#bfdca9"
+        }
+      },
+      "option3": {
+        "category2": {
+          "$type": "color",
+          "$value": "#ff9b3f"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#2f48ff"
+        }
+      },
+      "option2": {
+        "category2": {
+          "$type": "color",
+          "$value": "#fbe997"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#fbbdcf"
+        }
+      },
+      "option1": {
+        "category2": {
+          "$type": "color",
+          "$value": "#c7ebff"
+        },
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        }
+      }
+    },
+    "3colorgroup": {
+      "option1": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#bfdca9"
+        }
+      },
+      "option2": {
+        "category1": {
+          "$type": "color",
+          "$value": "#ecd599"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#a7e6dc"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        }
+      },
+      "option3": {
+        "category1": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#fbe997"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#aecdd5"
+        }
+      },
+      "option4": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#a0b8fa"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#fbbdcf"
+        }
+      }
+    },
+    "4colorgroup": {
+      "option1": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#cde8ac"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#fbbdcf"
+        }
+      },
+      "option2": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#c7ebff"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#84d0b4"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#fbe997"
+        }
+      },
+      "option3": {
+        "category1": {
+          "$type": "color",
+          "$value": "#ffbf92"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#2e70a8"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#ecd599"
+        }
+      },
+      "option4": {
+        "category1": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#c7ebff"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#fa4d59"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        }
+      }
+    },
+    "5colorgroup": {
+      "option1": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#ff9b3f"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#bfdca9"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#ecd599"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        }
+      },
+      "option2": {
+        "category1": {
+          "$type": "color",
+          "$value": "#ff9b3f"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#2e70a8"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#fbe997"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#c5bef6"
+        }
+      },
+      "option3": {
+        "category1": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#ecd599"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#aecdd5"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#ffbf92"
+        }
+      },
+      "option4": {
+        "category1": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#c7ebff"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#fa4d59"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#b6bead"
+        }
+      }
+    },
+    "6colorgroup": {
+      "option1": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#a0b8fa"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#bfdca9"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#fa4d59"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#ecd599"
+        },
+        "category6": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        }
+      },
+      "option2": {
+        "category1": {
+          "$type": "color",
+          "$value": "#2e70a8"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#fbe997"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#69bfa0"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#ff9b3f"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#a7e6dc"
+        },
+        "category6": {
+          "$type": "color",
+          "$value": "#d2cdf8"
+        }
+      },
+      "option3": {
+        "category1": {
+          "$type": "color",
+          "$value": "#b6bead"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#aecdd5"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#e8ddd0"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#a7e6dc"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#2e70a8"
+        },
+        "category6": {
+          "$type": "color",
+          "$value": "#fbbdcf"
+        }
+      },
+      "option4": {
+        "category1": {
+          "$type": "color",
+          "$value": "#fbbdcf"
+        },
+        "category2": {
+          "$type": "color",
+          "$value": "#a0b8fa"
+        },
+        "category3": {
+          "$type": "color",
+          "$value": "#ffbf92"
+        },
+        "category4": {
+          "$type": "color",
+          "$value": "#c7ebff"
+        },
+        "category5": {
+          "$type": "color",
+          "$value": "#bfdca9"
+        },
+        "category6": {
+          "$type": "color",
+          "$value": "#fbe997"
+        }
+      }
+    }
+  },
+  "unavailable": {
+    "$type": "color",
+    "$value": "{rock.75}"
+  },
+  "unavailable-weak": {
+    "$type": "color",
+    "$value": "{rock.50}"
+  },
+  "unavailable-strong": {
+    "$type": "color",
+    "$value": "{rock.100}"
+  },
+  "text-onlight": {
+    "$type": "color",
+    "$value": "{rock.800}"
+  },
+  "text-ondark": {
+    "$type": "color",
+    "$value": "{samoyed}"
+  }
+}