@cube-dev/ui-kit 0.163.0 → 0.164.0

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.164.0 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-accent-text",
@@ -88,7 +88,7 @@ const DEFAULT_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#surface-2 #primary-accent-surface.12",
 		"selected & pressed": "#surface-2 #primary-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface",
-		"selected & disabled": "#surface-2 #primary-accent-disabled-surface"
+		"selected & disabled": "#surface-2 #primary-accent-surface.08"
 	},
 	color: {
 		"": "#surface-text-soft",
@@ -97,7 +97,7 @@ const DEFAULT_OUTLINE_STYLES = {
 		selected: "#primary-accent-text-soft",
 		"selected & hovered": "#primary-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#primary-accent-disabled-surface-text"
+		"selected & disabled": "#primary-accent-disabled-text"
 	}
 };
 const DEFAULT_OUTLINE_2_STYLES = {
@@ -110,7 +110,7 @@ const DEFAULT_OUTLINE_2_STYLES = {
 		"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-disabled-surface"
+		"selected & disabled": "#surface-3 #primary-accent-surface.08"
 	}
 };
 const DEFAULT_CLEAR_STYLES = {
@@ -130,7 +130,7 @@ const DEFAULT_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#primary-accent-surface.12",
 		"selected & pressed": "#primary-accent-surface.18",
 		disabled: "transparent",
-		"selected & disabled": "#primary-accent-disabled-surface"
+		"selected & disabled": "#primary-accent-surface.08"
 	},
 	color: {
 		"": "#surface-text-soft",
@@ -139,7 +139,7 @@ const DEFAULT_CLEAR_STYLES = {
 		selected: "#primary-accent-text-soft",
 		"selected & hovered": "#primary-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#primary-accent-disabled-surface-text"
+		"selected & disabled": "#primary-accent-disabled-text"
 	}
 };
 const DEFAULT_ITEM_STYLES = {
@@ -211,13 +211,13 @@ const DANGER_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#surface-2 #danger-accent-surface.12",
 		"selected & pressed": "#surface-2 #danger-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface",
-		"selected & disabled": "#surface-2 #danger-accent-disabled-surface"
+		"selected & disabled": "#surface-2 #danger-accent-surface.08"
 	},
 	color: {
 		"": "#danger-accent-text-soft",
 		selected: "#danger-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#danger-accent-disabled-surface-text"
+		"selected & disabled": "#danger-accent-disabled-text"
 	}
 };
 const DANGER_OUTLINE_2_STYLES = {
@@ -230,7 +230,7 @@ const DANGER_OUTLINE_2_STYLES = {
 		"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-disabled-surface"
+		"selected & disabled": "#surface-3 #danger-accent-surface.08"
 	}
 };
 const DANGER_CLEAR_STYLES = {
@@ -247,13 +247,13 @@ const DANGER_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#danger-accent-text.12",
 		"selected & pressed": "#danger-accent-text.18",
 		disabled: "transparent",
-		"selected & disabled": "#danger-accent-disabled-surface"
+		"selected & disabled": "#danger-accent-text.08"
 	},
 	color: {
 		"": "#danger-accent-text-soft",
 		selected: "#danger-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#danger-accent-disabled-surface-text"
+		"selected & disabled": "#danger-accent-disabled-text"
 	}
 };
 const DANGER_LINK_STYLES = {
@@ -324,13 +324,13 @@ const SUCCESS_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#surface-2 #success-accent-surface.12",
 		"selected & pressed": "#surface-2 #success-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface",
-		"selected & disabled": "#surface-2 #success-accent-disabled-surface"
+		"selected & disabled": "#surface-2 #success-accent-surface.08"
 	},
 	color: {
 		"": "#success-accent-text-soft",
 		selected: "#success-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#success-accent-disabled-surface-text"
+		"selected & disabled": "#success-accent-disabled-text"
 	}
 };
 const SUCCESS_OUTLINE_2_STYLES = {
@@ -343,7 +343,7 @@ const SUCCESS_OUTLINE_2_STYLES = {
 		"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-disabled-surface"
+		"selected & disabled": "#surface-3 #success-accent-surface.08"
 	}
 };
 const SUCCESS_CLEAR_STYLES = {
@@ -360,13 +360,13 @@ const SUCCESS_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#success-accent-text.12",
 		"selected & pressed": "#success-accent-text.18",
 		disabled: "transparent",
-		"selected & disabled": "#success-accent-disabled-surface"
+		"selected & disabled": "#success-accent-text.08"
 	},
 	color: {
 		"": "#success-accent-text-soft",
 		selected: "#success-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#success-accent-disabled-surface-text"
+		"selected & disabled": "#success-accent-disabled-text"
 	}
 };
 const SUCCESS_LINK_STYLES = {
@@ -437,13 +437,13 @@ const WARNING_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#surface-2 #warning-accent-surface.12",
 		"selected & pressed": "#surface-2 #warning-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface",
-		"selected & disabled": "#surface-2 #warning-accent-disabled-surface"
+		"selected & disabled": "#surface-2 #warning-accent-surface.08"
 	},
 	color: {
 		"": "#warning-accent-text-soft",
 		selected: "#warning-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#warning-accent-disabled-surface-text"
+		"selected & disabled": "#warning-accent-disabled-text"
 	}
 };
 const WARNING_OUTLINE_2_STYLES = {
@@ -456,7 +456,7 @@ const WARNING_OUTLINE_2_STYLES = {
 		"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-disabled-surface"
+		"selected & disabled": "#surface-3 #warning-accent-surface.08"
 	}
 };
 const WARNING_CLEAR_STYLES = {
@@ -473,13 +473,13 @@ const WARNING_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#warning-accent-text.12",
 		"selected & pressed": "#warning-accent-text.18",
 		disabled: "transparent",
-		"selected & disabled": "#warning-accent-disabled-surface"
+		"selected & disabled": "#warning-accent-text.08"
 	},
 	color: {
 		"": "#warning-accent-text-soft",
 		selected: "#warning-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#warning-accent-disabled-surface-text"
+		"selected & disabled": "#warning-accent-disabled-text"
 	}
 };
 const WARNING_LINK_STYLES = {
@@ -550,13 +550,13 @@ const NOTE_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#surface-2 #note-accent-surface.12",
 		"selected & pressed": "#surface-2 #note-accent-surface.18",
 		disabled: "#surface-2 #disabled-surface",
-		"selected & disabled": "#surface-2 #note-accent-disabled-surface"
+		"selected & disabled": "#surface-2 #note-accent-surface.08"
 	},
 	color: {
 		"": "#note-accent-text-soft",
 		selected: "#note-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#note-accent-disabled-surface-text"
+		"selected & disabled": "#note-accent-disabled-text"
 	}
 };
 const NOTE_OUTLINE_2_STYLES = {
@@ -569,7 +569,7 @@ const NOTE_OUTLINE_2_STYLES = {
 		"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-disabled-surface"
+		"selected & disabled": "#surface-3 #note-accent-surface.08"
 	}
 };
 const NOTE_CLEAR_STYLES = {
@@ -586,13 +586,13 @@ const NOTE_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#note-accent-text.12",
 		"selected & pressed": "#note-accent-text.18",
 		disabled: "transparent",
-		"selected & disabled": "#note-accent-disabled-surface"
+		"selected & disabled": "#note-accent-text.08"
 	},
 	color: {
 		"": "#note-accent-text-soft",
 		selected: "#note-accent-text",
 		disabled: "#disabled-surface-text",
-		"selected & disabled": "#note-accent-disabled-surface-text"
+		"selected & disabled": "#note-accent-disabled-text"
 	}
 };
 const NOTE_LINK_STYLES = {
@@ -664,13 +664,13 @@ const SPECIAL_OUTLINE_STYLES = {
 		"selected & (hovered | focused)": "#special-surface #white.24",
 		"selected & pressed": "#special-surface #white.3",
 		disabled: "#special-surface #white.04",
-		"selected & disabled": "#special-surface #white.09"
+		"selected & disabled": "#special-surface #white.17"
 	},
 	color: {
 		"": "#white.8",
 		selected: "#white",
-		disabled: "#white.4",
-		"selected & disabled": "#white.55"
+		disabled: "#white.23",
+		"selected & disabled": "#white.28"
 	}
 };
 const SPECIAL_CLEAR_STYLES = {
@@ -690,12 +690,13 @@ const SPECIAL_CLEAR_STYLES = {
 		"selected & (hovered | focused)": "#white.94",
 		"selected & pressed": "#white.88",
 		disabled: "#white.0",
-		"selected & disabled": "#white.16"
+		"selected & disabled": "#white.98"
 	},
 	color: {
 		"": "#white.8",
 		selected: "#special-accent-text",
-		disabled: "#white.4"
+		disabled: "#white.23",
+		"selected & disabled": "#special-accent-text.45"
 	}
 };
 const SPECIAL_LINK_STYLES = {
@@ -708,7 +709,7 @@ const SPECIAL_LINK_STYLES = {
 	color: {
 		"": "#white",
 		"hovered & !pressed": "#white.9",
-		disabled: "#white.4"
+		disabled: "#white.23"
 	}
 };
 const SPECIAL_ITEM_STYLES = {
@@ -720,30 +721,62 @@ const SPECIAL_ITEM_STYLES = {
 	},
 	color: {
 		"": "#white",
-		disabled: "#white.4"
+		disabled: "#white.23"
 	}
 };
+const CURRENT_ITEM_RAMP = {
+	"$current-hover": {
+		"": "#current.04",
+		"@dark": "#current.031"
+	},
+	"$current-press": {
+		"": "#current.06",
+		"@dark": "#current.046"
+	},
+	"$current-selected": {
+		"": "#current.18",
+		"@dark": "#current.13"
+	},
+	"$current-selected-hover": {
+		"": "#current.24",
+		"@dark": "#current.175"
+	},
+	"$current-selected-press": {
+		"": "#current.3",
+		"@dark": "#current.221"
+	}
+};
+const CURRENT_FOCUS_RING = { outline: {
+	"": "0 #primary-accent-text.0",
+	focused: "1bw #primary-accent-text"
+} };
 const CURRENT_ITEM_STYLES = {
+	...CURRENT_ITEM_RAMP,
 	border: "transparent",
 	fill: {
 		"": "#current.0",
-		"hovered | focused": "#current.04",
-		pressed: "#current.06",
-		selected: "#current.09",
-		"selected & (hovered | focused)": "#current.12",
-		"selected & pressed": "#current.15",
+		"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"
 	},
 	color: {
 		"": "#current",
-		disabled: "#current.4"
+		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
 };
-const CURRENT_BUTTON_STYLES = {
-	outline: {
-		"": "0 #primary-accent-text.0",
-		focused: "1bw #primary-accent-text"
-	},
+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,
 	border: {
 		"": "#current.08",
 		"hovered | focused": "#current.15",
@@ -765,9 +798,80 @@ const CURRENT_BUTTON_STYLES = {
 	},
 	color: {
 		"": "#current",
-		disabled: "#current.4"
+		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
+	}
+};
+const CURRENT_OUTLINE_2_STYLES = {
+	...CURRENT_FOCUS_RING,
+	border: {
+		"": "#current.14",
+		"hovered | focused": "#current.22",
+		pressed: "#current.3",
+		selected: "#current.36",
+		"selected & pressed": "#current.45",
+		disabled: "#current.2",
+		"selected & disabled": "#current.5"
+	},
+	fill: {
+		"": "#current.06",
+		"hovered | focused": "#current.11",
+		pressed: "#current.15",
+		selected: "#current.17",
+		"selected & (hovered | focused)": "#current.21",
+		"selected & pressed": "#current.24",
+		disabled: "#current.1",
+		"selected & disabled": "#current.26"
+	},
+	color: {
+		"": "#current",
+		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
+	}
+};
+const CURRENT_PRIMARY_STYLES = {
+	...CURRENT_FOCUS_RING,
+	border: {
+		"": "#current-fill.25",
+		disabled: "#surface-text.2"
+	},
+	fill: {
+		"": "#current #black.0",
+		"hovered | focused": "#current #black.08",
+		pressed: "#current #black.16"
+	},
+	color: {
+		"": "#current",
+		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
+	},
+	"-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,
+	border: 0,
+	fill: { "": "transparent" },
+	color: {
+		"": "#current.8",
+		"hovered & !pressed": "#current",
+		"disabled & !inherit-disabled & !inside-wrapper": "#current.4"
 	}
 };
+const CURRENT_CARD_STYLES = {
+	border: "#current.2",
+	fill: "#current.05",
+	color: "#current"
+};
 const DEFAULT_CARD_STYLES = {
 	border: "#surface-text.20",
 	fill: "#surface-3",
@@ -793,7 +897,74 @@ const NOTE_CARD_STYLES = {
 	fill: "#note-surface",
 	color: "#note-accent-text"
 };
+const ITEM_VARIANTS = {
+	"current.item": CURRENT_ITEM_STYLES,
+	"current.primary": CURRENT_PRIMARY_STYLES,
+	"current.outline": CURRENT_OUTLINE_STYLES,
+	"current.outline-2": CURRENT_OUTLINE_2_STYLES,
+	"current.clear": CURRENT_CLEAR_STYLES,
+	"current.link": CURRENT_LINK_STYLES,
+	"current.card": CURRENT_CARD_STYLES,
+	"default.primary": DEFAULT_PRIMARY_STYLES,
+	"default.outline": DEFAULT_OUTLINE_STYLES,
+	"default.outline-2": DEFAULT_OUTLINE_2_STYLES,
+	"default.clear": DEFAULT_CLEAR_STYLES,
+	"default.link": DEFAULT_LINK_STYLES,
+	"default.item": DEFAULT_ITEM_STYLES,
+	"default.card": DEFAULT_CARD_STYLES,
+	"danger.primary": DANGER_PRIMARY_STYLES,
+	"danger.outline": DANGER_OUTLINE_STYLES,
+	"danger.outline-2": DANGER_OUTLINE_2_STYLES,
+	"danger.clear": DANGER_CLEAR_STYLES,
+	"danger.link": DANGER_LINK_STYLES,
+	"danger.item": DANGER_ITEM_STYLES,
+	"danger.card": DANGER_CARD_STYLES,
+	"success.primary": SUCCESS_PRIMARY_STYLES,
+	"success.outline": SUCCESS_OUTLINE_STYLES,
+	"success.outline-2": SUCCESS_OUTLINE_2_STYLES,
+	"success.clear": SUCCESS_CLEAR_STYLES,
+	"success.link": SUCCESS_LINK_STYLES,
+	"success.item": SUCCESS_ITEM_STYLES,
+	"success.card": SUCCESS_CARD_STYLES,
+	"warning.primary": WARNING_PRIMARY_STYLES,
+	"warning.outline": WARNING_OUTLINE_STYLES,
+	"warning.outline-2": WARNING_OUTLINE_2_STYLES,
+	"warning.clear": WARNING_CLEAR_STYLES,
+	"warning.link": WARNING_LINK_STYLES,
+	"warning.item": WARNING_ITEM_STYLES,
+	"warning.card": WARNING_CARD_STYLES,
+	"note.primary": NOTE_PRIMARY_STYLES,
+	"note.outline": NOTE_OUTLINE_STYLES,
+	"note.outline-2": NOTE_OUTLINE_2_STYLES,
+	"note.clear": NOTE_CLEAR_STYLES,
+	"note.link": NOTE_LINK_STYLES,
+	"note.item": NOTE_ITEM_STYLES,
+	"note.card": NOTE_CARD_STYLES,
+	"special.primary": SPECIAL_PRIMARY_STYLES,
+	"special.outline": SPECIAL_OUTLINE_STYLES,
+	"special.clear": SPECIAL_CLEAR_STYLES,
+	"special.link": SPECIAL_LINK_STYLES,
+	"special.item": SPECIAL_ITEM_STYLES
+};
+function resolveItemVariant(theme, type) {
+	const effectiveType = theme === "special" && type === "outline-2" ? "outline" : type;
+	return `${effectiveType === "header" ? "default" : theme}.${effectiveType === "header" ? "item" : effectiveType}`;
+}
+const ACTIONS_COLOR_OVERRIDES = { "current.primary": {
+	"": "#current-fill",
+	disabled: "#current-fill.5"
+} };
+const ITEM_RESTING_COLOR_VARIANTS = Object.fromEntries(Object.entries(ITEM_VARIANTS).map(([variant, styles]) => {
+	const color = styles.color;
+	if (!color || typeof color !== "object") return [variant, { color }];
+	const map = ACTIONS_COLOR_OVERRIDES[variant] ?? color;
+	const disabled = map.disabled ?? map["disabled & !inherit-disabled & !inside-wrapper"];
+	return [variant, { color: disabled ? {
+		"": map[""],
+		disabled
+	} : map[""] }];
+}));
 
 //#endregion
-export { CURRENT_BUTTON_STYLES, CURRENT_ITEM_STYLES, DANGER_CARD_STYLES, DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_OUTLINE_2_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CARD_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_OUTLINE_2_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CARD_STYLES, NOTE_CLEAR_STYLES, NOTE_ITEM_STYLES, NOTE_LINK_STYLES, NOTE_OUTLINE_2_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CARD_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_ITEM_STYLES, SUCCESS_LINK_STYLES, SUCCESS_OUTLINE_2_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CARD_STYLES, WARNING_CLEAR_STYLES, WARNING_ITEM_STYLES, WARNING_LINK_STYLES, WARNING_OUTLINE_2_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES };
+export { CURRENT_CLEAR_STYLES, CURRENT_LINK_STYLES, CURRENT_OUTLINE_2_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_LINK_STYLES, DANGER_OUTLINE_2_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_LINK_STYLES, DEFAULT_OUTLINE_2_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, ITEM_RESTING_COLOR_VARIANTS, ITEM_VARIANTS, NOTE_CLEAR_STYLES, NOTE_LINK_STYLES, NOTE_OUTLINE_2_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_LINK_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_LINK_STYLES, SUCCESS_OUTLINE_2_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_LINK_STYLES, WARNING_OUTLINE_2_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, resolveItemVariant };
 //# sourceMappingURL=item-themes.js.map