@cube-dev/ui-kit 0.199.1 → 0.200.0

package/dist/data/item-themes.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
+import { mergeStyles } from "@tenphi/tasty";
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-accent-text",
@@ -12,9 +13,9 @@ const ITEM_ACTION_BASE_STYLES = {
 	gap: 0,
 	position: "relative",
 	margin: {
-		"": "0 1bw 0 1bw",
-		":last-child & !:first-child": "0 $side-padding 0 0",
-		"!:last-child & :first-child": "0 0 0 $side-padding",
+		"": "0 $item-gap 0 $item-gap",
+		":last-child & !:first-child": "$side-padding right",
+		"!:last-child & :first-child": "$side-padding left",
 		":last-child & :first-child": "0 $side-padding",
 		context: "0"
 	},
@@ -51,12 +52,12 @@ const ITEM_ACTION_BASE_STYLES = {
 const DEFAULT_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#primary-accent-surface-border",
 		pressed: "#primary-accent-surface-border",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#surface #primary-accent-surface",
@@ -69,16 +70,15 @@ const DEFAULT_PRIMARY_STYLES = {
 		disabled: "#primary-accent-disabled-surface-text"
 	}
 };
-const DEFAULT_OUTLINE_STYLES = {
+const DEFAULT_OUTLINE_STYLES = mergeStyles({
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": true,
 		selected: "#primary-border",
-		disabled: "#border",
-		...VALIDATION_STYLES.border
+		disabled: "#border"
 	},
 	fill: {
 		"": "#surface-2 #surface-text.0",
@@ -99,29 +99,23 @@ const DEFAULT_OUTLINE_STYLES = {
 		disabled: "#disabled-surface-text",
 		"selected & disabled": "#primary-accent-disabled-text"
 	}
-};
-const DEFAULT_OUTLINE_2_STYLES = {
-	...DEFAULT_OUTLINE_STYLES,
-	fill: {
-		"": "#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",
-		"selected & disabled": "#surface-3 #primary-accent-surface.09"
-	}
-};
-const DEFAULT_CLEAR_STYLES = {
+}, VALIDATION_STYLES);
+const DEFAULT_OUTLINE_2_STYLES = mergeStyles(DEFAULT_OUTLINE_STYLES, { fill: {
+	"": "#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",
+	"selected & disabled": "#surface-3 #primary-accent-surface.09"
+} });
+const DEFAULT_CLEAR_STYLES = mergeStyles({
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
-	},
-	border: {
-		"": "transparent",
-		...VALIDATION_STYLES.border
+		focused: "$ring-width #primary-accent-text"
 	},
+	border: { "": "#clear" },
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -129,7 +123,7 @@ const DEFAULT_CLEAR_STYLES = {
 		selected: "#primary-accent-surface.09",
 		"selected & (hovered | focused)": "#primary-accent-surface.12",
 		"selected & pressed": "#primary-accent-surface.18",
-		disabled: "transparent",
+		disabled: "#clear",
 		"selected & disabled": "#primary-accent-surface.09"
 	},
 	color: {
@@ -141,9 +135,9 @@ const DEFAULT_CLEAR_STYLES = {
 		disabled: "#disabled-surface-text",
 		"selected & disabled": "#primary-accent-disabled-text"
 	}
-};
+}, VALIDATION_STYLES);
 const DEFAULT_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -151,7 +145,7 @@ const DEFAULT_ITEM_STYLES = {
 		selected: "#surface-text.09",
 		"selected & (hovered | focused)": "#surface-text.12",
 		"selected & pressed": "#surface-text.15",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	color: {
 		"": "#surface-text-soft",
@@ -163,10 +157,10 @@ const DEFAULT_ITEM_STYLES = {
 const DEFAULT_LINK_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: "0",
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#primary-accent-text-soft",
 		"hovered & !pressed": "#primary-accent-text",
@@ -176,12 +170,12 @@ const DEFAULT_LINK_STYLES = {
 const DANGER_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#white.2",
 		pressed: "#danger-accent-text",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#surface #danger-accent-surface",
@@ -197,7 +191,7 @@ const DANGER_PRIMARY_STYLES = {
 const DANGER_OUTLINE_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#danger-border",
@@ -220,25 +214,22 @@ const DANGER_OUTLINE_STYLES = {
 		"selected & disabled": "#danger-accent-disabled-text"
 	}
 };
-const DANGER_OUTLINE_2_STYLES = {
-	...DANGER_OUTLINE_STYLES,
-	fill: {
-		"": "#surface-3 #danger-accent-surface.0",
-		hovered: "#surface-3 #danger-accent-surface.03",
-		pressed: "#surface-3 #danger-accent-surface.09",
-		selected: "#surface-3 #danger-accent-surface.09",
-		"selected & (hovered | focused)": "#surface-3 #danger-accent-surface.12",
-		"selected & pressed": "#surface-3 #danger-accent-surface.18",
-		disabled: "#surface-3 #disabled-surface",
-		"selected & disabled": "#surface-3 #danger-accent-surface.09"
-	}
-};
+const DANGER_OUTLINE_2_STYLES = mergeStyles(DANGER_OUTLINE_STYLES, { fill: {
+	"": "#surface-3 #danger-accent-surface.0",
+	hovered: "#surface-3 #danger-accent-surface.03",
+	pressed: "#surface-3 #danger-accent-surface.09",
+	selected: "#surface-3 #danger-accent-surface.09",
+	"selected & (hovered | focused)": "#surface-3 #danger-accent-surface.12",
+	"selected & pressed": "#surface-3 #danger-accent-surface.18",
+	disabled: "#surface-3 #disabled-surface",
+	"selected & disabled": "#surface-3 #danger-accent-surface.09"
+} });
 const DANGER_CLEAR_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
-	border: { "": "transparent" },
+	border: { "": "#clear" },
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -246,7 +237,7 @@ const DANGER_CLEAR_STYLES = {
 		selected: "#danger-accent-text.09",
 		"selected & (hovered | focused)": "#danger-accent-text.12",
 		"selected & pressed": "#danger-accent-text.18",
-		disabled: "transparent",
+		disabled: "#clear",
 		"selected & disabled": "#danger-accent-text.09"
 	},
 	color: {
@@ -259,10 +250,10 @@ const DANGER_CLEAR_STYLES = {
 const DANGER_LINK_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: 0,
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#danger-accent-text-soft",
 		"hovered & !pressed": "#danger-accent-text",
@@ -270,14 +261,14 @@ const DANGER_LINK_STYLES = {
 	}
 };
 const DANGER_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#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"
+		disabled: "#clear"
 	},
 	color: {
 		"": "#danger-accent-text",
@@ -289,12 +280,12 @@ const DANGER_ITEM_STYLES = {
 const SUCCESS_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#white.2",
 		pressed: "#success-accent-text",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#surface #success-accent-surface",
@@ -310,7 +301,7 @@ const SUCCESS_PRIMARY_STYLES = {
 const SUCCESS_OUTLINE_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#success-border",
@@ -333,25 +324,22 @@ const SUCCESS_OUTLINE_STYLES = {
 		"selected & disabled": "#success-accent-disabled-text"
 	}
 };
-const SUCCESS_OUTLINE_2_STYLES = {
-	...SUCCESS_OUTLINE_STYLES,
-	fill: {
-		"": "#surface-3 #success-accent-surface.0",
-		hovered: "#surface-3 #success-accent-surface.03",
-		pressed: "#surface-3 #success-accent-surface.09",
-		selected: "#surface-3 #success-accent-surface.09",
-		"selected & (hovered | focused)": "#surface-3 #success-accent-surface.12",
-		"selected & pressed": "#surface-3 #success-accent-surface.18",
-		disabled: "#surface-3 #disabled-surface",
-		"selected & disabled": "#surface-3 #success-accent-surface.09"
-	}
-};
+const SUCCESS_OUTLINE_2_STYLES = mergeStyles(SUCCESS_OUTLINE_STYLES, { fill: {
+	"": "#surface-3 #success-accent-surface.0",
+	hovered: "#surface-3 #success-accent-surface.03",
+	pressed: "#surface-3 #success-accent-surface.09",
+	selected: "#surface-3 #success-accent-surface.09",
+	"selected & (hovered | focused)": "#surface-3 #success-accent-surface.12",
+	"selected & pressed": "#surface-3 #success-accent-surface.18",
+	disabled: "#surface-3 #disabled-surface",
+	"selected & disabled": "#surface-3 #success-accent-surface.09"
+} });
 const SUCCESS_CLEAR_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
-	border: { "": "transparent" },
+	border: { "": "#clear" },
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -359,7 +347,7 @@ const SUCCESS_CLEAR_STYLES = {
 		selected: "#success-accent-text.09",
 		"selected & (hovered | focused)": "#success-accent-text.12",
 		"selected & pressed": "#success-accent-text.18",
-		disabled: "transparent",
+		disabled: "#clear",
 		"selected & disabled": "#success-accent-text.09"
 	},
 	color: {
@@ -372,10 +360,10 @@ const SUCCESS_CLEAR_STYLES = {
 const SUCCESS_LINK_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: 0,
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#success-accent-text-soft",
 		"hovered & !pressed": "#success-accent-text",
@@ -383,14 +371,14 @@ const SUCCESS_LINK_STYLES = {
 	}
 };
 const SUCCESS_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#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"
+		disabled: "#clear"
 	},
 	color: {
 		"": "#success-accent-text",
@@ -402,12 +390,12 @@ const SUCCESS_ITEM_STYLES = {
 const WARNING_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#white.2",
 		pressed: "#warning-accent-text",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#surface #warning-accent-surface",
@@ -423,7 +411,7 @@ const WARNING_PRIMARY_STYLES = {
 const WARNING_OUTLINE_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#warning-border",
@@ -446,25 +434,22 @@ const WARNING_OUTLINE_STYLES = {
 		"selected & disabled": "#warning-accent-disabled-text"
 	}
 };
-const WARNING_OUTLINE_2_STYLES = {
-	...WARNING_OUTLINE_STYLES,
-	fill: {
-		"": "#surface-3 #warning-accent-surface.0",
-		hovered: "#surface-3 #warning-accent-surface.03",
-		pressed: "#surface-3 #warning-accent-surface.09",
-		selected: "#surface-3 #warning-accent-surface.09",
-		"selected & (hovered | focused)": "#surface-3 #warning-accent-surface.12",
-		"selected & pressed": "#surface-3 #warning-accent-surface.18",
-		disabled: "#surface-3 #disabled-surface",
-		"selected & disabled": "#surface-3 #warning-accent-surface.09"
-	}
-};
+const WARNING_OUTLINE_2_STYLES = mergeStyles(WARNING_OUTLINE_STYLES, { fill: {
+	"": "#surface-3 #warning-accent-surface.0",
+	hovered: "#surface-3 #warning-accent-surface.03",
+	pressed: "#surface-3 #warning-accent-surface.09",
+	selected: "#surface-3 #warning-accent-surface.09",
+	"selected & (hovered | focused)": "#surface-3 #warning-accent-surface.12",
+	"selected & pressed": "#surface-3 #warning-accent-surface.18",
+	disabled: "#surface-3 #disabled-surface",
+	"selected & disabled": "#surface-3 #warning-accent-surface.09"
+} });
 const WARNING_CLEAR_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
-	border: { "": "transparent" },
+	border: { "": "#clear" },
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -472,7 +457,7 @@ const WARNING_CLEAR_STYLES = {
 		selected: "#warning-accent-text.09",
 		"selected & (hovered | focused)": "#warning-accent-text.12",
 		"selected & pressed": "#warning-accent-text.18",
-		disabled: "transparent",
+		disabled: "#clear",
 		"selected & disabled": "#warning-accent-text.09"
 	},
 	color: {
@@ -485,10 +470,10 @@ const WARNING_CLEAR_STYLES = {
 const WARNING_LINK_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: 0,
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#warning-accent-text-soft",
 		"hovered & !pressed": "#warning-accent-text",
@@ -496,14 +481,14 @@ const WARNING_LINK_STYLES = {
 	}
 };
 const WARNING_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#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"
+		disabled: "#clear"
 	},
 	color: {
 		"": "#warning-accent-text",
@@ -515,12 +500,12 @@ const WARNING_ITEM_STYLES = {
 const NOTE_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#white.2",
 		pressed: "#note-accent-text",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#surface #note-accent-surface",
@@ -536,7 +521,7 @@ const NOTE_PRIMARY_STYLES = {
 const NOTE_OUTLINE_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: {
 		"": "#note-border",
@@ -559,25 +544,22 @@ const NOTE_OUTLINE_STYLES = {
 		"selected & disabled": "#note-accent-disabled-text"
 	}
 };
-const NOTE_OUTLINE_2_STYLES = {
-	...NOTE_OUTLINE_STYLES,
-	fill: {
-		"": "#surface-3 #note-accent-surface.0",
-		hovered: "#surface-3 #note-accent-surface.03",
-		pressed: "#surface-3 #note-accent-surface.09",
-		selected: "#surface-3 #note-accent-surface.09",
-		"selected & (hovered | focused)": "#surface-3 #note-accent-surface.12",
-		"selected & pressed": "#surface-3 #note-accent-surface.18",
-		disabled: "#surface-3 #disabled-surface",
-		"selected & disabled": "#surface-3 #note-accent-surface.09"
-	}
-};
+const NOTE_OUTLINE_2_STYLES = mergeStyles(NOTE_OUTLINE_STYLES, { fill: {
+	"": "#surface-3 #note-accent-surface.0",
+	hovered: "#surface-3 #note-accent-surface.03",
+	pressed: "#surface-3 #note-accent-surface.09",
+	selected: "#surface-3 #note-accent-surface.09",
+	"selected & (hovered | focused)": "#surface-3 #note-accent-surface.12",
+	"selected & pressed": "#surface-3 #note-accent-surface.18",
+	disabled: "#surface-3 #disabled-surface",
+	"selected & disabled": "#surface-3 #note-accent-surface.09"
+} });
 const NOTE_CLEAR_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
-	border: { "": "transparent" },
+	border: { "": "#clear" },
 	fill: {
 		"": "#surface-text.0",
 		"hovered | focused": "#surface-text.04",
@@ -585,7 +567,7 @@ const NOTE_CLEAR_STYLES = {
 		selected: "#note-accent-text.09",
 		"selected & (hovered | focused)": "#note-accent-text.12",
 		"selected & pressed": "#note-accent-text.18",
-		disabled: "transparent",
+		disabled: "#clear",
 		"selected & disabled": "#note-accent-text.09"
 	},
 	color: {
@@ -598,10 +580,10 @@ const NOTE_CLEAR_STYLES = {
 const NOTE_LINK_STYLES = {
 	outline: {
 		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
+		focused: "$ring-width #primary-accent-text"
 	},
 	border: 0,
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#note-accent-text-soft",
 		"hovered & !pressed": "#note-accent-text",
@@ -609,14 +591,14 @@ const NOTE_LINK_STYLES = {
 	}
 };
 const NOTE_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#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"
+		disabled: "#clear"
 	},
 	color: {
 		"": "#note-accent-text",
@@ -628,12 +610,12 @@ const NOTE_ITEM_STYLES = {
 const SPECIAL_PRIMARY_STYLES = {
 	outline: {
 		"": "0 #special-accent-text.0",
-		focused: "1bw #special-accent-text"
+		focused: "$ring-width #special-accent-text"
 	},
 	border: {
 		"": "#special-accent-surface-border",
 		pressed: "#special-accent-surface-border",
-		disabled: "transparent"
+		disabled: "#clear"
 	},
 	fill: {
 		"": "#white #special-accent-surface",
@@ -646,15 +628,14 @@ const SPECIAL_PRIMARY_STYLES = {
 		disabled: "#special-accent-disabled-surface-text"
 	}
 };
-const SPECIAL_OUTLINE_STYLES = {
+const SPECIAL_OUTLINE_STYLES = mergeStyles({
 	outline: {
 		"": "0 #special-accent-text.0",
-		focused: "1bw #special-accent-text"
+		focused: "$ring-width #special-accent-text"
 	},
 	border: {
 		"": "#white.15",
-		selected: "#white.2",
-		...VALIDATION_STYLES.border
+		selected: "#white.2"
 	},
 	fill: {
 		"": "#special-surface #white.0",
@@ -672,16 +653,13 @@ const SPECIAL_OUTLINE_STYLES = {
 		disabled: "#white.23",
 		"selected & disabled": "#white.28"
 	}
-};
-const SPECIAL_CLEAR_STYLES = {
+}, VALIDATION_STYLES);
+const SPECIAL_CLEAR_STYLES = mergeStyles({
 	outline: {
 		"": "0 #special-accent-text.0",
-		focused: "1bw #special-accent-text"
-	},
-	border: {
-		"": "transparent",
-		...VALIDATION_STYLES.border
+		focused: "$ring-width #special-accent-text"
 	},
+	border: { "": "#clear" },
 	fill: {
 		"": "#white.0",
 		"hovered | focused": "#white.12",
@@ -698,14 +676,14 @@ const SPECIAL_CLEAR_STYLES = {
 		disabled: "#white.23",
 		"selected & disabled": "#special-accent-text.45"
 	}
-};
+}, VALIDATION_STYLES);
 const SPECIAL_LINK_STYLES = {
 	outline: {
 		"": "0 #special-accent-text.0",
-		focused: "1bw #special-accent-text"
+		focused: "$ring-width #special-accent-text"
 	},
 	border: "0",
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#white",
 		"hovered & !pressed": "#white.9",
@@ -713,7 +691,7 @@ const SPECIAL_LINK_STYLES = {
 	}
 };
 const SPECIAL_ITEM_STYLES = {
-	border: "transparent",
+	border: "#clear",
 	fill: {
 		"": "#white.0",
 		hovered: "#white.12",
@@ -748,35 +726,26 @@ const CURRENT_ITEM_RAMP = {
 };
 const CURRENT_FOCUS_RING = { outline: {
 	"": "0 #primary-accent-text.0",
-	focused: "1bw #primary-accent-text"
+	focused: "$ring-width #primary-accent-text"
 } };
-const CURRENT_ITEM_STYLES = {
-	...CURRENT_ITEM_RAMP,
-	border: "transparent",
+const CURRENT_ITEM_STYLES = mergeStyles(CURRENT_ITEM_RAMP, {
+	border: "#clear",
 	fill: {
 		"": "#current.0",
-		"hovered | focused": "var(--current-hover)",
-		pressed: "var(--current-press)",
-		selected: "var(--current-selected)",
-		"selected & (hovered | focused)": "var(--current-selected-hover)",
-		"selected & pressed": "var(--current-selected-press)",
-		disabled: "transparent"
+		"hovered | focused": "$current-hover",
+		pressed: "$current-press",
+		selected: "$current-selected",
+		"selected & (hovered | focused)": "$current-selected-hover",
+		"selected & pressed": "$current-selected-press",
+		disabled: "#clear"
 	},
 	color: {
 		"": "#current",
 		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
-};
-const CURRENT_CLEAR_STYLES = {
-	...CURRENT_ITEM_STYLES,
-	...CURRENT_FOCUS_RING,
-	fill: {
-		...CURRENT_ITEM_STYLES.fill,
-		"selected & disabled": "#current.18"
-	}
-};
-const CURRENT_OUTLINE_STYLES = {
-	...CURRENT_FOCUS_RING,
+});
+const CURRENT_CLEAR_STYLES = mergeStyles(CURRENT_ITEM_STYLES, CURRENT_FOCUS_RING, { fill: { "selected & disabled": "#current.18" } });
+const CURRENT_OUTLINE_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 	border: {
 		"": "#current.08",
 		"hovered | focused": "#current.15",
@@ -800,9 +769,8 @@ const CURRENT_OUTLINE_STYLES = {
 		"": "#current",
 		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
-};
-const CURRENT_OUTLINE_2_STYLES = {
-	...CURRENT_FOCUS_RING,
+});
+const CURRENT_OUTLINE_2_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 	border: {
 		"": "#current.14",
 		"hovered | focused": "#current.22",
@@ -826,9 +794,8 @@ const CURRENT_OUTLINE_2_STYLES = {
 		"": "#current",
 		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
-};
-const CURRENT_PRIMARY_STYLES = {
-	...CURRENT_FOCUS_RING,
+});
+const CURRENT_PRIMARY_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 	border: {
 		"": "#current-fill.25",
 		disabled: "#surface-text.2"
@@ -845,28 +812,26 @@ const CURRENT_PRIMARY_STYLES = {
 	"-webkit-text-fill-color": {
 		"": "#current-fill",
 		disabled: "#current-fill.5"
-	},
-	...Object.fromEntries([
-		"Icon",
-		"RightIcon",
-		"Prefix",
-		"Suffix",
-		"Actions"
-	].map((slot) => [slot, { color: {
-		"": "#current-fill",
-		disabled: "#current-fill.5"
-	} }]))
-};
-const CURRENT_LINK_STYLES = {
-	...CURRENT_FOCUS_RING,
+	}
+}, Object.fromEntries([
+	"Icon",
+	"RightIcon",
+	"Prefix",
+	"Suffix",
+	"Actions"
+].map((slot) => [slot, { color: {
+	"": "#current-fill",
+	disabled: "#current-fill.5"
+} }])));
+const CURRENT_LINK_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 	border: 0,
-	fill: { "": "transparent" },
+	fill: { "": "#clear" },
 	color: {
 		"": "#current.8",
 		"hovered & !pressed": "#current",
 		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
-};
+});
 const CURRENT_CARD_STYLES = {
 	border: "#current.2",
 	fill: "#current.05",