npm - @amboss/design-system - Versions diffs - 1.12.0 → 1.13.0 - Mend

@amboss/design-system 1.12.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/build/cjs/build-tokens/visualConfig.js CHANGED Viewed

@@ -8,7 +8,8 @@ const variables = {
       "whiteTransparent02": "rgba(255, 255, 255, 0.6)",
       "whiteTransparent03": "rgba(255, 255, 255, 0.08)",
       "black": "#1a1c1c",
-      "blackTransparent02": "rgba(0, 0, 0, 0.6)"
+      "blackTransparent02": "rgba(0, 0, 0, 0.6)",
+      "transparent": "rgba(255, 255, 255, 0)"
     },
     "green": {
       "regular": "#0fa980",
@@ -47,8 +48,8 @@ const variables = {
       "light03": "#e7f6f8",
       "light02": "#ceedf1",
       "light01": "#85d3dc",
-      "regular": "#0aa6b8",
-      "dark01": "#067c89",
+      "regular": "#0fa980",
+      "dark01": "#0b8363",
       "dark02": "#054f57"
     },
     "orange": {
@@ -101,6 +102,7 @@ const variables = {
       "regular": "#93979f",
       "dark01": "#757a84",
       "dark02": "#5b5f67",
+      "regularTransparent": "rgba(147, 149, 159, 0.3)",
       "transparent": "rgba(147, 151, 159, 0.08)",
       "light03Transparent": "rgba(216, 218, 222, 0.3)"
     },
@@ -231,6 +233,9 @@ const variables = {
       }
     },
     "borderRadius": {
+      "xs": "4px",
+      "s": "8px",
+      "m": "12px",
       "button": {
         "m": "4px"
       },
@@ -368,226 +373,175 @@ const ambossVisualConfiguration = {
     "variables": variables,
     "values": {
       "color": {
-        "logo": {
-          "base": "#d8dade"
-        },
+        "canvas": "#1e2125",
         "background": {
-          "layer_1": "#1e2125",
-          "layer_2": "#24282d",
-          "layer_3": "#282c34",
-          "layer_4": "#393e47",
-          "backdrop": "rgba(0, 0, 0, 0.6)",
-          "button": {
-            "primary": {
-              "base": "#28816b",
-              "hover": "#41a48a",
-              "active": "#233d3d",
-              "disabled": "rgba(40, 129, 107, 0.3)"
-            },
-            "secondary": {
-              "base": "transparent",
-              "hover": "rgba(147, 151, 159, 0.08)",
-              "active": "transparent",
-              "disabled": "transparent"
-            },
-            "tertiary": {
-              "base": "transparent",
-              "hover": "rgba(147, 151, 159, 0.08)",
-              "active": "rgba(147, 151, 159, 0.08)",
-              "disabled": "transparent"
-            }
+          "primary": {
+            "default": "#24282d"
           },
-          "callout": {
-            "warning": "#32302f",
-            "success": "#262e33",
-            "info": "#282e39",
-            "error": "#312b31"
+          "secondary": {
+            "default": "#282c34",
+            "hover": "#393e47",
+            "active": "#393e47"
           },
-          "input": {
-            "default": "#1a1c1c"
+          "accent": {
+            "default": "#28816b",
+            "hover": "#41a48a",
+            "active": "#233d3d",
+            "disabled": "rgba(40, 129, 107, 0.3)"
           },
-          "textarea": {
-            "default": "#1a1c1c"
+          "onAccent": {
+            "default": "#ffffff",
+            "hover": "#ffffff",
+            "active": "#ffffff",
+            "disabled": "rgba(255, 255, 255, 0.6)"
           },
-          "checkbox": {
-            "default": "#24282d",
-            "checked": "#28816b",
-            "checkedHover": "#41a48a"
+          "error": {
+            "default": "#a45355"
           },
-          "dropdown": {
-            "active": "#393e47"
+          "success": {
+            "default": "#28816b"
           },
-          "toggle": {
-            "default": "#757a84",
-            "checked": "#28816b",
-            "highlighted": "#f9f4a9"
+          "info": {
+            "default": "#2f538a"
           },
-          "togglePoint": {
-            "default": "#ced1d6"
+          "warning": {
+            "default": "#a4792d"
           },
-          "radio": {
-            "default": "#24282d",
-            "checked": "#24282d",
-            "checkedHover": "#24282d"
+          "accentSubtle": {
+            "default": "#233d3d"
           },
-          "tabs": {
-            "header": "#282c34",
-            "buttonActive": "#24282d",
-            "buttonHover": "#393e47"
+          "errorSubtle": {
+            "default": "#312b31"
           },
-          "badge": {
-            "default": "transparent",
-            "green": "transparent",
-            "blue": "transparent",
-            "yellow": "transparent",
-            "brand": "transparent",
-            "purple": "transparent",
-            "red": "transparent",
-            "gray": "transparent"
+          "successSubtle": {
+            "default": "#262e33"
           },
-          "toggleButton": {
-            "default": "transparent",
-            "active": "#40515e",
-            "activeHover": "#607585"
+          "infoSubtle": {
+            "default": "#282e39"
           },
-          "segmentedControlOption": {
-            "default": "#1e2125",
-            "hover": "#282c34",
-            "checked": "#233d3d"
-          }
-        },
-        "icon": {
-          "callout": {
-            "warning": "#fae0b3",
-            "success": "#a6f2dd",
-            "info": "#99c1fa",
-            "error": "#f49a9a"
+          "warningSubtle": {
+            "default": "#32302f"
+          },
+          "hightlight": {
+            "default": "#40454f",
+            "hover": "#393e47"
           },
-          "checkbox": {
+          "contrast": {
             "default": "#ced1d6"
           },
-          "radio": {
-            "default": "#28816b"
+          "transparent": {
+            "default": "rgba(255, 255, 255, 0)",
+            "hover": "rgba(147, 151, 159, 0.08)",
+            "active": "rgba(147, 151, 159, 0.08)"
+          },
+          "backdrop": {
+            "default": "rgba(0, 0, 0, 0.6)"
           }
         },
-        "header": {
-          "primary": "#b9bcc3",
-          "secondary": "#93979f"
-        },
         "text": {
-          "primary": "#41a48a",
+          "primary": {
+            "default": "#ced1d6",
+            "hover": "#ffffff"
+          },
+          "secondary": {
+            "default": "#b9bcc3",
+            "hover": "#ced1d6"
+          },
+          "tertiary": {
+            "default": "#93979f",
+            "disabled": "rgba(216, 218, 222, 0.3)",
+            "hover": "#b9bcc3"
+          },
+          "quaternary": {
+            "default": "#757a84"
+          },
+          "accent": {
+            "default": "#a6f2dd",
+            "hover": "#e2fef7"
+          },
+          "onAccent": {
+            "default": "#ffffff",
+            "disabled": "rgba(216, 218, 222, 0.3)"
+          },
+          "info": {
+            "default": "#99c1fa"
+          },
+          "error": {
+            "default": "#f49a9a"
+          },
+          "warning": {
+            "default": "#fae0b3"
+          },
+          "success": {
+            "default": "#a6f2dd"
+          }
+        },
+        "icon": {
+          "primary": "#d8dade",
           "secondary": "#ced1d6",
           "tertiary": "#93979f",
-          "lightPrimary": "#d8dade",
+          "quaternary": "#757a84",
+          "accent": "#41a48a",
+          "onAccent": "#ffffff",
           "info": "#6e95cf",
           "error": "#d07c7c",
-          "warning": "#4d412c",
-          "placeholder": "#b9bcc3",
-          "brand": "#62b2bc",
-          "callout": {
-            "warning": "#fef3e1",
-            "success": "#e2fef7",
-            "info": "#e7effe",
-            "error": "#fee7e7"
-          },
-          "link": {
-            "primary": "#41a48a",
-            "secondary": "#ced1d6",
-            "tertiary": "#93979f",
-            "lightPrimary": "#d8dade",
-            "primaryHover": "#a6f2dd",
-            "secondaryHover": "#d8dade",
-            "tertiaryHover": "#d8dade"
-          },
-          "button": {
-            "primary": {
-              "base": "#d8dade",
-              "hover": "#d8dade",
-              "active": "#d8dade",
-              "disabled": "rgba(216, 218, 222, 0.3)"
-            },
-            "secondary": {
-              "base": "#d8dade",
-              "hover": "#d8dade",
-              "active": "#d8dade",
-              "disabled": "rgba(216, 218, 222, 0.3)"
-            },
-            "tertiary": {
-              "base": "#d8dade",
-              "hover": "#d8dade",
-              "active": "#ffffff",
-              "disabled": "rgba(216, 218, 222, 0.3)"
-            }
+          "warning": "#cbac76",
+          "success": "#41a48a",
+          "brand": "#62b2bc"
+        },
+        "border": {
+          "primary": {
+            "default": "#5b5f67",
+            "hover": "#757a84",
+            "active": "#93979f",
+            "disabled": "rgba(147, 151, 159, 0.08)"
           },
-          "badge": {
-            "default": "#ced1d6",
-            "green": "#41a48a",
-            "blue": "#6e95cf",
-            "yellow": "#cbac76",
-            "brand": "#62b2bc",
-            "purple": "#ad97f7",
-            "red": "#d07c7c",
-            "gray": "#93979f"
+          "secondary": {
+            "default": "rgba(147, 149, 159, 0.3)"
           },
-          "toggleButton": {
-            "default": "#a3b2bd",
-            "active": "#ffffff",
-            "labelDefault": "#93979f",
-            "labelActive": "#f5f7f9"
+          "accent": {
+            "default": "#41a48a"
           },
-          "segmentedControlOption": {
-            "default": "#b9bcc3",
-            "checked": "#a6f2dd"
+          "error": {
+            "default": "#d07c7c"
+          },
+          "accentSubtle": {
+            "default": "#28816b"
           }
         },
         "divider": {
-          "primary": "#32363e"
-        },
-        "segementedProgressBar": {
-          "monochrome": "#ced1d6",
-          "success": "#28816b",
-          "warning": "#a4792d",
-          "alert": "#a45355",
-          "inProgress": "#5b5f67"
+          "primary": "rgba(147, 149, 159, 0.3)"
         },
-        "border": {
-          "primary": "#32363e",
-          "tabs": {
-            "buttonActive": "#b9bcc3"
-          },
-          "button": {
-            "secondary": {
-              "base": "#32363e",
-              "hover": "#40454f",
-              "active": "#40454f",
-              "disabled": "rgba(50, 54, 62, 0.3)"
-            }
-          },
-          "input": {
-            "default": "#757a84",
-            "active": "#93979f",
-            "error": "#d07c7c"
-          },
-          "textarea": {
-            "default": "#757a84",
-            "active": "#93979f",
-            "error": "#d07c7c"
-          },
-          "checkbox": {
-            "default": "#5b5f67",
-            "defaultHover": "#28816b"
+        "toggle": {
+          "background": {
+            "hightlight": "#b2ab39"
           },
-          "radio": {
-            "default": "#5b5f67",
-            "defaultHover": "#28816b"
+          "border": {
+            "hightlight": "#b2ab39"
+          }
+        },
+        "badge": {
+          "background": {
+            "default": "transparent",
+            "green": "transparent",
+            "blue": "transparent",
+            "yellow": "transparent",
+            "brand": "transparent",
+            "purple": "transparent",
+            "red": "transparent",
+            "gray": "transparent"
           },
-          "toggle": {
-            "default": "#757a84",
-            "checked": "#28816b",
-            "highlighted": "#f9f4a9",
-            "hover": "#41a48a"
+          "text": {
+            "default": "#ced1d6",
+            "green": "#41a48a",
+            "blue": "#6e95cf",
+            "yellow": "#cbac76",
+            "brand": "#62b2bc",
+            "purple": "#ad97f7",
+            "red": "#d07c7c",
+            "gray": "#93979f"
           },
-          "badge": {
+          "border": {
             "default": "#393e47",
             "green": "#393e47",
             "blue": "#393e47",
@@ -596,331 +550,286 @@ const ambossVisualConfiguration = {
             "purple": "#393e47",
             "red": "#393e47",
             "gray": "#393e47"
-          },
-          "toggleButton": {
-            "default": "#607585",
-            "defaultHover": "#a3b2bd",
-            "active": "#40515e",
-            "activeHover": "#607585"
-          },
-          "segmentedControlOption": {
-            "default": "#5b5f67",
-            "checked": "#41a48a"
           }
+        },
+        "segmentedProgressBar": {
+          "monochrome": "#ced1d6",
+          "success": "#28816b",
+          "warning": "#a4792d",
+          "alert": "#a45355",
+          "inProgress": "#5b5f67"
         }
       },
       "subThemes": {
         "dimmed": {
           "color": {
             "background": {
-              "layer_1": "#314554",
-              "layer_2": "#40515e",
-              "button": {
-                "primary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#40515e"
+              },
+              "secondary": {
+                "default": "transparent",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "transparent",
+                "hover": "rgba(255, 255, 255, 0.08)",
+                "active": "transparent",
+                "disabled": "transparent"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#b9bcc3"
+              },
+              "tertiary": {
+                "default": "#ced1d6",
+                "hover": "#b9bcc3"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#d8dade"
+              },
+              "onAccent": {
+                "default": "#ffffff"
+              },
+              "error": {
+                "default": "#ee6160"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
-              "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#ffffff",
+              "error": "#ee6160"
+            },
+            "border": {
+              "primary": {
+                "default": "transparent",
+                "hover": "transparent",
+                "active": "transparent"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "transparent",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
-              }
             }
           }
         },
         "error": {
           "color": {
             "background": {
-              "layer_2": "#a45355",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#a45355"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#b9bcc3"
+              },
+              "tertiary": {
+                "default": "#ced1d6",
+                "hover": "#b9bcc3"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#d8dade"
+              },
+              "onAccent": {
+                "default": "#312b31"
+              },
+              "error": {
+                "default": "#d07c7c"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#ced1d6",
-              "error": "#d07c7c",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#ced1d6",
-                "primaryHover": "#d8dade",
-                "secondaryHover": "#d8dade",
-                "tertiaryHover": "#b9bcc3"
-              },
-              "button": {
-                "primary": {
-                  "base": "#312b31",
-                  "hover": "#312b31",
-                  "active": "#312b31",
-                  "disabled": "rgba(49, 43, 49, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#d8dade",
-                  "hover": "#d8dade",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#c02725",
+              "error": "#d07c7c"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#ced1d6"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         },
         "info": {
           "color": {
             "background": {
-              "layer_2": "#29364c",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#29364c"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#b9bcc3"
+              },
+              "tertiary": {
+                "default": "#ced1d6",
+                "hover": "#b9bcc3"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#d8dade"
+              },
+              "onAccent": {
+                "default": "#282e39"
+              },
+              "error": {
+                "default": "#ee6160"
+              },
+              "info": {
+                "default": "#6e95cf"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
-              "info": "#6e95cf",
+              "accent": "#ffffff",
+              "onAccent": "#1c427d",
               "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#1c427d",
-                  "hover": "#1c427d",
-                  "active": "#1c427d",
-                  "disabled": "rgba(28, 66, 125, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "info": "#6e95cf"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         },
         "success": {
           "color": {
             "background": {
-              "layer_2": "#28816b",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#28816b"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#b9bcc3"
+              },
+              "tertiary": {
+                "default": "#ced1d6",
+                "hover": "#b9bcc3"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#d8dade"
+              },
+              "onAccent": {
+                "default": "#262e33"
+              },
+              "error": {
+                "default": "#d07c7c"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#ced1d6",
-              "error": "#d07c7c",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#ced1d6",
-                "primaryHover": "#d8dade",
-                "secondaryHover": "#d8dade",
-                "tertiaryHover": "#b9bcc3"
-              },
-              "button": {
-                "primary": {
-                  "base": "#262e33",
-                  "hover": "#262e33",
-                  "active": "#262e33",
-                  "disabled": "rgba(28, 66, 125, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#d8dade",
-                  "hover": "#d8dade",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#262e33",
+              "error": "#d07c7c"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#ced1d6"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         }
@@ -931,230 +840,175 @@ const ambossVisualConfiguration = {
     "variables": variables,
     "values": {
       "color": {
-        "logo": {
-          "base": "#1a1c1c"
-        },
+        "canvas": "#eef2f5",
         "background": {
-          "layer_1": "#ffffff",
-          "layer_2": "#ffffff",
-          "layer_3": "#ffffff",
-          "layer_4": "#ffffff",
-          "backdrop": "rgba(0, 0, 0, 0.6)",
-          "button": {
-            "primary": {
-              "base": "#0fa980",
-              "hover": "#0b8363",
-              "active": "#0a5c45",
-              "disabled": "rgba(15, 169, 128, 0.3)"
-            },
-            "secondary": {
-              "base": "transparent",
-              "hover": "rgba(96, 117, 133, 0.08)",
-              "active": "transparent",
-              "disabled": "transparent"
-            },
-            "tertiary": {
-              "base": "transparent",
-              "hover": "rgba(96, 117, 133, 0.08)",
-              "active": "rgba(96, 117, 133, 0.08)",
-              "disabled": "transparent"
-            }
-          },
-          "callout": {
-            "warning": "#fef3e1",
-            "success": "#e8f8f4",
-            "info": "#e7effe",
-            "error": "#fde8e8"
-          },
-          "input": {
+          "primary": {
             "default": "#ffffff"
           },
-          "textarea": {
-            "default": "#ffffff"
+          "secondary": {
+            "default": "#f5f7f9",
+            "hover": "#eef2f5",
+            "active": "#ffffff"
+          },
+          "accent": {
+            "default": "#0fa980",
+            "hover": "#0b8363",
+            "active": "#0a5c45",
+            "disabled": "rgba(15, 169, 128, 0.3)"
           },
-          "checkbox": {
+          "onAccent": {
             "default": "#ffffff",
-            "checked": "#0fa980",
-            "checkedHover": "#0b8363"
+            "hover": "#ffffff",
+            "active": "#ffffff",
+            "disabled": "rgba(255, 255, 255, 0.6)"
           },
-          "dropdown": {
-            "active": "#eef2f5"
+          "error": {
+            "default": "#dc4847"
           },
-          "toggle": {
-            "default": "#a3b2bd",
-            "checked": "#0fa980",
-            "highlighted": "#faf5b8"
+          "success": {
+            "default": "#0b8363"
           },
-          "togglePoint": {
-            "default": "#ffffff"
+          "info": {
+            "default": "#295dae"
           },
-          "radio": {
-            "default": "#ffffff",
-            "checked": "#ffffff",
-            "checkedHover": "#ffffff"
+          "warning": {
+            "default": "#df9411"
           },
-          "tabs": {
-            "header": "#f5f7f9",
-            "buttonActive": "#ffffff",
-            "buttonHover": "#eef2f5"
+          "accentSubtle": {
+            "default": "#e8f8f4"
           },
-          "badge": {
-            "default": "#ffffff",
-            "green": "#e8f8f4",
-            "blue": "#e7effe",
-            "yellow": "#fef3e1",
-            "brand": "#e7f6f8",
-            "purple": "#f2effb",
-            "red": "#fde8e8",
-            "gray": "#eef2f5"
+          "errorSubtle": {
+            "default": "#fde8e8"
           },
-          "toggleButton": {
-            "default": "transparent",
-            "active": "#607585",
-            "activeHover": "#40515e"
+          "successSubtle": {
+            "default": "#e8f8f4"
           },
-          "segmentedControlOption": {
-            "default": "#ffffff",
-            "hover": "#f5f7f9",
-            "checked": "#e8f8f4"
+          "infoSubtle": {
+            "default": "#e7effe"
+          },
+          "warningSubtle": {
+            "default": "#fef3e1"
+          },
+          "hightlight": {
+            "default": "#607585",
+            "hover": "#40515e"
+          },
+          "contrast": {
+            "default": "#314554"
+          },
+          "transparent": {
+            "default": "rgba(255, 255, 255, 0)",
+            "hover": "rgba(96, 117, 133, 0.08)",
+            "active": "rgba(96, 117, 133, 0.08)"
+          },
+          "backdrop": {
+            "default": "rgba(0, 0, 0, 0.6)"
           }
         },
-        "icon": {
-          "callout": {
-            "warning": "#df9411",
-            "success": "#0b8363",
-            "info": "#295dae",
-            "error": "#dc4847"
+        "text": {
+          "primary": {
+            "default": "#1a1c1c",
+            "hover": "#1a1c1c"
           },
-          "checkbox": {
-            "default": "#ffffff"
+          "secondary": {
+            "default": "#40515e",
+            "hover": "#40515e"
+          },
+          "tertiary": {
+            "default": "#607585",
+            "disabled": "rgba(64, 81, 94, 0.3)",
+            "hover": "#40515e"
+          },
+          "quaternary": {
+            "default": "#a3b2bd"
           },
-          "radio": {
-            "default": "#0fa980"
+          "accent": {
+            "default": "#0b8363",
+            "hover": "#0a5c45"
+          },
+          "onAccent": {
+            "default": "#ffffff",
+            "disabled": "rgba(255, 255, 255, 0.6)"
+          },
+          "info": {
+            "default": "#1c427d"
+          },
+          "error": {
+            "default": "#c02725"
+          },
+          "warning": {
+            "default": "#314554"
+          },
+          "success": {
+            "default": "#0a5c45"
           }
         },
-        "header": {
+        "icon": {
           "primary": "#1a1c1c",
-          "secondary": "#607585"
-        },
-        "text": {
-          "primary": "#0b8363",
-          "secondary": "#1a1c1c",
+          "secondary": "#40515e",
           "tertiary": "#607585",
-          "lightPrimary": "#ffffff",
+          "quaternary": "#a3b2bd",
+          "accent": "#0b8363",
+          "onAccent": "#ffffff",
           "info": "#295dae",
           "error": "#dc4847",
           "warning": "#df9411",
-          "placeholder": "#a3b2bd",
-          "brand": "#0aa6b8",
-          "callout": {
-            "warning": "#314554",
-            "success": "#0a5c45",
-            "info": "#1c427d",
-            "error": "#c02725"
-          },
-          "link": {
-            "primary": "#0b8363",
-            "secondary": "#1a1c1c",
-            "tertiary": "#607585",
-            "lightPrimary": "#ffffff",
-            "primaryHover": "#0a5c45",
-            "secondaryHover": "#1a1c1c",
-            "tertiaryHover": "#40515e"
-          },
-          "button": {
-            "primary": {
-              "base": "#ffffff",
-              "hover": "#ffffff",
-              "active": "#ffffff",
-              "disabled": "rgba(255, 255, 255, 0.6)"
-            },
-            "secondary": {
-              "base": "#40515e",
-              "hover": "#40515e",
-              "active": "#40515e",
-              "disabled": "rgba(64, 81, 94, 0.3)"
-            },
-            "tertiary": {
-              "base": "#40515e",
-              "hover": "#40515e",
-              "active": "#1a1c1c",
-              "disabled": "rgba(64, 81, 94, 0.3)"
-            }
+          "success": "#0b8363",
+          "brand": "#0fa980"
+        },
+        "border": {
+          "primary": {
+            "default": "#a3b2bd",
+            "hover": "#607585",
+            "active": "#40515e",
+            "disabled": "rgba(163, 178, 189, 0.3)"
           },
-          "badge": {
-            "default": "#1a1c1c",
-            "green": "#0b8363",
-            "blue": "#295dae",
-            "yellow": "#9a6304",
-            "brand": "#067c89",
-            "purple": "#5d44ab",
-            "red": "#c02725",
-            "gray": "#607585"
+          "secondary": {
+            "default": "rgba(163, 178, 189, 0.3)"
           },
-          "toggleButton": {
-            "default": "#40515e",
-            "active": "#ffffff",
-            "labelDefault": "#607585",
-            "labelActive": "#f5f7f9"
+          "accent": {
+            "default": "#0b8363"
           },
-          "segmentedControlOption": {
-            "default": "#40515e",
-            "checked": "#0a5c45"
+          "error": {
+            "default": "#dc4847"
+          },
+          "accentSubtle": {
+            "default": "#8adcc6"
           }
         },
         "divider": {
-          "primary": "#e0e6eb"
+          "primary": "rgba(163, 178, 189, 0.3)"
         },
-        "segementedProgressBar": {
-          "monochrome": "#607585",
-          "success": "#39d6ac",
-          "warning": "#f1d56b",
-          "alert": "#f07575",
-          "inProgress": "#e0e6eb"
-        },
-        "border": {
-          "primary": "#e0e6eb",
-          "tabs": {
-            "buttonActive": "#607585"
-          },
-          "button": {
-            "secondary": {
-              "base": "#a3b2bd",
-              "hover": "#607585",
-              "active": "#40515e",
-              "disabled": "rgba(163, 178, 189, 0.3)"
-            }
-          },
-          "input": {
-            "default": "#a3b2bd",
-            "active": "#607585",
-            "error": "#dc4847"
-          },
-          "textarea": {
-            "default": "#a3b2bd",
-            "active": "#a3b2bd",
-            "error": "#dc4847"
-          },
-          "checkbox": {
-            "default": "#e0e6eb",
-            "defaultHover": "#0fa980"
-          },
-          "radio": {
-            "default": "#e0e6eb",
-            "defaultHover": "#0fa980"
+        "toggle": {
+          "background": {
+            "hightlight": "#f3eb75"
           },
-          "segmentedControlOption": {
-            "default": "#e0e6eb",
-            "checked": "#8adcc6"
+          "border": {
+            "hightlight": "#f3eb75"
+          }
+        },
+        "badge": {
+          "background": {
+            "default": "#ffffff",
+            "green": "#e8f8f4",
+            "blue": "#e7effe",
+            "yellow": "#fef3e1",
+            "brand": "#e7f6f8",
+            "purple": "#f2effb",
+            "red": "#fde8e8",
+            "gray": "#eef2f5"
           },
-          "toggle": {
-            "default": "#a3b2bd",
-            "checked": "#0fa980",
-            "highlighted": "#faf5b8",
-            "hover": "#0a5c45"
+          "text": {
+            "default": "#1a1c1c",
+            "green": "#0b8363",
+            "blue": "#295dae",
+            "yellow": "#9a6304",
+            "brand": "#0b8363",
+            "purple": "#5d44ab",
+            "red": "#c02725",
+            "gray": "#607585"
           },
-          "badge": {
+          "border": {
             "default": "#e0e6eb",
             "green": "#e8f8f4",
             "blue": "#e7effe",
@@ -1163,327 +1017,286 @@ const ambossVisualConfiguration = {
             "purple": "#f2effb",
             "red": "#fde8e8",
             "gray": "#eef2f5"
-          },
-          "toggleButton": {
-            "default": "#e0e6eb",
-            "defaultHover": "#a3b2bd",
-            "active": "#607585",
-            "activeHover": "#40515e"
           }
+        },
+        "segmentedProgressBar": {
+          "monochrome": "#607585",
+          "success": "#39d6ac",
+          "warning": "#f1d56b",
+          "alert": "#f07575",
+          "inProgress": "#e0e6eb"
         }
       },
       "subThemes": {
         "dimmed": {
           "color": {
             "background": {
-              "layer_1": "#314554",
-              "layer_2": "#40515e",
-              "button": {
-                "primary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#40515e"
+              },
+              "secondary": {
+                "default": "transparent",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "transparent",
+                "hover": "rgba(255, 255, 255, 0.08)",
+                "active": "transparent",
+                "disabled": "transparent"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#eef2f5"
+              },
+              "tertiary": {
+                "default": "#e0e6eb",
+                "hover": "#a3b2bd"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "onAccent": {
+                "default": "#ffffff"
+              },
+              "error": {
+                "default": "#ee6160"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
-              "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#ffffff",
+              "error": "#ee6160"
+            },
+            "border": {
+              "primary": {
+                "default": "transparent",
+                "hover": "transparent",
+                "active": "transparent"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "transparent",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
-              }
             }
           }
         },
         "error": {
           "color": {
             "background": {
-              "layer_2": "#ee6160",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#ee6160"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#eef2f5"
+              },
+              "tertiary": {
+                "default": "#e0e6eb",
+                "hover": "#a3b2bd"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "onAccent": {
+                "default": "#c02725"
+              },
+              "error": {
+                "default": "#ee6160"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
-              "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#c02725",
-                  "hover": "#c02725",
-                  "active": "#c02725",
-                  "disabled": "rgba(192, 39, 37, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#c02725",
+              "error": "#ee6160"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         },
         "info": {
           "color": {
             "background": {
-              "layer_2": "#295dae",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#295dae"
+              },
+              "secondary": {
+                "default": "transparent",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#eef2f5"
+              },
+              "tertiary": {
+                "default": "#e0e6eb",
+                "hover": "#a3b2bd"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "onAccent": {
+                "default": "#1c427d"
+              },
+              "error": {
+                "default": "#ee6160"
+              },
+              "info": {
+                "default": "#d2e2f9"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
+              "accent": "#ffffff",
+              "onAccent": "#1c427d",
               "info": "#d2e2f9",
-              "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#1c427d",
-                  "hover": "#1c427d",
-                  "active": "#1c427d",
-                  "disabled": "rgba(28, 66, 125, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "error": "#ee6160"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "#ffffff"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         },
         "success": {
           "color": {
             "background": {
-              "layer_2": "#0fa980",
-              "button": {
-                "primary": {
-                  "base": "#ffffff",
-                  "hover": "rgba(255, 255, 255, 0.8)",
-                  "active": "rgba(255, 255, 255, 0.6)",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "secondary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                },
-                "tertiary": {
-                  "base": "transparent",
-                  "hover": "rgba(255, 255, 255, 0.08)",
-                  "active": "transparent",
-                  "disabled": "transparent"
-                }
+              "primary": {
+                "default": "#0fa980"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.08)"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "rgba(255, 255, 255, 0.8)",
+                "active": "rgba(255, 255, 255, 0.6)",
+                "disabled": "rgba(255, 255, 255, 0.6)"
+              },
+              "transparent": {
+                "hover": "rgba(255, 255, 255, 0.08)"
               }
             },
-            "header": {
-              "primary": "#ffffff",
-              "secondary": "#ffffff"
-            },
             "text": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "secondary": {
+                "default": "#ffffff",
+                "hover": "#eef2f5"
+              },
+              "tertiary": {
+                "default": "#e0e6eb",
+                "hover": "#a3b2bd"
+              },
+              "accent": {
+                "default": "#ffffff",
+                "hover": "#e0e6eb"
+              },
+              "error": {
+                "default": "#ee6160"
+              },
+              "onAccent": {
+                "default": "#0a5c45"
+              }
+            },
+            "icon": {
               "primary": "#ffffff",
               "secondary": "#ffffff",
               "tertiary": "#e0e6eb",
-              "error": "#ee6160",
-              "link": {
-                "primary": "#ffffff",
-                "secondary": "#ffffff",
-                "tertiary": "#e0e6eb",
-                "primaryHover": "#e0e6eb",
-                "secondaryHover": "#e0e6eb",
-                "tertiaryHover": "#a3b2bd"
-              },
-              "button": {
-                "primary": {
-                  "base": "#0a5c45",
-                  "hover": "#0a5c45",
-                  "active": "#0a5c45",
-                  "disabled": "rgba(10, 92, 69, 0.3)"
-                },
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                },
-                "tertiary": {
-                  "base": "#d8dade",
-                  "hover": "#d8dade",
-                  "active": "#ffffff",
-                  "disabled": "rgba(255, 255, 255, 0.6)"
-                }
+              "accent": "#ffffff",
+              "onAccent": "#0a5c45",
+              "error": "#ee6160"
+            },
+            "border": {
+              "primary": {
+                "default": "#ffffff",
+                "hover": "#ffffff",
+                "active": "#ffffff"
+              },
+              "accent": {
+                "default": "transparent"
               }
             },
             "divider": {
               "primary": "#e0e6eb"
-            },
-            "border": {
-              "button": {
-                "secondary": {
-                  "base": "#ffffff",
-                  "hover": "#ffffff",
-                  "active": "#ffffff",
-                  "disabled": "#ffffff"
-                }
-              }
             }
           }
         }