@cube-dev/ui-kit 0.0.0-canary-ae9c71c → 0.0.0-canary-ddbecd9

package/dist/data/item-themes.js

@@ -1,8 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ae9c71c | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ddbecd9 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
-	invalid: "#danger-text",
-	valid: "#success-text"
+	invalid: "#danger-accent-text",
+	valid: "#success-accent-text"
 } };
 const ITEM_ACTION_BASE_STYLES = {
 	display: "inline-grid",
@@ -50,18 +50,18 @@ const ITEM_ACTION_BASE_STYLES = {
 };
 const DEFAULT_PRIMARY_STYLES = {
 	outline: {
-		"": "0 #primary-text.0",
-		focused: "1bw #primary-text"
+		"": "0 #primary-accent-text.0",
+		focused: "1bw #primary-accent-text"
 	},
 	border: {
 		"": "#white.2",
-		"pressed | focused": "#primary-text",
-		disabled: "#clear"
+		"pressed | focused": "#primary-accent-text",
+		disabled: "transparent"
 	},
 	fill: {
-		"": "#surface #primary",
-		hovered: "#surface #primary-hover",
-		pressed: "#surface #primary",
+		"": "#surface #primary-accent-surface",
+		hovered: "#surface #primary-accent-surface-hover",
+		pressed: "#surface #primary-accent-surface",
 		disabled: "#surface #primary-accent-disabled-surface"
 	},
 	color: {
@@ -73,108 +73,108 @@ const DEFAULT_OUTLINE_STYLES = {
 	border: {
 		"": true,
 		selected: "#primary-border",
-		focused: "#primary-text",
+		focused: "#primary-accent-text",
 		disabled: "#border",
 		...VALIDATION_STYLES.border
 	},
 	fill: {
-		"": "#surface-2 #dark.0",
-		hovered: "#surface-2 #dark.03",
-		pressed: "#surface-2 #dark.09",
-		selected: "#surface-2 #primary.09",
-		"selected & (hovered | focused)": "#surface-2 #primary.12",
-		"selected & pressed": "#surface-2 #primary.18",
+		"": "#surface-2 #surface-text.0",
+		hovered: "#surface-2 #surface-text.03",
+		pressed: "#surface-2 #surface-text.09",
+		selected: "#surface-2 #primary-accent-surface.09",
+		"selected & (hovered | focused)": "#surface-2 #primary-accent-surface.12",
+		"selected & pressed": "#surface-2 #primary-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface"
 	},
 	color: {
-		"": "#dark-02",
-		hovered: "#dark-02",
-		pressed: "#dark",
-		selected: "#primary-text",
+		"": "#surface-text-soft",
+		hovered: "#surface-text-soft",
+		pressed: "#surface-text",
+		selected: "#primary-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_OUTLINE_2_STYLES = {
 	...DEFAULT_OUTLINE_STYLES,
 	fill: {
-		"": "#surface-3 #dark.0",
-		hovered: "#surface-3 #dark.03",
-		pressed: "#surface-3 #dark.09",
-		selected: "#surface-3 #primary.09",
-		"selected & (hovered | focused)": "#surface-3 #primary.12",
-		"selected & pressed": "#surface-3 #primary.15",
+		"": "#surface-3 #surface-text.0",
+		hovered: "#surface-3 #surface-text.03",
+		pressed: "#surface-3 #surface-text.09",
+		selected: "#surface-3 #primary-accent-surface.09",
+		"selected & (hovered | focused)": "#surface-3 #primary-accent-surface.12",
+		"selected & pressed": "#surface-3 #primary-accent-surface.15",
 		disabled: "#surface-3 #disabled-surface"
 	}
 };
 const DEFAULT_CLEAR_STYLES = {
 	border: {
-		"": "#clear",
-		"selected & pressed": "#primary-text.10",
-		focused: "#primary-text",
+		"": "transparent",
+		"selected & pressed": "#primary-accent-text.10",
+		focused: "#primary-accent-text",
 		...VALIDATION_STYLES.border
 	},
 	fill: {
-		"": "#dark.0",
-		"hovered | focused": "#dark.04",
-		pressed: "#dark.06",
-		selected: "#primary.0",
-		"selected & (hovered | focused)": "#primary.09",
-		"selected & pressed": "#primary.12",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		"hovered | focused": "#surface-text.04",
+		pressed: "#surface-text.06",
+		selected: "#primary-accent-surface.0",
+		"selected & (hovered | focused)": "#primary-accent-surface.09",
+		"selected & pressed": "#primary-accent-surface.12",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		hovered: "#dark-02",
-		"pressed & !selected": "#dark",
-		selected: "#primary-text",
+		"": "#surface-text-soft",
+		hovered: "#surface-text-soft",
+		"pressed & !selected": "#surface-text",
+		selected: "#primary-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
-		"": "#dark.0",
-		"hovered | focused": "#dark.04",
-		pressed: "#dark.06",
-		selected: "#dark.09",
-		"selected & (hovered | focused)": "#dark.15",
-		"selected & pressed": "#dark.12",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		"hovered | focused": "#surface-text.04",
+		pressed: "#surface-text.06",
+		selected: "#surface-text.09",
+		"selected & (hovered | focused)": "#surface-text.12",
+		"selected & pressed": "#surface-text.15",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		hovered: "#dark-02",
-		selected: "#dark",
+		"": "#surface-text-soft",
+		hovered: "#surface-text-soft",
+		selected: "#surface-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_LINK_STYLES = {
 	outline: {
-		"": "0 #primary-text.0",
-		focused: "1bw #primary-text"
+		"": "0 #primary-accent-text.0",
+		focused: "1bw #primary-accent-text"
 	},
 	border: "0",
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
-		"": "#primary-text-soft",
-		"hovered & !pressed": "#primary-text",
+		"": "#primary-accent-text-soft",
+		"hovered & !pressed": "#primary-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_PRIMARY_STYLES = {
 	outline: {
-		"": "0 #danger-text.0",
-		focused: "1bw #danger-text"
+		"": "0 #danger-accent-text.0",
+		focused: "1bw #danger-accent-text"
 	},
 	border: {
 		"": "#white.2",
-		"pressed | focused": "#danger-text",
-		disabled: "#clear"
+		"pressed | focused": "#danger-accent-text",
+		disabled: "transparent"
 	},
 	fill: {
-		"": "#surface #danger",
-		hovered: "#surface #danger-hover",
-		pressed: "#surface #danger",
+		"": "#surface #danger-accent-surface",
+		hovered: "#surface #danger-accent-surface-hover",
+		pressed: "#surface #danger-accent-surface",
 		disabled: "#surface #danger-accent-disabled-surface"
 	},
 	color: {
@@ -185,99 +185,99 @@ const DANGER_PRIMARY_STYLES = {
 const DANGER_OUTLINE_STYLES = {
 	border: {
 		"": "#danger-border",
-		focused: "#danger-text",
+		focused: "#danger-accent-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #danger.0",
-		hovered: "#surface-2 #danger.1",
-		pressed: "#surface-2 #danger.05",
-		selected: "#surface-2 #danger.05",
-		"selected & hovered & !pressed": "#surface-2 #danger.1",
+		"": "#surface-2 #danger-accent-surface.0",
+		hovered: "#surface-2 #danger-accent-surface.1",
+		pressed: "#surface-2 #danger-accent-surface.05",
+		selected: "#surface-2 #danger-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-2 #danger-accent-surface.1",
 		disabled: "#surface-2 #disabled-surface"
 	},
 	color: {
-		"": "#danger-text",
+		"": "#danger-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_OUTLINE_2_STYLES = {
 	...DANGER_OUTLINE_STYLES,
 	fill: {
-		"": "#surface-3 #danger.0",
-		hovered: "#surface-3 #danger.1",
-		pressed: "#surface-3 #danger.05",
-		selected: "#surface-3 #danger.05",
-		"selected & hovered & !pressed": "#surface-3 #danger.1",
+		"": "#surface-3 #danger-accent-surface.0",
+		hovered: "#surface-3 #danger-accent-surface.1",
+		pressed: "#surface-3 #danger-accent-surface.05",
+		selected: "#surface-3 #danger-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-3 #danger-accent-surface.1",
 		disabled: "#surface-3 #disabled-surface"
 	}
 };
 const DANGER_CLEAR_STYLES = {
 	border: {
-		"": "#clear",
-		"selected & pressed": "#danger.05",
-		focused: "#danger-text"
+		"": "transparent",
+		"selected & pressed": "#danger-accent-surface.05",
+		focused: "#danger-accent-text"
 	},
 	fill: {
-		"": "#dark.0",
-		hovered: "#dark.04",
-		pressed: "#dark.05",
-		selected: "#danger-text.0",
-		"selected & hovered": "#danger-text.03",
-		"selected & pressed": "#danger-text.09",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		hovered: "#surface-text.04",
+		pressed: "#surface-text.05",
+		selected: "#danger-accent-text.0",
+		"selected & hovered": "#danger-accent-text.03",
+		"selected & pressed": "#danger-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		pressed: "#danger-text",
-		selected: "#danger-text",
+		"": "#surface-text-soft",
+		pressed: "#danger-accent-text",
+		selected: "#danger-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_LINK_STYLES = {
 	outline: {
-		"": "0 #danger-text.0",
-		focused: "1bw #danger-text"
+		"": "0 #danger-accent-text.0",
+		focused: "1bw #danger-accent-text"
 	},
 	border: 0,
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
-		"": "#danger-text-soft",
-		"hovered & !pressed": "#danger-text",
+		"": "#danger-accent-text-soft",
+		"hovered & !pressed": "#danger-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
-		"": "#danger-text.0",
-		"hovered | focused": "#danger-text.03",
-		selected: "#danger-text.09",
-		"selected & (hovered | focused)": "#danger-text.12",
-		pressed: "#danger-text.09",
-		disabled: "#clear"
+		"": "#danger-accent-text.0",
+		"hovered | focused": "#danger-accent-text.03",
+		selected: "#danger-accent-text.09",
+		"selected & (hovered | focused)": "#danger-accent-text.12",
+		pressed: "#danger-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#danger-text",
-		hovered: "#danger-text",
-		pressed: "#danger-text",
-		disabled: "#danger-text.4"
+		"": "#danger-accent-text",
+		hovered: "#danger-accent-text",
+		pressed: "#danger-accent-text",
+		disabled: "#danger-accent-text.4"
 	}
 };
 const SUCCESS_PRIMARY_STYLES = {
 	outline: {
-		"": "0 #success-text.0",
-		focused: "1bw #success-text"
+		"": "0 #success-accent-text.0",
+		focused: "1bw #success-accent-text"
 	},
 	border: {
 		"": "#white.2",
-		"pressed | focused": "#success-text",
-		disabled: "#clear"
+		"pressed | focused": "#success-accent-text",
+		disabled: "transparent"
 	},
 	fill: {
-		"": "#surface #success",
-		hovered: "#surface #success-hover",
-		pressed: "#surface #success",
+		"": "#surface #success-accent-surface",
+		hovered: "#surface #success-accent-surface-hover",
+		pressed: "#surface #success-accent-surface",
 		disabled: "#surface #success-accent-disabled-surface"
 	},
 	color: {
@@ -288,99 +288,99 @@ const SUCCESS_PRIMARY_STYLES = {
 const SUCCESS_OUTLINE_STYLES = {
 	border: {
 		"": "#success-border",
-		focused: "#success-text",
+		focused: "#success-accent-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #success.0",
-		hovered: "#surface-2 #success.1",
-		pressed: "#surface-2 #success.05",
-		selected: "#surface-2 #success.05",
-		"selected & hovered & !pressed": "#surface-2 #success.1",
+		"": "#surface-2 #success-accent-surface.0",
+		hovered: "#surface-2 #success-accent-surface.1",
+		pressed: "#surface-2 #success-accent-surface.05",
+		selected: "#surface-2 #success-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-2 #success-accent-surface.1",
 		disabled: "#surface-2 #disabled-surface"
 	},
 	color: {
-		"": "#success-text",
+		"": "#success-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_OUTLINE_2_STYLES = {
 	...SUCCESS_OUTLINE_STYLES,
 	fill: {
-		"": "#surface-3 #success.0",
-		hovered: "#surface-3 #success.1",
-		pressed: "#surface-3 #success.05",
-		selected: "#surface-3 #success.05",
-		"selected & hovered & !pressed": "#surface-3 #success.1",
+		"": "#surface-3 #success-accent-surface.0",
+		hovered: "#surface-3 #success-accent-surface.1",
+		pressed: "#surface-3 #success-accent-surface.05",
+		selected: "#surface-3 #success-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-3 #success-accent-surface.1",
 		disabled: "#surface-3 #disabled-surface"
 	}
 };
 const SUCCESS_CLEAR_STYLES = {
 	border: {
-		"": "#clear",
-		"selected & pressed": "#success.05",
-		focused: "#success-text"
+		"": "transparent",
+		"selected & pressed": "#success-accent-surface.05",
+		focused: "#success-accent-text"
 	},
 	fill: {
-		"": "#dark.0",
-		hovered: "#dark.04",
-		pressed: "#dark.05",
-		selected: "#success-text.0",
-		"selected & hovered": "#success-text.03",
-		"selected & pressed": "#success-text.09",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		hovered: "#surface-text.04",
+		pressed: "#surface-text.05",
+		selected: "#success-accent-text.0",
+		"selected & hovered": "#success-accent-text.03",
+		"selected & pressed": "#success-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		pressed: "#success-text",
-		selected: "#success-text",
+		"": "#surface-text-soft",
+		pressed: "#success-accent-text",
+		selected: "#success-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_LINK_STYLES = {
 	outline: {
-		"": "0 #success-text.0",
-		focused: "1bw #success-text"
+		"": "0 #success-accent-text.0",
+		focused: "1bw #success-accent-text"
 	},
 	border: 0,
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
-		"": "#success-text-soft",
-		"hovered & !pressed": "#success-text",
+		"": "#success-accent-text-soft",
+		"hovered & !pressed": "#success-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
-		"": "#success-text.0",
-		"hovered | focused": "#success-text.03",
-		selected: "#success-text.09",
-		"selected & (hovered | focused)": "#success-text.12",
-		pressed: "#success-text.09",
-		disabled: "#clear"
+		"": "#success-accent-text.0",
+		"hovered | focused": "#success-accent-text.03",
+		selected: "#success-accent-text.09",
+		"selected & (hovered | focused)": "#success-accent-text.12",
+		pressed: "#success-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#success-text",
-		hovered: "#success-text",
-		pressed: "#success-text",
-		disabled: "#success-text.4"
+		"": "#success-accent-text",
+		hovered: "#success-accent-text",
+		pressed: "#success-accent-text",
+		disabled: "#success-accent-text.4"
 	}
 };
 const WARNING_PRIMARY_STYLES = {
 	outline: {
-		"": "0 #warning-text.0",
-		focused: "1bw #warning-text"
+		"": "0 #warning-accent-text.0",
+		focused: "1bw #warning-accent-text"
 	},
 	border: {
 		"": "#white.2",
-		"pressed | focused": "#warning-text",
-		disabled: "#clear"
+		"pressed | focused": "#warning-accent-text",
+		disabled: "transparent"
 	},
 	fill: {
-		"": "#surface #warning",
-		hovered: "#surface #warning-hover",
-		pressed: "#surface #warning",
+		"": "#surface #warning-accent-surface",
+		hovered: "#surface #warning-accent-surface-hover",
+		pressed: "#surface #warning-accent-surface",
 		disabled: "#surface #warning-accent-disabled-surface"
 	},
 	color: {
@@ -391,99 +391,99 @@ const WARNING_PRIMARY_STYLES = {
 const WARNING_OUTLINE_STYLES = {
 	border: {
 		"": "#warning-border",
-		focused: "#warning-text",
+		focused: "#warning-accent-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #warning.0",
-		hovered: "#surface-2 #warning.1",
-		pressed: "#surface-2 #warning.05",
-		selected: "#surface-2 #warning.05",
-		"selected & hovered & !pressed": "#surface-2 #warning.1",
+		"": "#surface-2 #warning-accent-surface.0",
+		hovered: "#surface-2 #warning-accent-surface.1",
+		pressed: "#surface-2 #warning-accent-surface.05",
+		selected: "#surface-2 #warning-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-2 #warning-accent-surface.1",
 		disabled: "#surface-2 #disabled-surface"
 	},
 	color: {
-		"": "#warning-text",
+		"": "#warning-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_OUTLINE_2_STYLES = {
 	...WARNING_OUTLINE_STYLES,
 	fill: {
-		"": "#surface-3 #warning.0",
-		hovered: "#surface-3 #warning.1",
-		pressed: "#surface-3 #warning.05",
-		selected: "#surface-3 #warning.05",
-		"selected & hovered & !pressed": "#surface-3 #warning.1",
+		"": "#surface-3 #warning-accent-surface.0",
+		hovered: "#surface-3 #warning-accent-surface.1",
+		pressed: "#surface-3 #warning-accent-surface.05",
+		selected: "#surface-3 #warning-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-3 #warning-accent-surface.1",
 		disabled: "#surface-3 #disabled-surface"
 	}
 };
 const WARNING_CLEAR_STYLES = {
 	border: {
-		"": "#clear",
-		"selected & pressed": "#warning.05",
-		focused: "#warning-text"
+		"": "transparent",
+		"selected & pressed": "#warning-accent-surface.05",
+		focused: "#warning-accent-text"
 	},
 	fill: {
-		"": "#dark.0",
-		hovered: "#dark.04",
-		pressed: "#dark.05",
-		selected: "#warning-text.0",
-		"selected & hovered": "#warning-text.03",
-		"selected & pressed": "#warning-text.09",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		hovered: "#surface-text.04",
+		pressed: "#surface-text.05",
+		selected: "#warning-accent-text.0",
+		"selected & hovered": "#warning-accent-text.03",
+		"selected & pressed": "#warning-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		pressed: "#warning-text",
-		selected: "#warning-text",
+		"": "#surface-text-soft",
+		pressed: "#warning-accent-text",
+		selected: "#warning-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_LINK_STYLES = {
 	outline: {
-		"": "0 #warning-text.0",
-		focused: "1bw #warning-text"
+		"": "0 #warning-accent-text.0",
+		focused: "1bw #warning-accent-text"
 	},
 	border: 0,
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
-		"": "#warning-text-soft",
-		"hovered & !pressed": "#warning-text",
+		"": "#warning-accent-text-soft",
+		"hovered & !pressed": "#warning-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
-		"": "#warning-text.0",
-		"hovered | focused": "#warning-text.03",
-		selected: "#warning-text.09",
-		"selected & (hovered | focused)": "#warning-text.12",
-		pressed: "#warning-text.09",
-		disabled: "#clear"
+		"": "#warning-accent-text.0",
+		"hovered | focused": "#warning-accent-text.03",
+		selected: "#warning-accent-text.09",
+		"selected & (hovered | focused)": "#warning-accent-text.12",
+		pressed: "#warning-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#warning-text",
-		hovered: "#warning-text",
-		pressed: "#warning-text",
-		disabled: "#warning-text.4"
+		"": "#warning-accent-text",
+		hovered: "#warning-accent-text",
+		pressed: "#warning-accent-text",
+		disabled: "#warning-accent-text.4"
 	}
 };
 const NOTE_PRIMARY_STYLES = {
 	outline: {
-		"": "0 #note-text.0",
-		focused: "1bw #note-text"
+		"": "0 #note-accent-text.0",
+		focused: "1bw #note-accent-text"
 	},
 	border: {
 		"": "#white.2",
-		"pressed | focused": "#note-text",
-		disabled: "#clear"
+		"pressed | focused": "#note-accent-text",
+		disabled: "transparent"
 	},
 	fill: {
-		"": "#surface #note",
-		hovered: "#surface #note-hover",
-		pressed: "#surface #note",
+		"": "#surface #note-accent-surface",
+		hovered: "#surface #note-accent-surface-hover",
+		pressed: "#surface #note-accent-surface",
 		disabled: "#surface #note-accent-disabled-surface"
 	},
 	color: {
@@ -494,83 +494,83 @@ const NOTE_PRIMARY_STYLES = {
 const NOTE_OUTLINE_STYLES = {
 	border: {
 		"": "#note-border",
-		focused: "#note-text",
+		focused: "#note-accent-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #note.0",
-		hovered: "#surface-2 #note.1",
-		pressed: "#surface-2 #note.05",
-		selected: "#surface-2 #note.05",
-		"selected & hovered & !pressed": "#surface-2 #note.1",
+		"": "#surface-2 #note-accent-surface.0",
+		hovered: "#surface-2 #note-accent-surface.1",
+		pressed: "#surface-2 #note-accent-surface.05",
+		selected: "#surface-2 #note-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-2 #note-accent-surface.1",
 		disabled: "#surface-2 #disabled-surface"
 	},
 	color: {
-		"": "#note-text",
+		"": "#note-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_OUTLINE_2_STYLES = {
 	...NOTE_OUTLINE_STYLES,
 	fill: {
-		"": "#surface-3 #note.0",
-		hovered: "#surface-3 #note.1",
-		pressed: "#surface-3 #note.05",
-		selected: "#surface-3 #note.05",
-		"selected & hovered & !pressed": "#surface-3 #note.1",
+		"": "#surface-3 #note-accent-surface.0",
+		hovered: "#surface-3 #note-accent-surface.1",
+		pressed: "#surface-3 #note-accent-surface.05",
+		selected: "#surface-3 #note-accent-surface.05",
+		"selected & hovered & !pressed": "#surface-3 #note-accent-surface.1",
 		disabled: "#surface-3 #disabled-surface"
 	}
 };
 const NOTE_CLEAR_STYLES = {
 	border: {
-		"": "#clear",
-		"selected & pressed": "#note.05",
-		focused: "#note-text"
+		"": "transparent",
+		"selected & pressed": "#note-accent-surface.05",
+		focused: "#note-accent-text"
 	},
 	fill: {
-		"": "#dark.0",
-		hovered: "#dark.04",
-		pressed: "#dark.05",
-		selected: "#note-text.0",
-		"selected & hovered": "#note-text.03",
-		"selected & pressed": "#note-text.09",
-		disabled: "#clear"
+		"": "#surface-text.0",
+		hovered: "#surface-text.04",
+		pressed: "#surface-text.05",
+		selected: "#note-accent-text.0",
+		"selected & hovered": "#note-accent-text.03",
+		"selected & pressed": "#note-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#dark-02",
-		pressed: "#note-text",
-		selected: "#note-text",
+		"": "#surface-text-soft",
+		pressed: "#note-accent-text",
+		selected: "#note-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_LINK_STYLES = {
 	outline: {
-		"": "0 #note-text.0",
-		focused: "1bw #note-text"
+		"": "0 #note-accent-text.0",
+		focused: "1bw #note-accent-text"
 	},
 	border: 0,
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
-		"": "#note-text-soft",
-		"hovered & !pressed": "#note-text",
+		"": "#note-accent-text-soft",
+		"hovered & !pressed": "#note-accent-text",
 		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
-		"": "#note-text.0",
-		"hovered | focused": "#note-text.03",
-		selected: "#note-text.09",
-		"selected & (hovered | focused)": "#note-text.12",
-		pressed: "#note-text.09",
-		disabled: "#clear"
+		"": "#note-accent-text.0",
+		"hovered | focused": "#note-accent-text.03",
+		selected: "#note-accent-text.09",
+		"selected & (hovered | focused)": "#note-accent-text.12",
+		pressed: "#note-accent-text.09",
+		disabled: "transparent"
 	},
 	color: {
-		"": "#note-text",
-		hovered: "#note-text",
-		pressed: "#note-text",
-		disabled: "#note-text.4"
+		"": "#note-accent-text",
+		hovered: "#note-accent-text",
+		pressed: "#note-accent-text",
+		disabled: "#note-accent-text.4"
 	}
 };
 const SPECIAL_PRIMARY_STYLES = {
@@ -581,7 +581,7 @@ const SPECIAL_PRIMARY_STYLES = {
 	border: {
 		"": "#white.2",
 		"pressed | focused": "#white.4",
-		disabled: "#clear"
+		disabled: "transparent"
 	},
 	fill: {
 		"": "#white #special-accent-fill",
@@ -618,7 +618,7 @@ const SPECIAL_OUTLINE_STYLES = {
 const SPECIAL_CLEAR_STYLES = {
 	outline: { "selected & focused": "1bw #white" },
 	border: {
-		"": "#clear",
+		"": "transparent",
 		focused: "#white",
 		"selected & pressed": "#white",
 		"selected & disabled": "#white.3",
@@ -647,7 +647,7 @@ const SPECIAL_LINK_STYLES = {
 		focused: "1bw #white"
 	},
 	border: "0",
-	fill: { "": "#clear" },
+	fill: { "": "transparent" },
 	color: {
 		"": "#white",
 		"hovered & !pressed": "#white.9",
@@ -655,7 +655,7 @@ const SPECIAL_LINK_STYLES = {
 	}
 };
 const SPECIAL_ITEM_STYLES = {
-	border: "#clear",
+	border: "transparent",
 	fill: {
 		"": "#white.0",
 		hovered: "#white.12",
@@ -667,29 +667,29 @@ const SPECIAL_ITEM_STYLES = {
 	}
 };
 const DEFAULT_CARD_STYLES = {
-	border: "#dark.20",
-	fill: "#light",
-	color: "#dark-02"
+	border: "#surface-text.20",
+	fill: "#surface-3",
+	color: "#surface-text-soft"
 };
 const SUCCESS_CARD_STYLES = {
-	border: "#success.20",
-	fill: "#success-bg",
-	color: "#success-text"
+	border: "#success-accent-surface.20",
+	fill: "#success-surface",
+	color: "#success-accent-text"
 };
 const DANGER_CARD_STYLES = {
-	border: "#danger.20",
-	fill: "#danger-bg",
-	color: "#danger-text"
+	border: "#danger-accent-surface.20",
+	fill: "#danger-surface",
+	color: "#danger-accent-text"
 };
 const WARNING_CARD_STYLES = {
-	border: "#warning.20",
-	fill: "#warning-bg",
-	color: "#warning-text"
+	border: "#warning-accent-surface.20",
+	fill: "#warning-surface",
+	color: "#warning-accent-text"
 };
 const NOTE_CARD_STYLES = {
-	border: "#note.20",
-	fill: "#note-bg",
-	color: "#note-text"
+	border: "#note-accent-surface.20",
+	fill: "#note-surface",
+	color: "#note-accent-text"
 };
 
 //#endregion