@amboss/design-system 3.2.0 → 3.3.1

package/build/esm/web-tokens/_colors.json

@@ -233,6 +233,440 @@
             "lightOriginalValue": "gray.light02"
         }
     },
+    "toggle": {
+        "color-toggle-background-highlight": {
+            "name": "toggle.background",
+            "subState": "highlight",
+            "darkValue": "#b2ab39",
+            "darkOriginalValue": "night-yellow.regular",
+            "lightValue": "#f3eb75",
+            "lightOriginalValue": "yellow.light01"
+        },
+        "color-toggle-border-highlight": {
+            "name": "toggle.border",
+            "subState": "highlight",
+            "darkValue": "#b2ab39",
+            "darkOriginalValue": "night-yellow.regular",
+            "lightValue": "#f3eb75",
+            "lightOriginalValue": "yellow.light01"
+        }
+    },
+    "segmented-progress-bar": {
+        "color-segmented-progress-bar-monochrome": {
+            "name": "segmented-progress-bar.monochrome",
+            "subState": "",
+            "darkValue": "#ced1d6",
+            "darkOriginalValue": "night-gray.light02",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
+        },
+        "color-segmented-progress-bar-success": {
+            "name": "segmented-progress-bar.success",
+            "subState": "",
+            "darkValue": "#28816b",
+            "darkOriginalValue": "night-green.regular",
+            "lightValue": "#39d6ac",
+            "lightOriginalValue": "green.regularAlt"
+        },
+        "color-segmented-progress-bar-warning": {
+            "name": "segmented-progress-bar.warning",
+            "subState": "",
+            "darkValue": "#a4792d",
+            "darkOriginalValue": "night-orange.regular",
+            "lightValue": "#f1d56b",
+            "lightOriginalValue": "orange.regularAlt"
+        },
+        "color-segmented-progress-bar-alert": {
+            "name": "segmented-progress-bar.alert",
+            "subState": "",
+            "darkValue": "#a45355",
+            "darkOriginalValue": "night-red.regular",
+            "lightValue": "#f07575",
+            "lightOriginalValue": "red.light01"
+        },
+        "color-segmented-progress-bar-in-progress": {
+            "name": "segmented-progress-bar.in-progress",
+            "subState": "",
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        }
+    },
+    "tag": {
+        "color-tag-background-gray": {
+            "name": "tag.background",
+            "subState": "gray",
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        },
+        "color-tag-background-blue": {
+            "name": "tag.background",
+            "subState": "blue",
+            "darkValue": "#2f538a",
+            "darkOriginalValue": "night-blue.regular",
+            "lightValue": "#d2e2f9",
+            "lightOriginalValue": "blue.light02"
+        },
+        "color-tag-text-gray": {
+            "name": "tag.text",
+            "subState": "gray",
+            "darkValue": "#ced1d6",
+            "darkOriginalValue": "night-gray.light02",
+            "lightValue": "#40515e",
+            "lightOriginalValue": "gray.dark01"
+        },
+        "color-tag-text-blue": {
+            "name": "tag.text",
+            "subState": "blue",
+            "darkValue": "#e7effe",
+            "darkOriginalValue": "night-blue.light03",
+            "lightValue": "#1c427d",
+            "lightOriginalValue": "blue.dark02"
+        }
+    },
+    "destructive-tertiary-button": {
+        "color-destructive-tertiary-button-background-hover": {
+            "name": "destructive-tertiary-button.background",
+            "subState": "hover",
+            "darkValue": "rgba(164, 83, 85, 0.08)",
+            "darkOriginalValue": "night-red.regular-transparent02",
+            "lightValue": "rgba(238, 97, 96, 0.08)",
+            "lightOriginalValue": "red.regular-transparent02"
+        },
+        "color-destructive-tertiary-button-background-active": {
+            "name": "destructive-tertiary-button.background",
+            "subState": "active",
+            "darkValue": "rgba(164, 83, 85, 0.08)",
+            "darkOriginalValue": "night-red.regular-transparent02",
+            "lightValue": "rgba(238, 97, 96, 0.08)",
+            "lightOriginalValue": "red.regular-transparent02"
+        }
+    },
+    "range-input": {
+        "color-range-input-background-thumb": {
+            "name": "range-input.background",
+            "subState": "thumb",
+            "darkValue": "#d8dade",
+            "darkOriginalValue": "night-gray.light03",
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
+        }
+    },
+    "search-input": {
+        "color-search-input-background-default": {
+            "name": "search-input.background",
+            "subState": "default",
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#eef2f5",
+            "lightOriginalValue": "gray.light03"
+        }
+    },
+    "qbank-answer": {
+        "color-qbank-answer-background-title": {
+            "name": "qbank-answer.background",
+            "subState": "title",
+            "darkValue": "rgba(164, 83, 85, 0.45)",
+            "darkOriginalValue": "night-red.regular-transparent",
+            "lightValue": "rgba(240, 117, 117, 0.45)",
+            "lightOriginalValue": "red.light01-transparent"
+        },
+        "color-qbank-answer-background-explanation": {
+            "name": "qbank-answer.background",
+            "subState": "explanation",
+            "darkValue": "#312b31",
+            "darkOriginalValue": "night-red.dark02",
+            "lightValue": "#fde8e8",
+            "lightOriginalValue": "red.light03"
+        },
+        "color-qbank-answer-border-correct": {
+            "name": "qbank-answer.border",
+            "subState": "correct",
+            "darkValue": "#28816b",
+            "darkOriginalValue": "night-green.regular",
+            "lightValue": "#8adcc6",
+            "lightOriginalValue": "green.light01"
+        },
+        "color-qbank-answer-border-correct-with-hint": {
+            "name": "qbank-answer.border",
+            "subState": "correct-with-hint",
+            "darkValue": "#a4792d",
+            "darkOriginalValue": "night-orange.regular",
+            "lightValue": "#f6c66f",
+            "lightOriginalValue": "orange.light01"
+        },
+        "color-qbank-answer-border-incorrect": {
+            "name": "qbank-answer.border",
+            "subState": "incorrect",
+            "darkValue": "#a45355",
+            "darkOriginalValue": "night-red.regular",
+            "lightValue": "#f07575",
+            "lightOriginalValue": "red.light01"
+        }
+    },
+    "chart": {
+        "color-chart-border-default": {
+            "name": "chart.border",
+            "subState": "default",
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#a3b2bd",
+            "lightOriginalValue": "gray.light01"
+        },
+        "color-chart-grid-primary": {
+            "name": "chart.grid",
+            "subState": "primary",
+            "darkValue": "rgba(147, 149, 159, 0.3)",
+            "darkOriginalValue": "night-gray.regular-transparent01",
+            "lightValue": "rgba(163, 178, 189, 0.3)",
+            "lightOriginalValue": "gray.light01-transparent"
+        },
+        "color-chart-grid-secondary": {
+            "name": "chart.grid",
+            "subState": "secondary",
+            "darkValue": "rgba(147, 149, 159, 0.3)",
+            "darkOriginalValue": "night-gray.regular-transparent01",
+            "lightValue": "rgba(163, 178, 189, 0.3)",
+            "lightOriginalValue": "gray.light01-transparent"
+        },
+        "color-chart-background-default": {
+            "name": "chart.background",
+            "subState": "default",
+            "darkValue": "#1a1c1c",
+            "darkOriginalValue": "neutral.black",
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
+        },
+        "color-chart-background-inverted": {
+            "name": "chart.background",
+            "subState": "inverted",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
+        },
+        "color-chart-text-positive": {
+            "name": "chart.text",
+            "subState": "positive",
+            "darkValue": "#a6f2dd",
+            "darkOriginalValue": "night-green.light02",
+            "lightValue": "#0b8363",
+            "lightOriginalValue": "green.dark01"
+        },
+        "color-chart-text-negative": {
+            "name": "chart.text",
+            "subState": "negative",
+            "darkValue": "#f49a9a",
+            "darkOriginalValue": "night-red.light02",
+            "lightValue": "#dc4847",
+            "lightOriginalValue": "red.dark01"
+        },
+        "color-chart-text-warning": {
+            "name": "chart.text",
+            "subState": "warning",
+            "darkValue": "#a4792d",
+            "darkOriginalValue": "night-orange.regular",
+            "lightValue": "#df9411",
+            "lightOriginalValue": "orange.dark01"
+        },
+        "color-chart-neutral-default": {
+            "name": "chart.neutral",
+            "subState": "default",
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#a3b2bd",
+            "lightOriginalValue": "gray.light01"
+        },
+        "color-chart-neutral-subtle": {
+            "name": "chart.neutral",
+            "subState": "subtle",
+            "darkValue": "#1e2125",
+            "darkOriginalValue": "night-black.dark02",
+            "lightValue": "#eef2f5",
+            "lightOriginalValue": "gray.light03"
+        },
+        "color-chart-neutral-bold": {
+            "name": "chart.neutral",
+            "subState": "bold",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
+        },
+        "color-chart-positive-default": {
+            "name": "chart.positive",
+            "subState": "default",
+            "darkValue": "#41a48a",
+            "darkOriginalValue": "night-green.light01",
+            "lightValue": "#0b8363",
+            "lightOriginalValue": "green.dark01"
+        },
+        "color-chart-positive-subtle": {
+            "name": "chart.positive",
+            "subState": "subtle",
+            "darkValue": "#262e33",
+            "darkOriginalValue": "night-green.dark02",
+            "lightValue": "#e8f8f4",
+            "lightOriginalValue": "green.light03"
+        },
+        "color-chart-positive-bold": {
+            "name": "chart.positive",
+            "subState": "bold",
+            "darkValue": "#a6f2dd",
+            "darkOriginalValue": "night-green.light02",
+            "lightValue": "#0a5c45",
+            "lightOriginalValue": "green.dark02"
+        },
+        "color-chart-warning-default": {
+            "name": "chart.warning",
+            "subState": "default",
+            "darkValue": "#cbac76",
+            "darkOriginalValue": "night-orange.light01",
+            "lightValue": "#f6bc56",
+            "lightOriginalValue": "orange.regular"
+        },
+        "color-chart-warning-subtle": {
+            "name": "chart.warning",
+            "subState": "subtle",
+            "darkValue": "#32302f",
+            "darkOriginalValue": "night-orange.dark02",
+            "lightValue": "#fef3e1",
+            "lightOriginalValue": "orange.light03"
+        },
+        "color-chart-warning-bold": {
+            "name": "chart.warning",
+            "subState": "bold",
+            "darkValue": "#fae0b3",
+            "darkOriginalValue": "night-orange.light02",
+            "lightValue": "#f6c66f",
+            "lightOriginalValue": "orange.light01"
+        },
+        "color-chart-negative-default": {
+            "name": "chart.negative",
+            "subState": "default",
+            "darkValue": "#d07c7c",
+            "darkOriginalValue": "night-red.light01",
+            "lightValue": "#f07575",
+            "lightOriginalValue": "red.light01"
+        },
+        "color-chart-negative-subtle": {
+            "name": "chart.negative",
+            "subState": "subtle",
+            "darkValue": "#312b31",
+            "darkOriginalValue": "night-red.dark02",
+            "lightValue": "#fde8e8",
+            "lightOriginalValue": "red.light03"
+        },
+        "color-chart-negative-bold": {
+            "name": "chart.negative",
+            "subState": "bold",
+            "darkValue": "#f49a9a",
+            "darkOriginalValue": "night-red.light02",
+            "lightValue": "#dc4847",
+            "lightOriginalValue": "red.dark01"
+        },
+        "color-chart-info-default": {
+            "name": "chart.info",
+            "subState": "default",
+            "darkValue": "#6e95cf",
+            "darkOriginalValue": "night-blue.light01",
+            "lightValue": "#6e95cf",
+            "lightOriginalValue": "blue.light01"
+        },
+        "color-chart-info-subtle": {
+            "name": "chart.info",
+            "subState": "subtle",
+            "darkValue": "#282e39",
+            "darkOriginalValue": "night-blue.dark02",
+            "lightValue": "#e7effe",
+            "lightOriginalValue": "blue.light03"
+        },
+        "color-chart-info-bold": {
+            "name": "chart.info",
+            "subState": "bold",
+            "darkValue": "#99c1fa",
+            "darkOriginalValue": "night-blue.light02",
+            "lightValue": "#295dae",
+            "lightOriginalValue": "blue.dark01"
+        },
+        "color-chart-accent-default": {
+            "name": "chart.accent",
+            "subState": "default",
+            "darkValue": "#0aa6b8",
+            "darkOriginalValue": "brand.regular",
+            "lightValue": "#0aa6b8",
+            "lightOriginalValue": "brand.regular"
+        },
+        "color-chart-accent-subtle": {
+            "name": "chart.accent",
+            "subState": "subtle",
+            "darkValue": "#262f36",
+            "darkOriginalValue": "night-brand.dark02",
+            "lightValue": "#e7f6f8",
+            "lightOriginalValue": "brand.light03"
+        },
+        "color-chart-accent-bold": {
+            "name": "chart.accent",
+            "subState": "bold",
+            "darkValue": "#80dfea",
+            "darkOriginalValue": "night-brand.light02",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
+        }
+    },
+    "media-item": {
+        "color-media-item-background-black": {
+            "name": "media-item.background",
+            "subState": "black",
+            "darkValue": "#000000",
+            "darkOriginalValue": "",
+            "lightValue": "#000000",
+            "lightOriginalValue": ""
+        },
+        "color-media-item-background-white": {
+            "name": "media-item.background",
+            "subState": "white",
+            "darkValue": "#FFFFFF",
+            "darkOriginalValue": "",
+            "lightValue": "#FFFFFF",
+            "lightOriginalValue": ""
+        },
+        "color-media-item-background-transparent": {
+            "name": "media-item.background",
+            "subState": "transparent",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "rgba(255, 255, 255, 0)",
+            "lightOriginalValue": "neutral.transparent"
+        },
+        "color-media-item-overlay-hover": {
+            "name": "media-item.overlay",
+            "subState": "hover",
+            "darkValue": "rgba(0, 0, 0, 0.3)",
+            "darkOriginalValue": "neutral.black-transparent03",
+            "lightValue": "rgba(255, 255, 255, 0.3)",
+            "lightOriginalValue": "neutral.white-transparent03"
+        },
+        "color-media-item-overlay-active": {
+            "name": "media-item.overlay",
+            "subState": "active",
+            "darkValue": "rgba(0, 0, 0, 0.6)",
+            "darkOriginalValue": "neutral.black-transparent02",
+            "lightValue": "rgba(0, 0, 0, 0.6)",
+            "lightOriginalValue": "neutral.black-transparent02"
+        },
+        "color-media-item-category-icon-background": {
+            "name": "media-item.category-icon",
+            "subState": "background",
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
+        }
+    },
     "canvas": {
         "color-canvas": {
             "name": "canvas",
@@ -265,6 +699,7 @@
         },
         "color-background-secondary-hover": {
             "name": "background.secondary",
+            "description": "Hover color for secondary background",
             "subState": "hover",
             "darkValue": "#282c34",
             "darkOriginalValue": "night-black.regular",
@@ -273,6 +708,7 @@
         },
         "color-background-secondary-active": {
             "name": "background.secondary",
+            "description": "Active color for secondary background",
             "subState": "active",
             "darkValue": "#1e2125",
             "darkOriginalValue": "night-black.dark02",
@@ -290,6 +726,7 @@
         },
         "color-background-accent-hover": {
             "name": "background.accent",
+            "description": "Hover color for accent background",
             "subState": "hover",
             "darkValue": "#2e9aa7",
             "darkOriginalValue": "night-brand.light01",
@@ -298,6 +735,7 @@
         },
         "color-background-accent-active": {
             "name": "background.accent",
+            "description": "Active color for accent background",
             "subState": "active",
             "darkValue": "#223c44",
             "darkOriginalValue": "night-brand.dark01",
@@ -306,6 +744,7 @@
         },
         "color-background-accent-disabled": {
             "name": "background.accent",
+            "description": "Use as background color for disabled state of certain UI elements",
             "subState": "disabled",
             "darkValue": "rgba(29, 102, 112, 0.3)",
             "darkOriginalValue": "night-brand.regular-transparent",
@@ -331,6 +770,7 @@
         },
         "color-background-onAccent-hover": {
             "name": "background.onAccent",
+            "description": "Hover color for onAccent background",
             "subState": "hover",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
@@ -339,6 +779,7 @@
         },
         "color-background-onAccent-active": {
             "name": "background.onAccent",
+            "description": "Active color for onAccent background",
             "subState": "active",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
@@ -347,6 +788,7 @@
         },
         "color-background-onAccent-disabled": {
             "name": "background.onAccent",
+            "description": "Use as background color for disabled state of certain UI elements",
             "subState": "disabled",
             "darkValue": "rgba(255, 255, 255, 0.6)",
             "darkOriginalValue": "neutral.white-transparent02",
@@ -363,6 +805,7 @@
         },
         "color-background-error-hover": {
             "name": "background.error",
+            "description": "Hover color for error background",
             "subState": "hover",
             "darkValue": "#d07c7c",
             "darkOriginalValue": "night-red.light01",
@@ -371,6 +814,7 @@
         },
         "color-background-error-active": {
             "name": "background.error",
+            "description": "Active color for error background",
             "subState": "active",
             "darkValue": "#4d3237",
             "darkOriginalValue": "night-red.dark01",
@@ -379,6 +823,7 @@
         },
         "color-background-error-disabled": {
             "name": "background.error",
+            "description": "Use as background color for disabled state of certain UI elements",
             "subState": "disabled",
             "darkValue": "rgba(164, 83, 85, 0.3)",
             "darkOriginalValue": "night-red.regular-transparent01",
@@ -555,6 +1000,7 @@
         },
         "color-background-transparent-hover": {
             "name": "background.transparent",
+            "description": "Use as background color for hover state of certain UI elements",
             "subState": "hover",
             "darkValue": "rgba(147, 151, 159, 0.08)",
             "darkOriginalValue": "night-gray.regular-transparent03",
@@ -563,6 +1009,7 @@
         },
         "color-background-transparent-active": {
             "name": "background.transparent",
+            "description": "Use as background color for active state of certain UI elements",
             "subState": "active",
             "darkValue": "#282c34",
             "darkOriginalValue": "night-black.regular",
@@ -571,6 +1018,7 @@
         },
         "color-background-transparent-selectedHover": {
             "name": "background.transparent",
+            "description": "Use as background color for 'selected / on' state of certain UI elements when hovered",
             "subState": "selectedHover",
             "darkValue": "#393e47",
             "darkOriginalValue": "night-black.light02",
@@ -608,949 +1056,524 @@
         },
         "color-text-primary-hover": {
             "name": "text.primary",
+            "description": "Hover color for primary text",
             "subState": "hover",
-            "darkValue": "#ffffff",
-            "darkOriginalValue": "neutral.white",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
-        },
-        "color-text-secondary-default": {
-            "name": "text.secondary",
-            "description": "Use for content that is secondary or that provides additional context",
-            "subState": "default",
-            "darkValue": "#b9bcc3",
-            "darkOriginalValue": "night-gray.light01",
-            "lightValue": "#40515e",
-            "lightOriginalValue": "gray.dark01"
-        },
-        "color-text-secondary-hover": {
-            "name": "text.secondary",
-            "subState": "hover",
-            "darkValue": "#ced1d6",
-            "darkOriginalValue": "night-gray.light02",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
-        },
-        "color-text-tertiary-default": {
-            "name": "text.tertiary",
-            "description": "Use for placeholder or 'decorative' text that are not critical to understanding the flow of an interface",
-            "subState": "default",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-text-tertiary-disabled": {
-            "name": "text.tertiary",
-            "subState": "disabled",
-            "darkValue": "rgba(216, 218, 222, 0.3)",
-            "darkOriginalValue": "night-gray.light03-transparent",
-            "lightValue": "rgba(64, 81, 94, 0.3)",
-            "lightOriginalValue": "gray.dark01-transparent"
-        },
-        "color-text-tertiary-hover": {
-            "name": "text.tertiary",
-            "subState": "hover",
-            "darkValue": "#b9bcc3",
-            "darkOriginalValue": "night-gray.light01",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
-        },
-        "color-text-quaternary-default": {
-            "name": "text.quaternary",
-            "subState": "default",
-            "darkValue": "#757a84",
-            "darkOriginalValue": "night-gray.dark01",
-            "lightValue": "#a3b2bd",
-            "lightOriginalValue": "gray.light01"
-        },
-        "color-text-accent-default": {
-            "name": "text.accent",
-            "description": "Use for the main variant of interactive text (links)",
-            "subState": "default",
-            "darkValue": "#2e9aa7",
-            "darkOriginalValue": "night-brand.light01",
-            "lightValue": "#047a88",
-            "lightOriginalValue": "brand.dark01"
-        },
-        "color-text-accent-hover": {
-            "name": "text.accent",
-            "subState": "hover",
-            "darkValue": "#80dfea",
-            "darkOriginalValue": "night-brand.light02",
-            "lightValue": "#054f57",
-            "lightOriginalValue": "brand.dark02"
-        },
-        "color-text-onAccent-default": {
-            "name": "text.onAccent",
-            "description": "Use on top of background.accent or other colored-background (e.g. the text label on primary button)",
-            "subState": "default",
-            "darkValue": "#ffffff",
-            "darkOriginalValue": "neutral.white",
-            "lightValue": "#ffffff",
-            "lightOriginalValue": "neutral.white"
-        },
-        "color-text-onAccent-disabled": {
-            "name": "text.onAccent",
-            "subState": "disabled",
-            "darkValue": "rgba(216, 218, 222, 0.3)",
-            "darkOriginalValue": "night-gray.light03-transparent",
-            "lightValue": "rgba(255, 255, 255, 0.6)",
-            "lightOriginalValue": "neutral.white-transparent02"
-        },
-        "color-text-onAccentSubtle-default": {
-            "name": "text.onAccentSubtle",
-            "description": "Use on top of background.accent for text elements with lower visual hierarchy, such as placeholder texts.",
-            "subState": "default",
-            "darkValue": "rgba(255, 255, 255, 0.6)",
-            "darkOriginalValue": "neutral.white-transparent02",
-            "lightValue": "rgba(255, 255, 255, 0.6)",
-            "lightOriginalValue": "neutral.white-transparent02"
-        },
-        "color-text-info-default": {
-            "name": "text.info",
-            "description": "Use this text color for neutral information that needs to be elevated from the normal content",
-            "subState": "default",
-            "darkValue": "#99c1fa",
-            "darkOriginalValue": "night-blue.light02",
-            "lightValue": "#1c427d",
-            "lightOriginalValue": "blue.dark02"
-        },
-        "color-text-error-default": {
-            "name": "text.error",
-            "description": "Use in combination with other visual cues to emphasize a negative message",
-            "subState": "default",
-            "darkValue": "#f49a9a",
-            "darkOriginalValue": "night-red.light02",
-            "lightValue": "#c02725",
-            "lightOriginalValue": "red.dark02"
-        },
-        "color-text-error-disabled": {
-            "name": "text.error",
-            "subState": "disabled",
-            "darkValue": "rgba(244, 154, 154, 0.3)",
-            "darkOriginalValue": "night-red.light02-transparent",
-            "lightValue": "rgba(192, 39, 37, 0.3)",
-            "lightOriginalValue": "red.dark02-transparent"
-        },
-        "color-text-warning-default": {
-            "name": "text.warning",
-            "description": "Use in combination with other visual cues and warningSubtle background color to emphasize a negative message",
-            "subState": "default",
-            "darkValue": "#fae0b3",
-            "darkOriginalValue": "night-orange.light02",
-            "lightValue": "#314554",
-            "lightOriginalValue": "gray.dark02"
-        },
-        "color-text-success-default": {
-            "name": "text.success",
-            "description": "Use in combination with other visual cues to emphasize a positive message",
-            "subState": "default",
-            "darkValue": "#a6f2dd",
-            "darkOriginalValue": "night-green.light02",
-            "lightValue": "#0a5c45",
-            "lightOriginalValue": "green.dark02"
-        },
-        "color-text-underline-default": {
-            "name": "text.underline",
-            "description": "Use for line color of a regular link",
-            "subState": "default",
-            "darkValue": "#757a84",
-            "darkOriginalValue": "night-gray.dark01",
-            "lightValue": "#a3b2bd",
-            "lightOriginalValue": "gray.light01"
-        },
-        "color-text-underline-hover": {
-            "name": "text.underline",
-            "subState": "hover",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-text-dottedUnderline-default": {
-            "name": "text.dottedUnderline",
-            "description": "Use for line color of a dotted link",
-            "subState": "default",
-            "darkValue": "#b9bcc3",
-            "darkOriginalValue": "night-gray.light01",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-text-dottedUnderline-hover": {
-            "name": "text.dottedUnderline",
-            "subState": "hover",
-            "darkValue": "#ced1d6",
-            "darkOriginalValue": "night-gray.light02",
-            "lightValue": "#40515e",
-            "lightOriginalValue": "gray.dark01"
-        }
-    },
-    "icon": {
-        "color-icon-primary-default": {
-            "name": "icon.primary",
-            "description": "Default color for icons in any given interface",
-            "subState": "default",
-            "darkValue": "#d8dade",
-            "darkOriginalValue": "night-gray.light03",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
-        },
-        "color-icon-primary-hover": {
-            "name": "icon.primary",
-            "description": "Hover color for primary icons",
-            "subState": "hover",
-            "darkValue": "#d8dade",
-            "darkOriginalValue": "night-gray.light03",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
             "lightValue": "#1a1c1c",
             "lightOriginalValue": "neutral.black"
         },
-        "color-icon-secondary-default": {
-            "name": "icon.secondary",
-            "description": "Use for icons that are secondary or that provides additional context",
+        "color-text-secondary-default": {
+            "name": "text.secondary",
+            "description": "Use for content that is secondary or that provides additional context",
             "subState": "default",
-            "darkValue": "#ced1d6",
-            "darkOriginalValue": "night-gray.light02",
+            "darkValue": "#b9bcc3",
+            "darkOriginalValue": "night-gray.light01",
             "lightValue": "#40515e",
             "lightOriginalValue": "gray.dark01"
         },
-        "color-icon-secondary-hover": {
-            "name": "icon.secondary",
-            "description": "Hover color for secondary icons",
+        "color-text-secondary-hover": {
+            "name": "text.secondary",
+            "description": "Hover color for secondary text",
             "subState": "hover",
-            "darkValue": "#d8dade",
-            "darkOriginalValue": "night-gray.light03",
-            "lightValue": "#314554",
-            "lightOriginalValue": "gray.dark02"
+            "darkValue": "#ced1d6",
+            "darkOriginalValue": "night-gray.light02",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
         },
-        "color-icon-tertiary-default": {
-            "name": "icon.tertiary",
-            "description": "Use for icons that provides additional context or to display unselected state of certain UI elements, such as mobile app tab bars",
+        "color-text-tertiary-default": {
+            "name": "text.tertiary",
+            "description": "Use for placeholder or 'decorative' text that are not critical to understanding the flow of an interface",
             "subState": "default",
             "darkValue": "#93979f",
             "darkOriginalValue": "night-gray.regular",
             "lightValue": "#607585",
             "lightOriginalValue": "gray.regular"
         },
-        "color-icon-tertiary-hover": {
-            "name": "icon.tertiary",
-            "description": "Hover color for tertiary icons",
+        "color-text-tertiary-disabled": {
+            "name": "text.tertiary",
+            "description": "Use for disabled text elements",
+            "subState": "disabled",
+            "darkValue": "rgba(216, 218, 222, 0.3)",
+            "darkOriginalValue": "night-gray.light03-transparent",
+            "lightValue": "rgba(64, 81, 94, 0.3)",
+            "lightOriginalValue": "gray.dark01-transparent"
+        },
+        "color-text-tertiary-hover": {
+            "name": "text.tertiary",
+            "description": "Hover color for tertiary text",
             "subState": "hover",
             "darkValue": "#b9bcc3",
             "darkOriginalValue": "night-gray.light01",
-            "lightValue": "#40515e",
-            "lightOriginalValue": "gray.dark01"
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
         },
-        "color-icon-quaternary-default": {
-            "name": "icon.quaternary",
-            "description": "Use for 'decorative' icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
+        "color-text-quaternary-default": {
+            "name": "text.quaternary",
             "subState": "default",
             "darkValue": "#757a84",
             "darkOriginalValue": "night-gray.dark01",
             "lightValue": "#a3b2bd",
             "lightOriginalValue": "gray.light01"
         },
-        "color-icon-quaternary-hover": {
-            "name": "icon.quaternary",
-            "description": "Hover color for quaternary icons",
-            "subState": "hover",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-icon-accent-default": {
-            "name": "icon.accent",
-            "description": "Use for icons that accompany the main variant of interactive text (links)",
+        "color-text-accent-default": {
+            "name": "text.accent",
+            "description": "Use for the main variant of interactive text (links)",
             "subState": "default",
             "darkValue": "#2e9aa7",
             "darkOriginalValue": "night-brand.light01",
             "lightValue": "#047a88",
             "lightOriginalValue": "brand.dark01"
         },
-        "color-icon-accent-hover": {
-            "name": "icon.accent",
-            "description": "Hover color for accent icons",
+        "color-text-accent-hover": {
+            "name": "text.accent",
+            "description": "Hover color for accent text",
             "subState": "hover",
             "darkValue": "#80dfea",
             "darkOriginalValue": "night-brand.light02",
             "lightValue": "#054f57",
-            "lightOriginalValue": "brand.dark02"
-        },
-        "color-icon-onAccent-default": {
-            "name": "icon.onAccent",
-            "description": "Use for icons that are placed on top of background.accent (e.g. the icon on primary button)",
-            "subState": "default",
-            "darkValue": "#ffffff",
-            "darkOriginalValue": "neutral.white",
-            "lightValue": "#ffffff",
-            "lightOriginalValue": "neutral.white"
-        },
-        "color-icon-onAccent-hover": {
-            "name": "icon.onAccent",
-            "description": "Hover color for onAccent icons (same as default since white doesn't have darker shade)",
-            "subState": "hover",
-            "darkValue": "#ffffff",
-            "darkOriginalValue": "neutral.white",
-            "lightValue": "#ffffff",
-            "lightOriginalValue": "neutral.white"
-        },
-        "color-icon-onAccentSubtle-default": {
-            "name": "icon.onAccentSubtle",
-            "description": "Use on top of background.accent for icons with lower visual hierarchy",
-            "subState": "default",
-            "darkValue": "rgba(255, 255, 255, 0.6)",
-            "darkOriginalValue": "neutral.white-transparent02",
-            "lightValue": "rgba(255, 255, 255, 0.6)",
-            "lightOriginalValue": "neutral.white-transparent02"
-        },
-        "color-icon-onAccentSubtle-hover": {
-            "name": "icon.onAccentSubtle",
-            "description": "Hover color for onAccentSubtle icons",
-            "subState": "hover",
-            "darkValue": "rgba(255, 255, 255, 0.3)",
-            "darkOriginalValue": "neutral.white-transparent03",
-            "lightValue": "rgba(255, 255, 255, 0.8)",
-            "lightOriginalValue": "neutral.white-transparent01"
-        },
-        "color-icon-info-default": {
-            "name": "icon.info",
-            "description": "Use for icons that accompany neutral information which needs to be elevated from the normal content",
-            "subState": "default",
-            "darkValue": "#6e95cf",
-            "darkOriginalValue": "night-blue.light01",
-            "lightValue": "#295dae",
-            "lightOriginalValue": "blue.dark01"
-        },
-        "color-icon-info-hover": {
-            "name": "icon.info",
-            "description": "Hover color for info icons",
-            "subState": "hover",
-            "darkValue": "#99c1fa",
-            "darkOriginalValue": "night-blue.light02",
-            "lightValue": "#1c427d",
-            "lightOriginalValue": "blue.dark02"
-        },
-        "color-icon-error-default": {
-            "name": "icon.error",
-            "description": "Use for icons that accompany negative messages",
-            "subState": "default",
-            "darkValue": "#d07c7c",
-            "darkOriginalValue": "night-red.light01",
-            "lightValue": "#dc4847",
-            "lightOriginalValue": "red.dark01"
-        },
-        "color-icon-error-hover": {
-            "name": "icon.error",
-            "description": "Hover color for error icons",
-            "subState": "hover",
-            "darkValue": "#f49a9a",
-            "darkOriginalValue": "night-red.light02",
-            "lightValue": "#c02725",
-            "lightOriginalValue": "red.dark02"
-        },
-        "color-icon-warning-default": {
-            "name": "icon.warning",
-            "description": "Use for icons that accompany warning messages",
-            "subState": "default",
-            "darkValue": "#cbac76",
-            "darkOriginalValue": "night-orange.light01",
-            "lightValue": "#df9411",
-            "lightOriginalValue": "orange.dark01"
-        },
-        "color-icon-warning-hover": {
-            "name": "icon.warning",
-            "description": "Hover color for warning icons",
-            "subState": "hover",
-            "darkValue": "#fae0b3",
-            "darkOriginalValue": "night-orange.light02",
-            "lightValue": "#9a6304",
-            "lightOriginalValue": "orange.dark02"
-        },
-        "color-icon-success-default": {
-            "name": "icon.success",
-            "description": "Use for icons that accompany positive messages",
-            "subState": "default",
-            "darkValue": "#41a48a",
-            "darkOriginalValue": "night-green.light01",
-            "lightValue": "#0b8363",
-            "lightOriginalValue": "green.dark01"
-        },
-        "color-icon-success-hover": {
-            "name": "icon.success",
-            "description": "Hover color for success icons",
-            "subState": "hover",
-            "darkValue": "#a6f2dd",
-            "darkOriginalValue": "night-green.light02",
-            "lightValue": "#0a5c45",
-            "lightOriginalValue": "green.dark02"
-        },
-        "color-icon-brand-default": {
-            "name": "icon.brand",
-            "description": "Currently used for icons",
-            "subState": "default",
-            "darkValue": "#2e9aa7",
-            "darkOriginalValue": "night-brand.light01",
-            "lightValue": "#0aa6b8",
-            "lightOriginalValue": "brand.regular"
-        },
-        "color-icon-brand-hover": {
-            "name": "icon.brand",
-            "description": "Hover color for brand icons",
-            "subState": "hover",
-            "darkValue": "#80dfea",
-            "darkOriginalValue": "night-brand.light02",
-            "lightValue": "#047a88",
-            "lightOriginalValue": "brand.dark01"
-        }
-    },
-    "border": {
-        "color-border-primary-default": {
-            "name": "border.primary",
-            "description": "Use to create bounds around UI elements (e.g. Secondary buttons and radio buttons)",
-            "subState": "default",
-            "darkValue": "#5b5f67",
-            "darkOriginalValue": "night-gray.dark02",
-            "lightValue": "#a3b2bd",
-            "lightOriginalValue": "gray.light01"
-        },
-        "color-border-primary-hover": {
-            "name": "border.primary",
-            "subState": "hover",
-            "darkValue": "#757a84",
-            "darkOriginalValue": "night-gray.dark01",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-border-primary-active": {
-            "name": "border.primary",
-            "subState": "active",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#40515e",
-            "lightOriginalValue": "gray.dark01"
-        },
-        "color-border-primary-disabled": {
-            "name": "border.primary",
-            "subState": "disabled",
-            "darkValue": "rgba(147, 151, 159, 0.08)",
-            "darkOriginalValue": "night-gray.regular-transparent03",
-            "lightValue": "rgba(163, 178, 189, 0.3)",
-            "lightOriginalValue": "gray.light01-transparent"
-        },
-        "color-border-secondary-default": {
-            "name": "border.secondary",
-            "subState": "default",
-            "darkValue": "rgba(147, 149, 159, 0.3)",
-            "darkOriginalValue": "night-gray.regular-transparent01",
-            "lightValue": "rgba(163, 178, 189, 0.3)",
-            "lightOriginalValue": "gray.light01-transparent"
-        },
-        "color-border-accent-default": {
-            "name": "border.accent",
-            "description": "Use as selected state or “on” state of certain UI elements (e.g. radio buttons)",
-            "subState": "default",
-            "darkValue": "#2e9aa7",
-            "darkOriginalValue": "night-brand.light01",
-            "lightValue": "#047a88",
-            "lightOriginalValue": "brand.dark01"
-        },
-        "color-border-onAccent-default": {
-            "name": "border.onAccent",
-            "description": "Use for border that are placed on top of background.accent ",
+            "lightOriginalValue": "brand.dark02"
+        },
+        "color-text-onAccent-default": {
+            "name": "text.onAccent",
+            "description": "Use on top of background.accent or other colored-background (e.g. the text label on primary button)",
             "subState": "default",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
             "lightValue": "#ffffff",
             "lightOriginalValue": "neutral.white"
         },
-        "color-border-accentSubtle-default": {
-            "name": "border.accentSubtle",
-            "description": "Use in combination with color.background.accentSubtle to indicate selected state or 'on' state of certain UI elements (e.g. segemented controls)",
-            "subState": "default",
-            "darkValue": "#1d6670",
-            "darkOriginalValue": "night-brand.regular",
-            "lightValue": "#85d3dc",
-            "lightOriginalValue": "brand.light01"
+        "color-text-onAccent-disabled": {
+            "name": "text.onAccent",
+            "description": "Use on top of background.accent for text elements with lower visual hierarchy, such as placeholder texts.",
+            "subState": "disabled",
+            "darkValue": "rgba(216, 218, 222, 0.3)",
+            "darkOriginalValue": "night-gray.light03-transparent",
+            "lightValue": "rgba(255, 255, 255, 0.6)",
+            "lightOriginalValue": "neutral.white-transparent02"
         },
-        "color-border-error-default": {
-            "name": "border.error",
-            "description": "Use in combination with other visual cues to designate an error state of certain UI elements",
+        "color-text-onAccentSubtle-default": {
+            "name": "text.onAccentSubtle",
+            "description": "Use on top of background.accent for text elements with lower visual hierarchy, such as placeholder texts.",
             "subState": "default",
-            "darkValue": "#d07c7c",
-            "darkOriginalValue": "night-red.light01",
-            "lightValue": "#dc4847",
-            "lightOriginalValue": "red.dark01"
+            "darkValue": "rgba(255, 255, 255, 0.6)",
+            "darkOriginalValue": "neutral.white-transparent02",
+            "lightValue": "rgba(255, 255, 255, 0.6)",
+            "lightOriginalValue": "neutral.white-transparent02"
         },
-        "color-border-success-default": {
-            "name": "border.success",
-            "description": "Use in combination with other visual cues to designate a success state of certain UI elements",
+        "color-text-info-default": {
+            "name": "text.info",
+            "description": "Use this text color for neutral information that needs to be elevated from the normal content",
             "subState": "default",
-            "darkValue": "#41a48a",
-            "darkOriginalValue": "night-green.light01",
-            "lightValue": "#0b8363",
-            "lightOriginalValue": "green.dark01"
-        }
-    },
-    "divider": {
-        "color-divider-primary": {
-            "name": "divider.primary",
-            "description": "Use for dividers to emphasize the separation between items, columns or sections",
-            "subState": "",
-            "darkValue": "#32363e",
-            "darkOriginalValue": "night-black.light01",
-            "lightValue": "#e0e6eb",
-            "lightOriginalValue": "gray.light02"
-        },
-        "color-divider-secondary": {
-            "name": "divider.secondary",
-            "subState": "",
-            "darkValue": "rgba(147, 149, 159, 0.15)",
-            "darkOriginalValue": "night-gray.regular-transparent02",
-            "lightValue": "rgba(163, 178, 189, 0.3)",
-            "lightOriginalValue": "gray.light01-transparent"
+            "darkValue": "#99c1fa",
+            "darkOriginalValue": "night-blue.light02",
+            "lightValue": "#1c427d",
+            "lightOriginalValue": "blue.dark02"
         },
-        "color-divider-secondarySolid": {
-            "name": "divider.secondarySolid",
-            "subState": "",
-            "darkValue": "#32363e",
-            "darkOriginalValue": "night-black.light01",
-            "lightValue": "#eef2f5",
-            "lightOriginalValue": "gray.light03"
-        }
-    },
-    "toggle": {
-        "color-toggle-background-highlight": {
-            "name": "toggle.background",
-            "subState": "highlight",
-            "darkValue": "#b2ab39",
-            "darkOriginalValue": "night-yellow.regular",
-            "lightValue": "#f3eb75",
-            "lightOriginalValue": "yellow.light01"
+        "color-text-error-default": {
+            "name": "text.error",
+            "description": "Use in combination with other visual cues to emphasize a negative message",
+            "subState": "default",
+            "darkValue": "#f49a9a",
+            "darkOriginalValue": "night-red.light02",
+            "lightValue": "#c02725",
+            "lightOriginalValue": "red.dark02"
         },
-        "color-toggle-border-highlight": {
-            "name": "toggle.border",
-            "subState": "highlight",
-            "darkValue": "#b2ab39",
-            "darkOriginalValue": "night-yellow.regular",
-            "lightValue": "#f3eb75",
-            "lightOriginalValue": "yellow.light01"
-        }
-    },
-    "segmented-progress-bar": {
-        "color-segmented-progress-bar-monochrome": {
-            "name": "segmented-progress-bar.monochrome",
-            "subState": "",
-            "darkValue": "#ced1d6",
-            "darkOriginalValue": "night-gray.light02",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
+        "color-text-error-disabled": {
+            "name": "text.error",
+            "description": "Use for disabled error text elements",
+            "subState": "disabled",
+            "darkValue": "rgba(244, 154, 154, 0.3)",
+            "darkOriginalValue": "night-red.light02-transparent",
+            "lightValue": "rgba(192, 39, 37, 0.3)",
+            "lightOriginalValue": "red.dark02-transparent"
         },
-        "color-segmented-progress-bar-success": {
-            "name": "segmented-progress-bar.success",
-            "subState": "",
-            "darkValue": "#28816b",
-            "darkOriginalValue": "night-green.regular",
-            "lightValue": "#39d6ac",
-            "lightOriginalValue": "green.regularAlt"
+        "color-text-warning-default": {
+            "name": "text.warning",
+            "description": "Use in combination with other visual cues and warningSubtle background color to emphasize a negative message",
+            "subState": "default",
+            "darkValue": "#fae0b3",
+            "darkOriginalValue": "night-orange.light02",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
         },
-        "color-segmented-progress-bar-warning": {
-            "name": "segmented-progress-bar.warning",
-            "subState": "",
-            "darkValue": "#a4792d",
-            "darkOriginalValue": "night-orange.regular",
-            "lightValue": "#f1d56b",
-            "lightOriginalValue": "orange.regularAlt"
+        "color-text-success-default": {
+            "name": "text.success",
+            "description": "Use in combination with other visual cues to emphasize a positive message",
+            "subState": "default",
+            "darkValue": "#a6f2dd",
+            "darkOriginalValue": "night-green.light02",
+            "lightValue": "#0a5c45",
+            "lightOriginalValue": "green.dark02"
         },
-        "color-segmented-progress-bar-alert": {
-            "name": "segmented-progress-bar.alert",
-            "subState": "",
-            "darkValue": "#a45355",
-            "darkOriginalValue": "night-red.regular",
-            "lightValue": "#f07575",
-            "lightOriginalValue": "red.light01"
+        "color-text-underline-default": {
+            "name": "text.underline",
+            "description": "Use for line color of a regular link",
+            "subState": "default",
+            "darkValue": "#757a84",
+            "darkOriginalValue": "night-gray.dark01",
+            "lightValue": "#a3b2bd",
+            "lightOriginalValue": "gray.light01"
         },
-        "color-segmented-progress-bar-in-progress": {
-            "name": "segmented-progress-bar.in-progress",
-            "subState": "",
-            "darkValue": "#5b5f67",
-            "darkOriginalValue": "night-gray.dark02",
-            "lightValue": "#e0e6eb",
-            "lightOriginalValue": "gray.light02"
-        }
-    },
-    "tag": {
-        "color-tag-background-gray": {
-            "name": "tag.background",
-            "subState": "gray",
-            "darkValue": "#5b5f67",
-            "darkOriginalValue": "night-gray.dark02",
-            "lightValue": "#e0e6eb",
-            "lightOriginalValue": "gray.light02"
+        "color-text-underline-hover": {
+            "name": "text.underline",
+            "description": "Hover color for underline text",
+            "subState": "hover",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
         },
-        "color-tag-background-blue": {
-            "name": "tag.background",
-            "subState": "blue",
-            "darkValue": "#2f538a",
-            "darkOriginalValue": "night-blue.regular",
-            "lightValue": "#d2e2f9",
-            "lightOriginalValue": "blue.light02"
+        "color-text-dottedUnderline-default": {
+            "name": "text.dottedUnderline",
+            "description": "Use for line color of a dotted link",
+            "subState": "default",
+            "darkValue": "#b9bcc3",
+            "darkOriginalValue": "night-gray.light01",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
         },
-        "color-tag-text-gray": {
-            "name": "tag.text",
-            "subState": "gray",
+        "color-text-dottedUnderline-hover": {
+            "name": "text.dottedUnderline",
+            "description": "Hover color for dotted underline text",
+            "subState": "hover",
             "darkValue": "#ced1d6",
             "darkOriginalValue": "night-gray.light02",
             "lightValue": "#40515e",
             "lightOriginalValue": "gray.dark01"
-        },
-        "color-tag-text-blue": {
-            "name": "tag.text",
-            "subState": "blue",
-            "darkValue": "#e7effe",
-            "darkOriginalValue": "night-blue.light03",
-            "lightValue": "#1c427d",
-            "lightOriginalValue": "blue.dark02"
-        }
-    },
-    "destructive-tertiary-button": {
-        "color-destructive-tertiary-button-background-hover": {
-            "name": "destructive-tertiary-button.background",
-            "subState": "hover",
-            "darkValue": "rgba(164, 83, 85, 0.08)",
-            "darkOriginalValue": "night-red.regular-transparent02",
-            "lightValue": "rgba(238, 97, 96, 0.08)",
-            "lightOriginalValue": "red.regular-transparent02"
-        },
-        "color-destructive-tertiary-button-background-active": {
-            "name": "destructive-tertiary-button.background",
-            "subState": "active",
-            "darkValue": "rgba(164, 83, 85, 0.08)",
-            "darkOriginalValue": "night-red.regular-transparent02",
-            "lightValue": "rgba(238, 97, 96, 0.08)",
-            "lightOriginalValue": "red.regular-transparent02"
         }
     },
-    "range-input": {
-        "color-range-input-background-thumb": {
-            "name": "range-input.background",
-            "subState": "thumb",
+    "icon": {
+        "color-icon-primary-default": {
+            "name": "icon.primary",
+            "description": "Default color for icons in any given interface",
+            "subState": "default",
             "darkValue": "#d8dade",
             "darkOriginalValue": "night-gray.light03",
-            "lightValue": "#ffffff",
-            "lightOriginalValue": "neutral.white"
-        }
-    },
-    "search-input": {
-        "color-search-input-background-default": {
-            "name": "search-input.background",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
+        },
+        "color-icon-primary-hover": {
+            "name": "icon.primary",
+            "description": "Hover color for primary icons",
+            "subState": "hover",
+            "darkValue": "#d8dade",
+            "darkOriginalValue": "night-gray.light03",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
+        },
+        "color-icon-secondary-default": {
+            "name": "icon.secondary",
+            "description": "Use for icons that are secondary or that provides additional context",
             "subState": "default",
-            "darkValue": "#32363e",
-            "darkOriginalValue": "night-black.light01",
-            "lightValue": "#eef2f5",
-            "lightOriginalValue": "gray.light03"
-        }
-    },
-    "qbank-answer": {
-        "color-qbank-answer-background-title": {
-            "name": "qbank-answer.background",
-            "subState": "title",
-            "darkValue": "rgba(164, 83, 85, 0.45)",
-            "darkOriginalValue": "night-red.regular-transparent",
-            "lightValue": "rgba(240, 117, 117, 0.45)",
-            "lightOriginalValue": "red.light01-transparent"
+            "darkValue": "#ced1d6",
+            "darkOriginalValue": "night-gray.light02",
+            "lightValue": "#40515e",
+            "lightOriginalValue": "gray.dark01"
         },
-        "color-qbank-answer-background-explanation": {
-            "name": "qbank-answer.background",
-            "subState": "explanation",
-            "darkValue": "#312b31",
-            "darkOriginalValue": "night-red.dark02",
-            "lightValue": "#fde8e8",
-            "lightOriginalValue": "red.light03"
+        "color-icon-secondary-hover": {
+            "name": "icon.secondary",
+            "description": "Hover color for secondary icons",
+            "subState": "hover",
+            "darkValue": "#d8dade",
+            "darkOriginalValue": "night-gray.light03",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
         },
-        "color-qbank-answer-border-correct": {
-            "name": "qbank-answer.border",
-            "subState": "correct",
-            "darkValue": "#28816b",
-            "darkOriginalValue": "night-green.regular",
-            "lightValue": "#8adcc6",
-            "lightOriginalValue": "green.light01"
+        "color-icon-tertiary-default": {
+            "name": "icon.tertiary",
+            "description": "Use for icons that provides additional context or to display unselected state of certain UI elements, such as mobile app tab bars",
+            "subState": "default",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
         },
-        "color-qbank-answer-border-correct-with-hint": {
-            "name": "qbank-answer.border",
-            "subState": "correct-with-hint",
-            "darkValue": "#a4792d",
-            "darkOriginalValue": "night-orange.regular",
-            "lightValue": "#f6c66f",
-            "lightOriginalValue": "orange.light01"
+        "color-icon-tertiary-hover": {
+            "name": "icon.tertiary",
+            "description": "Hover color for tertiary icons",
+            "subState": "hover",
+            "darkValue": "#b9bcc3",
+            "darkOriginalValue": "night-gray.light01",
+            "lightValue": "#40515e",
+            "lightOriginalValue": "gray.dark01"
         },
-        "color-qbank-answer-border-incorrect": {
-            "name": "qbank-answer.border",
-            "subState": "incorrect",
-            "darkValue": "#a45355",
-            "darkOriginalValue": "night-red.regular",
-            "lightValue": "#f07575",
-            "lightOriginalValue": "red.light01"
-        }
-    },
-    "chart": {
-        "color-chart-border-default": {
-            "name": "chart.border",
+        "color-icon-quaternary-default": {
+            "name": "icon.quaternary",
+            "description": "Use for 'decorative' icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
             "subState": "default",
-            "darkValue": "#5b5f67",
-            "darkOriginalValue": "night-gray.dark02",
+            "darkValue": "#757a84",
+            "darkOriginalValue": "night-gray.dark01",
             "lightValue": "#a3b2bd",
             "lightOriginalValue": "gray.light01"
         },
-        "color-chart-grid-primary": {
-            "name": "chart.grid",
-            "subState": "primary",
-            "darkValue": "rgba(147, 149, 159, 0.3)",
-            "darkOriginalValue": "night-gray.regular-transparent01",
-            "lightValue": "rgba(163, 178, 189, 0.3)",
-            "lightOriginalValue": "gray.light01-transparent"
+        "color-icon-quaternary-hover": {
+            "name": "icon.quaternary",
+            "description": "Hover color for quaternary icons",
+            "subState": "hover",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
         },
-        "color-chart-grid-secondary": {
-            "name": "chart.grid",
-            "subState": "secondary",
-            "darkValue": "rgba(147, 149, 159, 0.3)",
-            "darkOriginalValue": "night-gray.regular-transparent01",
-            "lightValue": "rgba(163, 178, 189, 0.3)",
-            "lightOriginalValue": "gray.light01-transparent"
+        "color-icon-accent-default": {
+            "name": "icon.accent",
+            "description": "Use for icons that accompany the main variant of interactive text (links)",
+            "subState": "default",
+            "darkValue": "#2e9aa7",
+            "darkOriginalValue": "night-brand.light01",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
         },
-        "color-chart-background-default": {
-            "name": "chart.background",
+        "color-icon-accent-hover": {
+            "name": "icon.accent",
+            "description": "Hover color for accent icons",
+            "subState": "hover",
+            "darkValue": "#80dfea",
+            "darkOriginalValue": "night-brand.light02",
+            "lightValue": "#054f57",
+            "lightOriginalValue": "brand.dark02"
+        },
+        "color-icon-onAccent-default": {
+            "name": "icon.onAccent",
+            "description": "Use for icons that are placed on top of background.accent (e.g. the icon on primary button)",
             "subState": "default",
-            "darkValue": "#1a1c1c",
-            "darkOriginalValue": "neutral.black",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
             "lightValue": "#ffffff",
             "lightOriginalValue": "neutral.white"
         },
-        "color-chart-background-inverted": {
-            "name": "chart.background",
-            "subState": "inverted",
+        "color-icon-onAccent-hover": {
+            "name": "icon.onAccent",
+            "description": "Hover color for onAccent icons (same as default since white doesn't have darker shade)",
+            "subState": "hover",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
         },
-        "color-chart-text-positive": {
-            "name": "chart.text",
-            "subState": "positive",
-            "darkValue": "#a6f2dd",
-            "darkOriginalValue": "night-green.light02",
-            "lightValue": "#0b8363",
-            "lightOriginalValue": "green.dark01"
+        "color-icon-onAccentSubtle-default": {
+            "name": "icon.onAccentSubtle",
+            "description": "Use on top of background.accent for icons with lower visual hierarchy",
+            "subState": "default",
+            "darkValue": "rgba(255, 255, 255, 0.6)",
+            "darkOriginalValue": "neutral.white-transparent02",
+            "lightValue": "rgba(255, 255, 255, 0.6)",
+            "lightOriginalValue": "neutral.white-transparent02"
         },
-        "color-chart-text-negative": {
-            "name": "chart.text",
-            "subState": "negative",
-            "darkValue": "#f49a9a",
-            "darkOriginalValue": "night-red.light02",
+        "color-icon-onAccentSubtle-hover": {
+            "name": "icon.onAccentSubtle",
+            "description": "Hover color for onAccentSubtle icons",
+            "subState": "hover",
+            "darkValue": "rgba(255, 255, 255, 0.3)",
+            "darkOriginalValue": "neutral.white-transparent03",
+            "lightValue": "rgba(255, 255, 255, 0.8)",
+            "lightOriginalValue": "neutral.white-transparent01"
+        },
+        "color-icon-info-default": {
+            "name": "icon.info",
+            "description": "Use for icons that accompany neutral information which needs to be elevated from the normal content",
+            "subState": "default",
+            "darkValue": "#6e95cf",
+            "darkOriginalValue": "night-blue.light01",
+            "lightValue": "#295dae",
+            "lightOriginalValue": "blue.dark01"
+        },
+        "color-icon-info-hover": {
+            "name": "icon.info",
+            "description": "Hover color for info icons",
+            "subState": "hover",
+            "darkValue": "#99c1fa",
+            "darkOriginalValue": "night-blue.light02",
+            "lightValue": "#1c427d",
+            "lightOriginalValue": "blue.dark02"
+        },
+        "color-icon-error-default": {
+            "name": "icon.error",
+            "description": "Use for icons that accompany negative messages",
+            "subState": "default",
+            "darkValue": "#d07c7c",
+            "darkOriginalValue": "night-red.light01",
             "lightValue": "#dc4847",
             "lightOriginalValue": "red.dark01"
         },
-        "color-chart-text-warning": {
-            "name": "chart.text",
-            "subState": "warning",
-            "darkValue": "#a4792d",
-            "darkOriginalValue": "night-orange.regular",
-            "lightValue": "#df9411",
-            "lightOriginalValue": "orange.dark01"
+        "color-icon-error-hover": {
+            "name": "icon.error",
+            "description": "Hover color for error icons",
+            "subState": "hover",
+            "darkValue": "#f49a9a",
+            "darkOriginalValue": "night-red.light02",
+            "lightValue": "#c02725",
+            "lightOriginalValue": "red.dark02"
         },
-        "color-chart-neutral-default": {
-            "name": "chart.neutral",
+        "color-icon-warning-default": {
+            "name": "icon.warning",
+            "description": "Use for icons that accompany warning messages",
             "subState": "default",
-            "darkValue": "#5b5f67",
-            "darkOriginalValue": "night-gray.dark02",
-            "lightValue": "#a3b2bd",
-            "lightOriginalValue": "gray.light01"
-        },
-        "color-chart-neutral-subtle": {
-            "name": "chart.neutral",
-            "subState": "subtle",
-            "darkValue": "#1e2125",
-            "darkOriginalValue": "night-black.dark02",
-            "lightValue": "#eef2f5",
-            "lightOriginalValue": "gray.light03"
+            "darkValue": "#cbac76",
+            "darkOriginalValue": "night-orange.light01",
+            "lightValue": "#df9411",
+            "lightOriginalValue": "orange.dark01"
         },
-        "color-chart-neutral-bold": {
-            "name": "chart.neutral",
-            "subState": "bold",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
+        "color-icon-warning-hover": {
+            "name": "icon.warning",
+            "description": "Hover color for warning icons",
+            "subState": "hover",
+            "darkValue": "#fae0b3",
+            "darkOriginalValue": "night-orange.light02",
+            "lightValue": "#9a6304",
+            "lightOriginalValue": "orange.dark02"
         },
-        "color-chart-positive-default": {
-            "name": "chart.positive",
+        "color-icon-success-default": {
+            "name": "icon.success",
+            "description": "Use for icons that accompany positive messages",
             "subState": "default",
             "darkValue": "#41a48a",
             "darkOriginalValue": "night-green.light01",
             "lightValue": "#0b8363",
             "lightOriginalValue": "green.dark01"
         },
-        "color-chart-positive-subtle": {
-            "name": "chart.positive",
-            "subState": "subtle",
-            "darkValue": "#262e33",
-            "darkOriginalValue": "night-green.dark02",
-            "lightValue": "#e8f8f4",
-            "lightOriginalValue": "green.light03"
-        },
-        "color-chart-positive-bold": {
-            "name": "chart.positive",
-            "subState": "bold",
+        "color-icon-success-hover": {
+            "name": "icon.success",
+            "description": "Hover color for success icons",
+            "subState": "hover",
             "darkValue": "#a6f2dd",
             "darkOriginalValue": "night-green.light02",
             "lightValue": "#0a5c45",
             "lightOriginalValue": "green.dark02"
         },
-        "color-chart-warning-default": {
-            "name": "chart.warning",
+        "color-icon-brand-default": {
+            "name": "icon.brand",
+            "description": "Currently used for icons",
             "subState": "default",
-            "darkValue": "#cbac76",
-            "darkOriginalValue": "night-orange.light01",
-            "lightValue": "#f6bc56",
-            "lightOriginalValue": "orange.regular"
-        },
-        "color-chart-warning-subtle": {
-            "name": "chart.warning",
-            "subState": "subtle",
-            "darkValue": "#32302f",
-            "darkOriginalValue": "night-orange.dark02",
-            "lightValue": "#fef3e1",
-            "lightOriginalValue": "orange.light03"
-        },
-        "color-chart-warning-bold": {
-            "name": "chart.warning",
-            "subState": "bold",
-            "darkValue": "#fae0b3",
-            "darkOriginalValue": "night-orange.light02",
-            "lightValue": "#f6c66f",
-            "lightOriginalValue": "orange.light01"
+            "darkValue": "#2e9aa7",
+            "darkOriginalValue": "night-brand.light01",
+            "lightValue": "#0aa6b8",
+            "lightOriginalValue": "brand.regular"
         },
-        "color-chart-negative-default": {
-            "name": "chart.negative",
+        "color-icon-brand-hover": {
+            "name": "icon.brand",
+            "description": "Hover color for brand icons",
+            "subState": "hover",
+            "darkValue": "#80dfea",
+            "darkOriginalValue": "night-brand.light02",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
+        }
+    },
+    "border": {
+        "color-border-primary-default": {
+            "name": "border.primary",
+            "description": "Use to create bounds around UI elements (e.g. Secondary buttons and radio buttons)",
             "subState": "default",
-            "darkValue": "#d07c7c",
-            "darkOriginalValue": "night-red.light01",
-            "lightValue": "#f07575",
-            "lightOriginalValue": "red.light01"
+            "darkValue": "#5b5f67",
+            "darkOriginalValue": "night-gray.dark02",
+            "lightValue": "#a3b2bd",
+            "lightOriginalValue": "gray.light01"
         },
-        "color-chart-negative-subtle": {
-            "name": "chart.negative",
-            "subState": "subtle",
-            "darkValue": "#312b31",
-            "darkOriginalValue": "night-red.dark02",
-            "lightValue": "#fde8e8",
-            "lightOriginalValue": "red.light03"
+        "color-border-primary-hover": {
+            "name": "border.primary",
+            "subState": "hover",
+            "darkValue": "#757a84",
+            "darkOriginalValue": "night-gray.dark01",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
         },
-        "color-chart-negative-bold": {
-            "name": "chart.negative",
-            "subState": "bold",
-            "darkValue": "#f49a9a",
-            "darkOriginalValue": "night-red.light02",
-            "lightValue": "#dc4847",
-            "lightOriginalValue": "red.dark01"
+        "color-border-primary-active": {
+            "name": "border.primary",
+            "subState": "active",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#40515e",
+            "lightOriginalValue": "gray.dark01"
         },
-        "color-chart-info-default": {
-            "name": "chart.info",
+        "color-border-primary-disabled": {
+            "name": "border.primary",
+            "subState": "disabled",
+            "darkValue": "rgba(147, 151, 159, 0.08)",
+            "darkOriginalValue": "night-gray.regular-transparent03",
+            "lightValue": "rgba(163, 178, 189, 0.3)",
+            "lightOriginalValue": "gray.light01-transparent"
+        },
+        "color-border-secondary-default": {
+            "name": "border.secondary",
             "subState": "default",
-            "darkValue": "#6e95cf",
-            "darkOriginalValue": "night-blue.light01",
-            "lightValue": "#6e95cf",
-            "lightOriginalValue": "blue.light01"
+            "darkValue": "rgba(147, 149, 159, 0.3)",
+            "darkOriginalValue": "night-gray.regular-transparent01",
+            "lightValue": "rgba(163, 178, 189, 0.3)",
+            "lightOriginalValue": "gray.light01-transparent"
         },
-        "color-chart-info-subtle": {
-            "name": "chart.info",
-            "subState": "subtle",
-            "darkValue": "#282e39",
-            "darkOriginalValue": "night-blue.dark02",
-            "lightValue": "#e7effe",
-            "lightOriginalValue": "blue.light03"
+        "color-border-accent-default": {
+            "name": "border.accent",
+            "description": "Use as selected state or “on” state of certain UI elements (e.g. radio buttons)",
+            "subState": "default",
+            "darkValue": "#2e9aa7",
+            "darkOriginalValue": "night-brand.light01",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
         },
-        "color-chart-info-bold": {
-            "name": "chart.info",
-            "subState": "bold",
-            "darkValue": "#99c1fa",
-            "darkOriginalValue": "night-blue.light02",
-            "lightValue": "#295dae",
-            "lightOriginalValue": "blue.dark01"
+        "color-border-onAccent-default": {
+            "name": "border.onAccent",
+            "description": "Use for border that are placed on top of background.accent ",
+            "subState": "default",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
         },
-        "color-chart-accent-default": {
-            "name": "chart.accent",
+        "color-border-accentSubtle-default": {
+            "name": "border.accentSubtle",
+            "description": "Use in combination with color.background.accentSubtle to indicate selected state or 'on' state of certain UI elements (e.g. segemented controls)",
             "subState": "default",
-            "darkValue": "#0aa6b8",
-            "darkOriginalValue": "brand.regular",
-            "lightValue": "#0aa6b8",
-            "lightOriginalValue": "brand.regular"
+            "darkValue": "#1d6670",
+            "darkOriginalValue": "night-brand.regular",
+            "lightValue": "#85d3dc",
+            "lightOriginalValue": "brand.light01"
         },
-        "color-chart-accent-subtle": {
-            "name": "chart.accent",
-            "subState": "subtle",
-            "darkValue": "#262f36",
-            "darkOriginalValue": "night-brand.dark02",
-            "lightValue": "#e7f6f8",
-            "lightOriginalValue": "brand.light03"
+        "color-border-error-default": {
+            "name": "border.error",
+            "description": "Use in combination with other visual cues to designate an error state of certain UI elements",
+            "subState": "default",
+            "darkValue": "#d07c7c",
+            "darkOriginalValue": "night-red.light01",
+            "lightValue": "#dc4847",
+            "lightOriginalValue": "red.dark01"
         },
-        "color-chart-accent-bold": {
-            "name": "chart.accent",
-            "subState": "bold",
-            "darkValue": "#80dfea",
-            "darkOriginalValue": "night-brand.light02",
-            "lightValue": "#047a88",
-            "lightOriginalValue": "brand.dark01"
+        "color-border-success-default": {
+            "name": "border.success",
+            "description": "Use in combination with other visual cues to designate a success state of certain UI elements",
+            "subState": "default",
+            "darkValue": "#41a48a",
+            "darkOriginalValue": "night-green.light01",
+            "lightValue": "#0b8363",
+            "lightOriginalValue": "green.dark01"
         }
     },
-    "media-item": {
-        "color-media-item-background-black": {
-            "name": "media-item.background",
-            "subState": "black",
-            "darkValue": "#000000",
-            "darkOriginalValue": "",
-            "lightValue": "#000000",
-            "lightOriginalValue": ""
-        },
-        "color-media-item-background-white": {
-            "name": "media-item.background",
-            "subState": "white",
-            "darkValue": "#FFFFFF",
-            "darkOriginalValue": "",
-            "lightValue": "#FFFFFF",
-            "lightOriginalValue": ""
-        },
-        "color-media-item-background-transparent": {
-            "name": "media-item.background",
-            "subState": "transparent",
-            "darkValue": "rgba(255, 255, 255, 0)",
-            "darkOriginalValue": "neutral.transparent",
-            "lightValue": "rgba(255, 255, 255, 0)",
-            "lightOriginalValue": "neutral.transparent"
-        },
-        "color-media-item-overlay-hover": {
-            "name": "media-item.overlay",
-            "subState": "hover",
-            "darkValue": "rgba(0, 0, 0, 0.3)",
-            "darkOriginalValue": "neutral.black-transparent03",
-            "lightValue": "rgba(255, 255, 255, 0.3)",
-            "lightOriginalValue": "neutral.white-transparent03"
+    "divider": {
+        "color-divider-primary": {
+            "name": "divider.primary",
+            "description": "Use for dividers to emphasize the separation between items, columns or sections",
+            "subState": "",
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
         },
-        "color-media-item-overlay-active": {
-            "name": "media-item.overlay",
-            "subState": "active",
-            "darkValue": "rgba(0, 0, 0, 0.6)",
-            "darkOriginalValue": "neutral.black-transparent02",
-            "lightValue": "rgba(0, 0, 0, 0.6)",
-            "lightOriginalValue": "neutral.black-transparent02"
+        "color-divider-secondary": {
+            "name": "divider.secondary",
+            "subState": "",
+            "darkValue": "rgba(147, 149, 159, 0.15)",
+            "darkOriginalValue": "night-gray.regular-transparent02",
+            "lightValue": "rgba(163, 178, 189, 0.3)",
+            "lightOriginalValue": "gray.light01-transparent"
         },
-        "color-media-item-category-icon-background": {
-            "name": "media-item.category-icon",
-            "subState": "background",
+        "color-divider-secondarySolid": {
+            "name": "divider.secondarySolid",
+            "subState": "",
             "darkValue": "#32363e",
             "darkOriginalValue": "night-black.light01",
-            "lightValue": "#314554",
-            "lightOriginalValue": "gray.dark02"
+            "lightValue": "#eef2f5",
+            "lightOriginalValue": "gray.light03"
         }
     }
 }