@sme.up/ketchup 9.6.4 → 9.6.5

package/dist/esm/{kup-manager-dd24fb5a.js → kup-manager-a316a70e.js}

@@ -3533,7 +3533,7 @@ const octane = {
 		"--kup-primary-color-70": "#006574",
 		"--kup-primary-color-80": "#005160",
 		"--kup-primary-color-90": "#02292f",
-		"--kup-secondary-color-2": "#003C49",
+		"--kup-secondary-color": "#003C49",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -3544,7 +3544,6 @@ const octane = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
@@ -3554,18 +3553,16 @@ const octane = {
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-secondary-color": "#f4a22e",
 		"--kup-background-color": "#ffffff",
-		"--kup-navbar-background-color": "#068a9c",
-		"--kup-navbar-color": "#ffffff",
-		"--kup-drawer-background-color": "#ffffff",
+		"--kup-navbar-background-color": "#161616",
+		"--kup-drawer-background-color": "#f4f4f4",
 		"--kup-drawer-color": "#535353",
 		"--kup-navbar-height": "64px",
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "IBM Plex Sans, sans-serif",
-		"--kup-font-family-monospace": "IBM Plex Sans, sans-serif",
+		"--kup-font-family-monospace": "IBM Plex Mono, monospace",
 		"--kup-font-size": "14px",
-		"--kup-text-color": "#474747",
+		"--kup-text-color": "#525252",
 		"--kup-text-on-primary-color": "#e8e8e8",
 		"--kup-text-on-secondary-color": "#312c2c",
 		"--kup-disabled-background-color": "#d1d1d1",
@@ -3574,13 +3571,9 @@ const octane = {
 		"--kup-hover-color": "#303030",
 		"--kup-title-background-color": "#068a9c",
 		"--kup-title-color": "#fff",
-		"--kup-icon-color": "#e8e8e8",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#d8d8d8",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
-		"--kup-info-color": "#2592df",
-		"--kup-success-color": "#a4ba4c",
-		"--kup-warning-color": "#de8906",
-		"--kup-danger-color": "#a6192e",
 		"--kup-spinner-color": "#fddc69",
 		"--kup-chart-color-1": "#60c3fc",
 		"--kup-chart-color-2": "#e268d8",
@@ -3605,6 +3598,7 @@ const octane = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -3625,10 +3619,22 @@ const octane = {
 	customStyles: {
 	}
 };
-const bubbles = {
+const octaneGrey = {
 	cssVariables: {
-		"--kup-gray-color-0": "#ffffff",
-		"--kup-gray-color-10": "#F4F4F4",
+		"--kup-primary-color": "#068a9c",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-10": "#A5E6F0",
+		"--kup-primary-color-20": "#83CBD8",
+		"--kup-primary-color-30": "#5CB0C0",
+		"--kup-primary-color-40": "#3E9EAF",
+		"--kup-primary-color-50": "#068A9C",
+		"--kup-primary-color-60": "#007A8B",
+		"--kup-primary-color-70": "#006574",
+		"--kup-primary-color-80": "#005160",
+		"--kup-primary-color-90": "#02292f",
+		"--kup-secondary-color": "#003C49",
+		"--kup-gray-color-0": "#F4F4F4",
+		"--kup-gray-color-10": "#ffffff",
 		"--kup-gray-color-20": "#E0E0E0",
 		"--kup-gray-color-30": "#C6C6C6",
 		"--kup-gray-color-40": "#A8A8A8",
@@ -3637,18 +3643,333 @@ const bubbles = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
+		"--kup-info-color-50": "#4589ff",
+		"--kup-info-color-70": "#0043ce",
+		"--kup-warning-color-40": "#f1c21b",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
+		"--kup-background-color": "#F4F4F4",
+		"--kup-navbar-background-color": "#161616",
+		"--kup-drawer-background-color": "#ffffff",
+		"--kup-drawer-color": "#535353",
+		"--kup-navbar-height": "64px",
+		"--kup-drawer-width": "300px",
+		"--kup-font-family": "IBM Plex Sans, sans-serif",
+		"--kup-font-family-monospace": "IBM Plex Mono, monospace",
+		"--kup-font-size": "14px",
+		"--kup-text-color": "#292929",
+		"--kup-text-on-primary-color": "#e8e8e8",
+		"--kup-text-on-secondary-color": "#312c2c",
+		"--kup-disabled-background-color": "#d1d1d1",
+		"--kup-disabled-color": "#636363",
+		"--kup-hover-background-color": "#e8e8e8",
+		"--kup-hover-color": "#303030",
+		"--kup-title-background-color": "#068a9c",
+		"--kup-title-color": "#fff",
+		"--kup-icon-color": "#636363",
+		"--kup-border-color": "#d8d8d8",
+		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
+		"--kup-info-color": "#2592df",
+		"--kup-success-color-40": "#42be65",
+		"--kup-success-color-60": "#198038",
+		"--kup-rating-color": "#ffa000",
+		"--kup-warning-color": "#de8906",
+		"--kup-danger-color-50": "#fa4d56",
+		"--kup-danger-color-60": "#da1e28",
+		"--kup-danger-color-70": "#ba1b23",
+		"--kup-danger-color-80": "#750e13",
+		"--kup-spinner-color": "#fddc69",
+		"--kup-chart-color-1": "#60c3fc",
+		"--kup-chart-color-2": "#e268d8",
+		"--kup-chart-color-3": "#860bb5",
+		"--kup-chart-color-4": "#1a83e4",
+		"--kup-obj-cursor": "inherit",
+		"--kup-card-zindex": "900",
+		"--kup-drawer-zindex": "900",
+		"--kup-navbar-zindex": "900",
+		"--kup-space-00": "0px",
+		"--kup-space-01": "2px",
+		"--kup-space-02": "4px",
+		"--kup-space-03": "8px",
+		"--kup-space-04": "12px",
+		"--kup-space-05": "16px",
+		"--kup-space-06": "24px",
+		"--kup-space-07": "32px",
+		"--kup-space-08": "40px",
+		"--kup-space-09": "48px",
+		"--kup-space-10": "64px",
+		"--kup-space-11": "80px",
+		"--kup-space-12": "96px",
+		"--kup-space-13": "160px",
+		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
+		"--kup-radius-100": "100px"
+	},
+	icons: {
+		"--kup-ascending-icon": "arrow_drop_up",
+		"--kup-descending-icon": "arrow_drop_down",
+		"--kup-expanded-icon": "arrow_drop_down",
+		"--kup-collapsed-icon": "menu-right",
+		"--kup-dropdown-icon": "arrow_drop_down",
+		"--kup-clear-icon": "cancel",
+		"--kup-filter-remove-icon": "filter-remove",
+		"--kup-key-icon": "key-variant",
+		"--kup-search-icon": "search"
+	},
+	imports: [
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')",
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+	],
+	customStyles: {
+	}
+};
+const darkOctane = {
+	cssVariables: {
+		"--kup-primary-color": "#068a9c",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-10": "#A5E6F0",
+		"--kup-primary-color-20": "#83CBD8",
+		"--kup-primary-color-30": "#5CB0C0",
+		"--kup-primary-color-40": "#3E9EAF",
+		"--kup-primary-color-50": "#068A9C",
+		"--kup-primary-color-60": "#007A8B",
+		"--kup-primary-color-70": "#006574",
+		"--kup-primary-color-80": "#005160",
+		"--kup-primary-color-90": "#02292f",
+		"--kup-secondary-color": "#003C49",
+		"--kup-gray-color-0": "#161616",
+		"--kup-gray-color-10": "#262626",
+		"--kup-gray-color-20": "#393939",
+		"--kup-gray-color-30": "#525252",
+		"--kup-gray-color-40": "#6f6f6f",
+		"--kup-gray-color-50": "#8d8d8d",
+		"--kup-gray-color-60": "#A8A8A8",
+		"--kup-gray-color-70": "#C6C6C6",
+		"--kup-gray-color-80": "#E0E0E0",
+		"--kup-gray-color-90": "#f4f4f4",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
+		"--kup-background-color": "#161616",
+		"--kup-navbar-background-color": "#161616",
+		"--kup-drawer-background-color": "#ffffff",
+		"--kup-drawer-color": "#535353",
+		"--kup-navbar-height": "64px",
+		"--kup-drawer-width": "300px",
+		"--kup-font-family": "IBM Plex Sans, sans-serif",
+		"--kup-font-family-monospace": "IBM Plex Mono, monospace",
+		"--kup-font-size": "14px",
+		"--kup-text-color": "#e8e8e8",
+		"--kup-text-on-primary-color": "#e8e8e8",
+		"--kup-text-on-secondary-color": "#312c2c",
+		"--kup-disabled-background-color": "#d1d1d1",
+		"--kup-disabled-color": "#636363",
+		"--kup-hover-background-color": "#e8e8e8",
+		"--kup-hover-color": "#303030",
+		"--kup-title-background-color": "#068a9c",
+		"--kup-title-color": "#fff",
+		"--kup-icon-color": "#636363",
+		"--kup-border-color": "#d8d8d8",
+		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
+		"--kup-info-color": "#2592df",
+		"--kup-success-color-60": "#42be65",
+		"--kup-success-color-40": "#198038",
+		"--kup-rating-color": "#ffa000",
+		"--kup-warning-color": "#de8906",
+		"--kup-danger-color-50": "#fa4d56",
+		"--kup-danger-color-60": "#da1e28",
+		"--kup-danger-color-70": "#ba1b23",
+		"--kup-danger-color-80": "#750e13",
+		"--kup-info-color-50": "#4589ff",
+		"--kup-info-color-70": "#0043ce",
+		"--kup-warning-color-40": "#f1c21b",
+		"--kup-spinner-color": "#fddc69",
+		"--kup-chart-color-1": "#60c3fc",
+		"--kup-chart-color-2": "#e268d8",
+		"--kup-chart-color-3": "#860bb5",
+		"--kup-chart-color-4": "#1a83e4",
+		"--kup-obj-cursor": "inherit",
+		"--kup-card-zindex": "900",
+		"--kup-drawer-zindex": "900",
+		"--kup-navbar-zindex": "900",
+		"--kup-space-00": "0px",
+		"--kup-space-01": "2px",
+		"--kup-space-02": "4px",
+		"--kup-space-03": "8px",
+		"--kup-space-04": "12px",
+		"--kup-space-05": "16px",
+		"--kup-space-06": "24px",
+		"--kup-space-07": "32px",
+		"--kup-space-08": "40px",
+		"--kup-space-09": "48px",
+		"--kup-space-10": "64px",
+		"--kup-space-11": "80px",
+		"--kup-space-12": "96px",
+		"--kup-space-13": "160px",
+		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
+		"--kup-radius-100": "100px"
+	},
+	icons: {
+		"--kup-ascending-icon": "arrow_drop_up",
+		"--kup-descending-icon": "arrow_drop_down",
+		"--kup-expanded-icon": "arrow_drop_down",
+		"--kup-collapsed-icon": "menu-right",
+		"--kup-dropdown-icon": "arrow_drop_down",
+		"--kup-clear-icon": "cancel",
+		"--kup-filter-remove-icon": "filter-remove",
+		"--kup-key-icon": "key-variant",
+		"--kup-search-icon": "search"
+	},
+	imports: [
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')",
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+	],
+	customStyles: {
+	}
+};
+const darkOctaneGray = {
+	cssVariables: {
+		"--kup-primary-color": "#068a9c",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-10": "#A5E6F0",
+		"--kup-primary-color-20": "#83CBD8",
+		"--kup-primary-color-30": "#5CB0C0",
+		"--kup-primary-color-40": "#3E9EAF",
+		"--kup-primary-color-50": "#068A9C",
+		"--kup-primary-color-60": "#007A8B",
+		"--kup-primary-color-70": "#006574",
+		"--kup-primary-color-80": "#005160",
+		"--kup-primary-color-90": "#02292f",
+		"--kup-secondary-color": "#003C49",
+		"--kup-gray-color-0": "#262626",
+		"--kup-gray-color-10": "#393939",
+		"--kup-gray-color-20": "#525252",
+		"--kup-gray-color-30": "#6f6f6f",
+		"--kup-gray-color-40": "#8d8d8d",
+		"--kup-gray-color-50": "#A8A8A8",
+		"--kup-gray-color-60": "#C6C6C6",
+		"--kup-gray-color-70": "#E0E0E0",
+		"--kup-gray-color-80": "#f4f4f4",
+		"--kup-gray-color-90": "#ffffff",
+		"--kup-accent-red-color": "#da1e28",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
+		"--kup-background-color": "#262626",
+		"--kup-navbar-background-color": "#161616",
+		"--kup-drawer-background-color": "#161616",
+		"--kup-drawer-color": "#535353",
+		"--kup-navbar-height": "64px",
+		"--kup-drawer-width": "300px",
+		"--kup-font-family": "IBM Plex Sans, sans-serif",
+		"--kup-font-family-monospace": "IBM Plex Mono, monospace",
+		"--kup-font-size": "14px",
+		"--kup-text-color": "#e8e8e8",
+		"--kup-text-on-primary-color": "#e8e8e8",
+		"--kup-text-on-secondary-color": "#312c2c",
+		"--kup-disabled-background-color": "#d1d1d1",
+		"--kup-disabled-color": "#636363",
+		"--kup-hover-background-color": "#e8e8e8",
+		"--kup-hover-color": "#303030",
+		"--kup-title-background-color": "#068a9c",
+		"--kup-title-color": "#fff",
+		"--kup-icon-color": "#636363",
+		"--kup-border-color": "#d8d8d8",
+		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
+		"--kup-info-color": "#2592df",
+		"--kup-success-color-60": "#42be65",
+		"--kup-success-color-40": "#198038",
+		"--kup-rating-color": "#ffa000",
+		"--kup-warning-color": "#de8906",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
+		"--kup-spinner-color": "#fddc69",
+		"--kup-chart-color-1": "#60c3fc",
+		"--kup-chart-color-2": "#e268d8",
+		"--kup-chart-color-3": "#860bb5",
+		"--kup-chart-color-4": "#1a83e4",
+		"--kup-obj-cursor": "inherit",
+		"--kup-card-zindex": "900",
+		"--kup-drawer-zindex": "900",
+		"--kup-navbar-zindex": "900",
+		"--kup-space-00": "0px",
+		"--kup-space-01": "2px",
+		"--kup-space-02": "4px",
+		"--kup-space-03": "8px",
+		"--kup-space-04": "12px",
+		"--kup-space-05": "16px",
+		"--kup-space-06": "24px",
+		"--kup-space-07": "32px",
+		"--kup-space-08": "40px",
+		"--kup-space-09": "48px",
+		"--kup-space-10": "64px",
+		"--kup-space-11": "80px",
+		"--kup-space-12": "96px",
+		"--kup-space-13": "160px",
+		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
+		"--kup-radius-100": "100px"
+	},
+	icons: {
+		"--kup-ascending-icon": "arrow_drop_up",
+		"--kup-descending-icon": "arrow_drop_down",
+		"--kup-expanded-icon": "arrow_drop_down",
+		"--kup-collapsed-icon": "menu-right",
+		"--kup-dropdown-icon": "arrow_drop_down",
+		"--kup-clear-icon": "cancel",
+		"--kup-filter-remove-icon": "filter-remove",
+		"--kup-key-icon": "key-variant",
+		"--kup-search-icon": "search"
+	},
+	imports: [
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')",
+		"url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+	],
+	customStyles: {
+	}
+};
+const bubbles = {
+	cssVariables: {
 		"--kup-primary-color": "#c18f00",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#e0c780",
+		"--kup-primary-color-10": "#dabc66",
+		"--kup-primary-color-20": "#d4b14d",
+		"--kup-primary-color-30": "#cda533",
+		"--kup-primary-color-40": "#c79a1a",
+		"--kup-primary-color-50": "#c18f00",
+		"--kup-primary-color-60": "#9a7200",
+		"--kup-primary-color-70": "#876400",
+		"--kup-primary-color-80": "#614800",
+		"--kup-primary-color-90": "#3a2b00",
 		"--kup-secondary-color": "#1d1d1d",
+		"--kup-gray-color-0": "#ffffff",
+		"--kup-gray-color-10": "#F4F4F4",
+		"--kup-gray-color-20": "#E0E0E0",
+		"--kup-gray-color-30": "#C6C6C6",
+		"--kup-gray-color-40": "#A8A8A8",
+		"--kup-gray-color-50": "#8d8d8d",
+		"--kup-gray-color-60": "#6f6f6f",
+		"--kup-gray-color-70": "#525252",
+		"--kup-gray-color-80": "#393939",
+		"--kup-gray-color-90": "#262626",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#beb08d",
 		"--kup-navbar-color": "#ffffff",
@@ -3668,13 +3989,19 @@ const bubbles = {
 		"--kup-hover-color": "#545454",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#505050",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#e0e0e0",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
 		"--kup-success-color": "#4d9f02",
 		"--kup-warning-color": "#ffc107",
-		"--kup-danger-color": "#d91e18",
+		"--kup-danger-color-50": "#fa4d56",
+		"--kup-danger-color-60": "#da1e28",
+		"--kup-danger-color-70": "#ba1b23",
+		"--kup-danger-color-80": "#750e13",
+		"--kup-info-color-50": "#4589ff",
+		"--kup-info-color-70": "#0043ce",
+		"--kup-warning-color-40": "#f1c21b",
 		"--kup-spinner-color": "#1D1D1B",
 		"--kup-chart-color-1": "#ff5959",
 		"--kup-chart-color-2": "#e0a0a0",
@@ -3699,6 +4026,7 @@ const bubbles = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -3720,6 +4048,19 @@ const bubbles = {
 };
 const cobalt = {
 	cssVariables: {
+		"--kup-primary-color": "#248aff",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#92c5ff",
+		"--kup-primary-color-10": "#7cb9ff",
+		"--kup-primary-color-20": "#66adff",
+		"--kup-primary-color-30": "#50a1ff",
+		"--kup-primary-color-40": "#3a96ff",
+		"--kup-primary-color-50": "#248aff",
+		"--kup-primary-color-60": "#1d6ecc",
+		"--kup-primary-color-70": "#1961b3",
+		"--kup-primary-color-80": "#124580",
+		"--kup-primary-color-90": "#0b294c",
+		"--kup-secondary-color": "#65cbe9",
 		"--kup-gray-color-0": "#161616",
 		"--kup-gray-color-10": "#262626",
 		"--kup-gray-color-20": "#393939",
@@ -3730,18 +4071,15 @@ const cobalt = {
 		"--kup-gray-color-70": "#C6C6C6",
 		"--kup-gray-color-80": "#E0E0E0",
 		"--kup-gray-color-90": "#f4f4f4",
-		"--kup-gray-color-100": "#ffffff",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
-		"--kup-info-color-50": "#4589ff",
-		"--kup-info-color-70": "#0043ce",
-		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#248aff",
-		"--kup-secondary-color": "#65cbe9",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#222222",
 		"--kup-navbar-background-color": "#131313",
 		"--kup-navbar-color": "#65cbe9",
@@ -3761,13 +4099,16 @@ const cobalt = {
 		"--kup-hover-color": "#96e7ff",
 		"--kup-title-background-color": "#2e2e2e",
 		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#65cbe9",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#535353",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
 		"--kup-success-color": "#4d9f02",
 		"--kup-warning-color": "#ffc107",
 		"--kup-danger-color": "#d91e18",
+		"--kup-info-color-50": "#4589ff",
+		"--kup-info-color-70": "#0043ce",
+		"--kup-warning-color-40": "#f1c21b",
 		"--kup-spinner-color": "#a4d9f7",
 		"--kup-chart-color-1": "#308aff",
 		"--kup-chart-color-2": "#5eb6d1",
@@ -3792,6 +4133,7 @@ const cobalt = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -3811,6 +4153,19 @@ const cobalt = {
 };
 const dark = {
 	cssVariables: {
+		"--kup-primary-color": "#82f0e2",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#dafbf6",
+		"--kup-primary-color-10": "#cdf9f3",
+		"--kup-primary-color-20": "#c1f8f1",
+		"--kup-primary-color-30": "#b4f6ee",
+		"--kup-primary-color-40": "#9bf3e8",
+		"--kup-primary-color-50": "#82f0e2",
+		"--kup-primary-color-60": "#68c0b5",
+		"--kup-primary-color-70": "#5ba89e",
+		"--kup-primary-color-80": "#417871",
+		"--kup-primary-color-90": "#274844",
+		"--kup-secondary-color": "#f9ff00",
 		"--kup-gray-color-0": "#161616",
 		"--kup-gray-color-10": "#262626",
 		"--kup-gray-color-20": "#393939",
@@ -3821,18 +4176,18 @@ const dark = {
 		"--kup-gray-color-70": "#C6C6C6",
 		"--kup-gray-color-80": "#E0E0E0",
 		"--kup-gray-color-90": "#f4f4f4",
-		"--kup-gray-color-100": "#ffffff",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#82f0e2",
-		"--kup-secondary-color": "#f9ff00",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#2d2d2d",
 		"--kup-navbar-background-color": "#2d2d2d",
 		"--kup-navbar-color": "#ffffff",
@@ -3852,7 +4207,7 @@ const dark = {
 		"--kup-hover-color": "#dddddd",
 		"--kup-title-background-color": "#111111",
 		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#e0e0e0",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#535353",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -3883,6 +4238,7 @@ const dark = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -3902,6 +4258,19 @@ const dark = {
 };
 const flamingo = {
 	cssVariables: {
+		"--kup-primary-color": "#e88aab",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#f8dce6",
+		"--kup-primary-color-10": "#f4c5d5",
+		"--kup-primary-color-20": "#f1b9cd",
+		"--kup-primary-color-30": "#efadc4",
+		"--kup-primary-color-40": "#eda1bc",
+		"--kup-primary-color-50": "#e88aab",
+		"--kup-primary-color-60": "#ba6e89",
+		"--kup-primary-color-70": "#a26178",
+		"--kup-primary-color-80": "#744556",
+		"--kup-primary-color-90": "#462933",
+		"--kup-secondary-color": "#7f00e7",
 		"--kup-gray-color-0": "#161616",
 		"--kup-gray-color-10": "#262626",
 		"--kup-gray-color-20": "#393939",
@@ -3912,18 +4281,18 @@ const flamingo = {
 		"--kup-gray-color-70": "#C6C6C6",
 		"--kup-gray-color-80": "#E0E0E0",
 		"--kup-gray-color-90": "#f4f4f4",
-		"--kup-gray-color-100": "#ffffff",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#e88aab",
-		"--kup-secondary-color": "#7f00e7",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#222222",
 		"--kup-navbar-background-color": "#2d2d2d",
 		"--kup-navbar-color": "#ffffff",
@@ -3943,7 +4312,7 @@ const flamingo = {
 		"--kup-hover-color": "#dddddd",
 		"--kup-title-background-color": "#111111",
 		"--kup-title-color": "#f5f5f5",
-		"--kup-icon-color": "#e0e0e0",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#535353",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -3974,6 +4343,7 @@ const flamingo = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -3993,6 +4363,19 @@ const flamingo = {
 };
 const graphite = {
 	cssVariables: {
+		"--kup-primary-color": "#888888",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#e7e7e7",
+		"--kup-primary-color-10": "#cfcfcf",
+		"--kup-primary-color-20": "#b8b8b8",
+		"--kup-primary-color-30": "#a0a0a0",
+		"--kup-primary-color-40": "#949494",
+		"--kup-primary-color-50": "#888888",
+		"--kup-primary-color-60": "#6d6d6d",
+		"--kup-primary-color-70": "#5f5f5f",
+		"--kup-primary-color-80": "#444444",
+		"--kup-primary-color-90": "#292929",
+		"--kup-secondary-color": "#d91e18",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4003,18 +4386,18 @@ const graphite = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#888888",
-		"--kup-secondary-color": "#d91e18",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#535353",
 		"--kup-navbar-color": "#ffffff",
@@ -4024,7 +4407,7 @@ const graphite = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Roboto, sans-serif",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#545454",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4034,7 +4417,7 @@ const graphite = {
 		"--kup-hover-color": "#545454",
 		"--kup-title-background-color": "#f0f0f0",
 		"--kup-title-color": "#545454",
-		"--kup-icon-color": "#808080",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#e0e0e0",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -4071,6 +4454,7 @@ const graphite = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	customStyles: {
@@ -4090,6 +4474,19 @@ const graphite = {
 };
 const ketchup = {
 	cssVariables: {
+		"--kup-primary-color": "#d64325",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#e68e7c",
+		"--kup-primary-color-10": "#e68e7c",
+		"--kup-primary-color-20": "#e27b66",
+		"--kup-primary-color-30": "#de6951",
+		"--kup-primary-color-40": "#da563b",
+		"--kup-primary-color-50": "#d64325",
+		"--kup-primary-color-60": "#ab361e",
+		"--kup-primary-color-70": "#962f1a",
+		"--kup-primary-color-80": "#6b2213",
+		"--kup-primary-color-90": "#40140b",
+		"--kup-secondary-color": "#a6192e",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4100,18 +4497,18 @@ const ketchup = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#d64325",
-		"--kup-secondary-color": "#a6192e",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#2e2e2e",
 		"--kup-navbar-color": "#ffffff",
@@ -4131,7 +4528,7 @@ const ketchup = {
 		"--kup-hover-color": "#545454",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#505050",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#e0e0e0",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4162,6 +4559,7 @@ const ketchup = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4181,6 +4579,19 @@ const ketchup = {
 };
 const obsidian = {
 	cssVariables: {
+		"--kup-primary-color": "#a6192e",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#dba3ab",
+		"--kup-primary-color-10": "#ca7582",
+		"--kup-primary-color-20": "#c15e6d",
+		"--kup-primary-color-30": "#b84758",
+		"--kup-primary-color-40": "#af3043",
+		"--kup-primary-color-50": "#a6192e",
+		"--kup-primary-color-60": "#851425",
+		"--kup-primary-color-70": "#741220",
+		"--kup-primary-color-80": "#530d17",
+		"--kup-primary-color-90": "#32070e",
+		"--kup-secondary-color": "#f5f4f4",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4191,18 +4602,18 @@ const obsidian = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#a6192e",
-		"--kup-secondary-color": "#f5f4f4",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#000000",
 		"--kup-navbar-color": "#ffffff",
@@ -4212,7 +4623,7 @@ const obsidian = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Open Sans, arial, helvatica",
 		"--kup-font-family-monospace": "Courier New, Courier, monospace",
-		"--kup-font-size": "13px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#4c4c4d",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#a6192e",
@@ -4222,7 +4633,7 @@ const obsidian = {
 		"--kup-hover-color": "#000000",
 		"--kup-title-background-color": "#068a9c",
 		"--kup-title-color": "#ffffff",
-		"--kup-icon-color": "#9d9d9d",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#ededed",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4259,6 +4670,7 @@ const obsidian = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4278,6 +4690,19 @@ const obsidian = {
 };
 const ocean = {
 	cssVariables: {
+		"--kup-primary-color": "#0081c5",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#99cde8",
+		"--kup-primary-color-10": "#66b3dc",
+		"--kup-primary-color-20": "#4da7d6",
+		"--kup-primary-color-30": "#339ad1",
+		"--kup-primary-color-40": "#1a8ecb",
+		"--kup-primary-color-50": "#0081c5",
+		"--kup-primary-color-60": "#00679e",
+		"--kup-primary-color-70": "#005a8a",
+		"--kup-primary-color-80": "#004163",
+		"--kup-primary-color-90": "#00273b",
+		"--kup-secondary-color": "#3a8ede",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4288,18 +4713,18 @@ const ocean = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#0081c5",
-		"--kup-secondary-color": "#3a8ede",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#001d3e",
 		"--kup-navbar-color": "#ffffff",
@@ -4309,7 +4734,7 @@ const ocean = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Open Sans Condensed, sans-serif",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "16px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#1b1b1b",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4319,7 +4744,7 @@ const ocean = {
 		"--kup-hover-color": "#545454",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#1b1b1b",
-		"--kup-icon-color": "#505050",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#e0e0e0",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -4350,6 +4775,7 @@ const ocean = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4369,6 +4795,19 @@ const ocean = {
 };
 const print = {
 	cssVariables: {
+		"--kup-primary-color": "#000000",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#000000",
+		"--kup-primary-color-10": "#000000",
+		"--kup-primary-color-20": "#000000",
+		"--kup-primary-color-30": "#000000",
+		"--kup-primary-color-40": "#000000",
+		"--kup-primary-color-50": "#000000",
+		"--kup-primary-color-60": "#000000",
+		"--kup-primary-color-70": "#000000",
+		"--kup-primary-color-80": "#000000",
+		"--kup-primary-color-90": "#000000",
+		"--kup-secondary-color": "#cccccc",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4379,18 +4818,18 @@ const print = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#000000",
-		"--kup-secondary-color": "#cccccc",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#000000",
 		"--kup-navbar-color": "#ffffff",
@@ -4400,7 +4839,7 @@ const print = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Arial, Helvetica, sans-serif",
 		"--kup-font-family-monospace": "Courier New, Courier, monospace",
-		"--kup-font-size": "13px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#000000",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#000000",
@@ -4410,7 +4849,7 @@ const print = {
 		"--kup-hover-color": "#000000",
 		"--kup-title-background-color": "#f1f1f1",
 		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#9d9d9d",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#ededed",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4447,6 +4886,7 @@ const print = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	customStyles: {
@@ -4473,6 +4913,19 @@ const print = {
 };
 const raj = {
 	cssVariables: {
+		"--kup-primary-color": "rgb(187, 198, 5)",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#ebeeb4",
+		"--kup-primary-color-10": "#e4e89b",
+		"--kup-primary-color-20": "#dde382",
+		"--kup-primary-color-30": "#d6dd69",
+		"--kup-primary-color-40": "#c9d137",
+		"--kup-primary-color-50": "#bbc605",
+		"--kup-primary-color-60": "#969e04",
+		"--kup-primary-color-70": "#707703",
+		"--kup-primary-color-80": "#4b4f02",
+		"--kup-primary-color-90": "#252801",
+		"--kup-secondary-color": "#ffe600",
 		"--kup-gray-color-0": "#161616",
 		"--kup-gray-color-10": "#262626",
 		"--kup-gray-color-20": "#393939",
@@ -4483,18 +4936,18 @@ const raj = {
 		"--kup-gray-color-70": "#C6C6C6",
 		"--kup-gray-color-80": "#E0E0E0",
 		"--kup-gray-color-90": "#f4f4f4",
-		"--kup-gray-color-100": "#ffffff",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "rgb(187, 198, 5)",
-		"--kup-secondary-color": "#ffe600",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#000000",
 		"--kup-navbar-background-color": "#000000",
 		"--kup-navbar-color": "#ffffff",
@@ -4504,7 +4957,7 @@ const raj = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "'Rajdhani', sans-serif",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "15px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#ffffff",
 		"--kup-text-on-primary-color": "#000000",
 		"--kup-text-on-secondary-color": "#000000",
@@ -4514,7 +4967,7 @@ const raj = {
 		"--kup-hover-color": "#ffffff",
 		"--kup-title-background-color": "#ffe600",
 		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#9d9d9d",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#9d9d9d",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -4545,6 +4998,7 @@ const raj = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4564,6 +5018,19 @@ const raj = {
 };
 const red = {
 	cssVariables: {
+		"--kup-primary-color": "#a6192e",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#e4bac0",
+		"--kup-primary-color-10": "#dba3ab",
+		"--kup-primary-color-20": "#d38c97",
+		"--kup-primary-color-30": "#c15e6d",
+		"--kup-primary-color-40": "#b84758",
+		"--kup-primary-color-50": "#a6192e",
+		"--kup-primary-color-60": "#851425",
+		"--kup-primary-color-70": "#640f1c",
+		"--kup-primary-color-80": "#420a12",
+		"--kup-primary-color-90": "#32070e",
+		"--kup-secondary-color": "#ffc107",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4574,18 +5041,18 @@ const red = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#a6192e",
-		"--kup-secondary-color": "#ffc107",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#a6192e",
 		"--kup-navbar-color": "#ffffff",
@@ -4595,7 +5062,7 @@ const red = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Open Sans, arial, helvatica",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#000000",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4605,7 +5072,7 @@ const red = {
 		"--kup-hover-color": "#000000",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#808080",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#ededed",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4642,6 +5109,7 @@ const red = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4663,6 +5131,19 @@ const red = {
 };
 const sapphire = {
 	cssVariables: {
+		"--kup-primary-color": "#003b77",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#b3c4d6",
+		"--kup-primary-color-10": "#809dbb",
+		"--kup-primary-color-20": "#6689ad",
+		"--kup-primary-color-30": "#336292",
+		"--kup-primary-color-40": "#1a4f85",
+		"--kup-primary-color-50": "#003b77",
+		"--kup-primary-color-60": "#002f5f",
+		"--kup-primary-color-70": "#002347",
+		"--kup-primary-color-80": "#001830",
+		"--kup-primary-color-90": "#001224",
+		"--kup-secondary-color": "#ff1414",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4673,18 +5154,18 @@ const sapphire = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#003b77",
-		"--kup-secondary-color": "#ff1414",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#003b77",
 		"--kup-navbar-color": "#ffffff",
@@ -4692,9 +5173,9 @@ const sapphire = {
 		"--kup-drawer-color": "#ffffff",
 		"--kup-navbar-height": "64px",
 		"--kup-drawer-width": "20em",
-		"--kup-font-family": "Arial",
-		"--kup-font-family-monospace": "Arial",
-		"--kup-font-size": "13px",
+		"--kup-font-family": "IBM Plex Sans, sans-serif",
+		"--kup-font-family-monospace": "IBM Plex Mono, monospace",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#333333",
 		"--kup-text-on-primary-color": "#fafafa",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4704,7 +5185,7 @@ const sapphire = {
 		"--kup-hover-color": "#333333",
 		"--kup-title-background-color": "#003b77",
 		"--kup-title-color": "#ffffff",
-		"--kup-icon-color": "#808080",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#93c4ec",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4741,6 +5222,7 @@ const sapphire = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4760,6 +5242,19 @@ const sapphire = {
 };
 const silver = {
 	cssVariables: {
+		"--kup-primary-color": "#c0c0c0",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#f2f2f2",
+		"--kup-primary-color-10": "#ececec",
+		"--kup-primary-color-20": "#e6e6e6",
+		"--kup-primary-color-30": "#d9d9d9",
+		"--kup-primary-color-40": "#cdcdcd",
+		"--kup-primary-color-50": "#c0c0c0",
+		"--kup-primary-color-60": "#9a9a9a",
+		"--kup-primary-color-70": "#737373",
+		"--kup-primary-color-80": "#4d4d4d",
+		"--kup-primary-color-90": "#262626",
+		"--kup-secondary-color": "#c0c0c0",
 		"--kup-gray-color-0": "#161616",
 		"--kup-gray-color-10": "#262626",
 		"--kup-gray-color-20": "#393939",
@@ -4770,18 +5265,18 @@ const silver = {
 		"--kup-gray-color-70": "#C6C6C6",
 		"--kup-gray-color-80": "#E0E0E0",
 		"--kup-gray-color-90": "#f4f4f4",
-		"--kup-gray-color-100": "#ffffff",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#c0c0c0",
-		"--kup-secondary-color": "#c0c0c0",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#000000",
 		"--kup-navbar-background-color": "#ffffff",
 		"--kup-navbar-color": "#000000",
@@ -4791,7 +5286,7 @@ const silver = {
 		"--kup-drawer-width": "320px",
 		"--kup-font-family": "Oswald, sans-serif",
 		"--kup-font-family-monospace": "Xanh Mono, monospace",
-		"--kup-font-size": "16px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#fefefe",
 		"--kup-text-on-primary-color": "#4a4a4a",
 		"--kup-text-on-secondary-color": "#4a4a4a",
@@ -4801,7 +5296,7 @@ const silver = {
 		"--kup-hover-color": "#dddddd",
 		"--kup-title-background-color": "#151515",
 		"--kup-title-color": "#d9d9d9",
-		"--kup-icon-color": "#c0c0c0",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#c0c0c0",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -4835,6 +5330,7 @@ const silver = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4856,6 +5352,19 @@ const silver = {
 };
 const teal = {
 	cssVariables: {
+		"--kup-primary-color": "#068A9C",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#cde8eb",
+		"--kup-primary-color-10": "#b4dce1",
+		"--kup-primary-color-20": "#9bd0d7",
+		"--kup-primary-color-30": "#6ab9c4",
+		"--kup-primary-color-40": "#38a1b0",
+		"--kup-primary-color-50": "#068A9C",
+		"--kup-primary-color-60": "#056e7d",
+		"--kup-primary-color-70": "#04535e",
+		"--kup-primary-color-80": "#02373e",
+		"--kup-primary-color-90": "#011c1f",
+		"--kup-secondary-color": "#ffc107",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4866,18 +5375,18 @@ const teal = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#068A9C",
-		"--kup-secondary-color": "#ffc107",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#068A9C",
 		"--kup-navbar-color": "#ffffff",
@@ -4887,7 +5396,7 @@ const teal = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Roboto, sans-serif",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "13px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#000000",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4897,7 +5406,7 @@ const teal = {
 		"--kup-hover-color": "#000000",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#2e2e2e",
-		"--kup-icon-color": "#808080",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#ededed",
 		"--kup-box-shadow": "rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px",
 		"--kup-info-color": "#2592df",
@@ -4934,6 +5443,7 @@ const teal = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -4950,6 +5460,19 @@ const teal = {
 };
 const wildlife = {
 	cssVariables: {
+		"--kup-primary-color": "#0fa918",
+		"--kup-primary-color-0": "#ffffff",
+		"--kup-primary-color-5": "#cfeed1",
+		"--kup-primary-color-10": "#b7e5ba",
+		"--kup-primary-color-20": "#9fdda3",
+		"--kup-primary-color-30": "#6fcb74",
+		"--kup-primary-color-40": "#3fba46",
+		"--kup-primary-color-50": "#0fa918",
+		"--kup-primary-color-60": "#0c8713",
+		"--kup-primary-color-70": "#09650e",
+		"--kup-primary-color-80": "#06440a",
+		"--kup-primary-color-90": "#032205",
+		"--kup-secondary-color": "#739f5a",
 		"--kup-gray-color-0": "#ffffff",
 		"--kup-gray-color-10": "#F4F4F4",
 		"--kup-gray-color-20": "#E0E0E0",
@@ -4960,18 +5483,18 @@ const wildlife = {
 		"--kup-gray-color-70": "#525252",
 		"--kup-gray-color-80": "#393939",
 		"--kup-gray-color-90": "#262626",
-		"--kup-gray-color-100": "#161616",
 		"--kup-danger-color-50": "#fa4d56",
 		"--kup-danger-color-60": "#da1e28",
 		"--kup-danger-color-70": "#ba1b23",
 		"--kup-danger-color-80": "#750e13",
-		"--kup-success-color-40": "#42be65",
-		"--kup-success-color-60": "#198038",
 		"--kup-info-color-50": "#4589ff",
 		"--kup-info-color-70": "#0043ce",
 		"--kup-warning-color-40": "#f1c21b",
-		"--kup-primary-color": "#0fa918",
-		"--kup-secondary-color": "#739f5a",
+		"--kup-accent-red-color": "#A6192E",
+		"--kup-accent-orange-color": "#DE8906",
+		"--kup-accent-yellow-color": "#FDDC69",
+		"--kup-accent-green-color": "#A4BA4C",
+		"--kup-accent-white-color": "#FFFFFF",
 		"--kup-background-color": "#ffffff",
 		"--kup-navbar-background-color": "#095a1f",
 		"--kup-navbar-color": "#ffffff",
@@ -4981,7 +5504,7 @@ const wildlife = {
 		"--kup-drawer-width": "300px",
 		"--kup-font-family": "Abel, sans-serif",
 		"--kup-font-family-monospace": "Roboto Mono, consolas, monospace",
-		"--kup-font-size": "16px",
+		"--kup-font-size": "14px",
 		"--kup-text-color": "#000000",
 		"--kup-text-on-primary-color": "#ffffff",
 		"--kup-text-on-secondary-color": "#ffffff",
@@ -4991,7 +5514,7 @@ const wildlife = {
 		"--kup-hover-color": "#ffffff",
 		"--kup-title-background-color": "#f1f3f4",
 		"--kup-title-color": "#000000",
-		"--kup-icon-color": "#333333",
+		"--kup-icon-color": "#636363",
 		"--kup-border-color": "#e0e0e0",
 		"--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
 		"--kup-info-color": "#2592df",
@@ -5022,6 +5545,7 @@ const wildlife = {
 		"--kup-space-12": "96px",
 		"--kup-space-13": "160px",
 		"--kup-radius-00": "0px",
+		"--kup-radius-01": "2px",
 		"--kup-radius-100": "100px"
 	},
 	icons: {
@@ -5041,6 +5565,9 @@ const wildlife = {
 };
 const themes = {
 	octane: octane,
+	octaneGrey: octaneGrey,
+	darkOctane: darkOctane,
+	darkOctaneGray: darkOctaneGray,
 	bubbles: bubbles,
 	cobalt: cobalt,
 	dark: dark,