@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/data/item-themes.js

@@ -0,0 +1,816 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/data/item-themes.ts
+const VALIDATION_STYLES = { border: {
+	invalid: "#danger-text",
+	valid: "#success-text"
+} };
+const ITEM_ACTION_BASE_STYLES = {
+	display: "inline-grid",
+	flow: "column",
+	placeItems: "center",
+	placeContent: "center",
+	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",
+		":last-child & :first-child": "0 $side-padding",
+		context: "0"
+	},
+	padding: 0,
+	radius: "(1r - 1bw)",
+	transition: "theme",
+	flexShrink: 0,
+	textDecoration: "none",
+	boxSizing: "border-box",
+	whiteSpace: "nowrap",
+	border: 0,
+	height: "$action-size",
+	width: {
+		"": "$action-size",
+		"has-label": "auto"
+	},
+	placeSelf: "center",
+	"$side-padding": "(($size - $action-size - 2bw) / 2)",
+	"$action-size": "min(max((2x + 2bw), (($size, $size-md) - 1x - 2bw)), (3x - 2bw))",
+	Icon: {
+		$: ">",
+		display: "grid",
+		placeItems: "center",
+		height: "($action-size - 2bw) ($action-size - 2bw)",
+		width: "($action-size - 2bw) ($action-size - 2bw)",
+		opacity: {
+			"": 1,
+			"checkbox & selected": 1,
+			"checkbox & !selected": 0,
+			"checkbox & !selected & hovered": .4
+		}
+	}
+};
+const DEFAULT_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #primary-text.0",
+		focused: "1bw #primary-text"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#primary-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #primary",
+		hovered: "#white #primary-text",
+		pressed: "#white #primary",
+		disabled: "#white #primary-disabled"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white"
+	}
+};
+const DEFAULT_SECONDARY_STYLES = {
+	border: {
+		"": "#primary.15",
+		pressed: "#primary.3",
+		focused: "#primary-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#primary.10",
+		hovered: "#primary.16",
+		pressed: "#primary-text.10",
+		disabled: "#dark.04"
+	},
+	color: {
+		"": "#primary",
+		disabled: "#dark-04"
+	}
+};
+const DEFAULT_OUTLINE_STYLES = {
+	border: {
+		"": true,
+		focused: "#primary-text",
+		disabled: true,
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#white #dark.0",
+		hovered: "#white #dark.03",
+		selected: "#white #dark.09",
+		"selected & hovered": "#white #dark.12",
+		pressed: "#white #dark.09",
+		disabled: "#white #dark.04"
+	},
+	color: {
+		"": "#dark-02",
+		hovered: "#dark-02",
+		"pressed | (selected & !hovered)": "#dark",
+		disabled: "#dark-04"
+	}
+};
+const DEFAULT_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#primary-text",
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#dark.0",
+		hovered: "#dark.03",
+		selected: "#dark.09",
+		"selected & hovered": "#dark.12",
+		pressed: "#dark.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#dark-02",
+		hovered: "#dark-02",
+		pressed: "#dark",
+		disabled: "#dark-04"
+	}
+};
+const DEFAULT_CLEAR_STYLES = {
+	border: {
+		"": "#clear",
+		pressed: "#primary-text.10",
+		focused: "#primary-text",
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#primary.0",
+		hovered: "#primary.16",
+		"pressed | (selected & !hovered)": "#primary.10"
+	},
+	color: {
+		"": "#primary-text",
+		disabled: "#dark-04"
+	}
+};
+const DEFAULT_LINK_STYLES = {
+	outline: {
+		"": "0 #primary-text.0",
+		focused: "1bw #primary-text"
+	},
+	border: "0",
+	fill: { "": "#clear" },
+	color: {
+		"": "#primary-text",
+		"hovered & !pressed": "#primary",
+		disabled: "#dark-04"
+	}
+};
+const DEFAULT_ITEM_STYLES = {
+	border: "#clear",
+	fill: {
+		"": "#dark.0",
+		"hovered | focused": "#dark.03",
+		selected: "#dark.09",
+		"selected & (hovered | focused)": "#dark.12",
+		pressed: "#dark.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#dark-02",
+		hovered: "#dark-02",
+		pressed: "#dark",
+		disabled: "#dark-04"
+	}
+};
+const DANGER_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #danger-text.0",
+		focused: "1bw #danger-text"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#danger-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #danger",
+		hovered: "#white #danger-text",
+		pressed: "#white #danger",
+		disabled: "#danger-desaturated.6"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.6"
+	}
+};
+const DANGER_SECONDARY_STYLES = {
+	border: {
+		"": "#danger.15",
+		pressed: "#danger.3",
+		focused: "#danger-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#danger.05",
+		"hovered & !pressed": "#danger.1",
+		disabled: "#dark.04"
+	},
+	color: {
+		"": "#danger",
+		disabled: "#dark-04"
+	}
+};
+const DANGER_OUTLINE_STYLES = {
+	border: {
+		"": "#danger.15",
+		pressed: "#danger.3",
+		focused: "#danger-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#white #danger.0",
+		hovered: "#white #danger.1",
+		"pressed | (selected & !hovered)": "#white #danger.05",
+		disabled: "#white #dark.04"
+	},
+	color: {
+		"": "#danger-text",
+		disabled: "#dark-04"
+	}
+};
+const DANGER_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#danger-text"
+	},
+	fill: {
+		"": "#dark.0",
+		hovered: "#dark.04",
+		"pressed | (selected & !hovered)": "#dark.05"
+	},
+	color: {
+		"": "#dark-02",
+		"pressed | (selected & !hovered)": "#danger-text",
+		disabled: "#dark-04"
+	}
+};
+const DANGER_CLEAR_STYLES = {
+	border: {
+		"": "#clear",
+		pressed: "#danger.05",
+		focused: "#danger-text"
+	},
+	fill: {
+		"": "#danger-text.0",
+		hovered: "#danger-text.03",
+		selected: "#danger-text.09",
+		"selected & hovered": "#danger-text.12",
+		pressed: "#danger-text.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#danger-text",
+		hovered: "#danger-text",
+		pressed: "#danger-text",
+		disabled: "#danger-text.4"
+	}
+};
+const DANGER_LINK_STYLES = {
+	outline: {
+		"": "0 #danger-text.0",
+		focused: "1bw #danger-text"
+	},
+	border: 0,
+	fill: { "": "#clear" },
+	color: {
+		"": "#danger-text",
+		"hovered & !pressed": "#danger",
+		disabled: "#dark-04"
+	}
+};
+const DANGER_ITEM_STYLES = {
+	border: "#clear",
+	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"
+	},
+	color: {
+		"": "#danger-text",
+		hovered: "#danger-text",
+		pressed: "#danger-text",
+		disabled: "#danger-text.4"
+	}
+};
+const SUCCESS_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #success-text.0",
+		focused: "1bw #success-text"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#success-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #success",
+		hovered: "#white #success-text",
+		pressed: "#white #success",
+		disabled: "#success-desaturated.6"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.6"
+	}
+};
+const SUCCESS_SECONDARY_STYLES = {
+	border: {
+		"": "#success.15",
+		pressed: "#success.3",
+		focused: "#success-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#success.05",
+		"hovered & !pressed": "#success.1",
+		disabled: "#dark.04"
+	},
+	color: {
+		"": "#success",
+		disabled: "#dark-04"
+	}
+};
+const SUCCESS_OUTLINE_STYLES = {
+	border: {
+		"": "#success.15",
+		pressed: "#success.3",
+		focused: "#success-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#white #success.0",
+		hovered: "#white #success.1",
+		"pressed | (selected & !hovered)": "#white #success.05",
+		disabled: "#white #dark.04"
+	},
+	color: {
+		"": "#success-text",
+		disabled: "#dark-04"
+	}
+};
+const SUCCESS_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#success-text"
+	},
+	fill: {
+		"": "#dark.0",
+		hovered: "#dark.04",
+		"pressed | (selected & !hovered)": "#dark.05"
+	},
+	color: {
+		"": "#dark-02",
+		"pressed | (selected & !hovered)": "#success-text",
+		disabled: "#dark-04"
+	}
+};
+const SUCCESS_CLEAR_STYLES = {
+	border: {
+		"": "#clear",
+		pressed: "#success.05",
+		focused: "#success-text"
+	},
+	fill: {
+		"": "#success-text.0",
+		hovered: "#success-text.03",
+		selected: "#success-text.09",
+		"selected & hovered": "#success-text.12",
+		pressed: "#success-text.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#success-text",
+		hovered: "#success-text",
+		pressed: "#success-text",
+		disabled: "#success-text.4"
+	}
+};
+const SUCCESS_LINK_STYLES = {
+	outline: {
+		"": "0 #success-text.0",
+		focused: "1bw #success-text"
+	},
+	border: 0,
+	fill: { "": "#clear" },
+	color: {
+		"": "#success-text",
+		"hovered & !pressed": "#success",
+		disabled: "#dark-04"
+	}
+};
+const SUCCESS_ITEM_STYLES = {
+	border: "#clear",
+	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"
+	},
+	color: {
+		"": "#success-text",
+		hovered: "#success-text",
+		pressed: "#success-text",
+		disabled: "#success-text.4"
+	}
+};
+const WARNING_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #warning-text.0",
+		focused: "1bw #warning-text"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#warning-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #warning",
+		hovered: "#white #warning-text",
+		pressed: "#white #warning",
+		disabled: "#warning-desaturated.6"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.6"
+	}
+};
+const WARNING_SECONDARY_STYLES = {
+	border: {
+		"": "#warning.15",
+		pressed: "#warning.3",
+		focused: "#warning-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#warning.05",
+		"hovered & !pressed": "#warning.1",
+		disabled: "#dark.04"
+	},
+	color: {
+		"": "#warning-text",
+		disabled: "#dark-04"
+	}
+};
+const WARNING_OUTLINE_STYLES = {
+	border: {
+		"": "#warning.15",
+		pressed: "#warning.3",
+		focused: "#warning-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#white #warning.0",
+		hovered: "#white #warning.1",
+		"pressed | (selected & !hovered)": "#white #warning.05",
+		disabled: "#white #dark.04"
+	},
+	color: {
+		"": "#warning-text",
+		disabled: "#dark-04"
+	}
+};
+const WARNING_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#warning-text"
+	},
+	fill: {
+		"": "#dark.0",
+		hovered: "#dark.04",
+		"pressed | (selected & !hovered)": "#dark.05"
+	},
+	color: {
+		"": "#dark-02",
+		"pressed | (selected & !hovered)": "#warning-text",
+		disabled: "#dark-04"
+	}
+};
+const WARNING_CLEAR_STYLES = {
+	border: {
+		"": "#clear",
+		pressed: "#warning.05",
+		focused: "#warning-text"
+	},
+	fill: {
+		"": "#warning-text.0",
+		hovered: "#warning-text.03",
+		selected: "#warning-text.09",
+		"selected & hovered": "#warning-text.12",
+		pressed: "#warning-text.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#warning-text",
+		hovered: "#warning-text",
+		pressed: "#warning-text",
+		disabled: "#warning-text.4"
+	}
+};
+const WARNING_LINK_STYLES = {
+	outline: {
+		"": "0 #warning-text.0",
+		focused: "1bw #warning-text"
+	},
+	border: 0,
+	fill: { "": "#clear" },
+	color: {
+		"": "#warning-text",
+		"hovered & !pressed": "#warning",
+		disabled: "#dark-04"
+	}
+};
+const WARNING_ITEM_STYLES = {
+	border: "#clear",
+	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"
+	},
+	color: {
+		"": "#warning-text",
+		hovered: "#warning-text",
+		pressed: "#warning-text",
+		disabled: "#warning-text.4"
+	}
+};
+const NOTE_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #note-text.0",
+		focused: "1bw #note-text"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#note-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #note",
+		hovered: "#white #note-text",
+		pressed: "#white #note",
+		disabled: "#note-desaturated.6"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.6"
+	}
+};
+const NOTE_SECONDARY_STYLES = {
+	border: {
+		"": "#note.15",
+		pressed: "#note.3",
+		focused: "#note-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#note.05",
+		"hovered & !pressed": "#note.1",
+		disabled: "#dark.04"
+	},
+	color: {
+		"": "#note-text",
+		disabled: "#dark-04"
+	}
+};
+const NOTE_OUTLINE_STYLES = {
+	border: {
+		"": "#note.15",
+		pressed: "#note.3",
+		focused: "#note-text",
+		disabled: "#border"
+	},
+	fill: {
+		"": "#white #note.0",
+		hovered: "#white #note.1",
+		"pressed | (selected & !hovered)": "#white #note.05",
+		disabled: "#white #dark.04"
+	},
+	color: {
+		"": "#note-text",
+		disabled: "#dark-04"
+	}
+};
+const NOTE_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#note-text"
+	},
+	fill: {
+		"": "#dark.0",
+		hovered: "#dark.04",
+		"pressed | (selected & !hovered)": "#dark.05"
+	},
+	color: {
+		"": "#dark-02",
+		"pressed | (selected & !hovered)": "#note-text",
+		disabled: "#dark-04"
+	}
+};
+const NOTE_CLEAR_STYLES = {
+	border: {
+		"": "#clear",
+		pressed: "#note.05",
+		focused: "#note-text"
+	},
+	fill: {
+		"": "#note-text.0",
+		hovered: "#note-text.03",
+		selected: "#note-text.09",
+		"selected & hovered": "#note-text.12",
+		pressed: "#note-text.09",
+		disabled: "#clear"
+	},
+	color: {
+		"": "#note-text",
+		hovered: "#note-text",
+		pressed: "#note-text",
+		disabled: "#note-text.4"
+	}
+};
+const NOTE_LINK_STYLES = {
+	outline: {
+		"": "0 #note-text.0",
+		focused: "1bw #note-text"
+	},
+	border: 0,
+	fill: { "": "#clear" },
+	color: {
+		"": "#note-text",
+		"hovered & !pressed": "#note",
+		disabled: "#dark-04"
+	}
+};
+const NOTE_ITEM_STYLES = {
+	border: "#clear",
+	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"
+	},
+	color: {
+		"": "#note-text",
+		hovered: "#note-text",
+		pressed: "#note-text",
+		disabled: "#note-text.4"
+	}
+};
+const SPECIAL_PRIMARY_STYLES = {
+	outline: {
+		"": "0 #white.0",
+		focused: "1bw #white"
+	},
+	border: {
+		"": "#clear",
+		"pressed | focused": "#purple-text",
+		disabled: "#clear"
+	},
+	fill: {
+		"": "#white #primary",
+		hovered: "#white #primary-text",
+		pressed: "#white #primary",
+		disabled: "#primary-disabled.5"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_SECONDARY_STYLES = {
+	border: {
+		"": "#white.3",
+		pressed: "#white.4",
+		focused: "#white"
+	},
+	fill: {
+		"": "#white.12",
+		"hovered & !pressed": "#white.18",
+		disabled: "#white.12"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_OUTLINE_STYLES = {
+	border: {
+		"": "#white.3",
+		pressed: "#white.12",
+		focused: "#white",
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#dark #white.0",
+		hovered: "#dark #white.18",
+		"pressed | (selected & !hovered)": "#dark #white.12",
+		disabled: "#dark #white.12"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_NEUTRAL_STYLES = {
+	border: {
+		"": "#clear",
+		focused: "#white",
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#white.0",
+		hovered: "#white.12",
+		"pressed | (selected & !hovered)": "#white.18"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_CLEAR_STYLES = {
+	outline: { focused: "1bw #white" },
+	border: {
+		"": "#clear",
+		"pressed | focused": "#white",
+		disabled: "#white.3",
+		...VALIDATION_STYLES.border
+	},
+	fill: {
+		"": "#white",
+		"hovered & !pressed": "#white.94",
+		disabled: "#white.12"
+	},
+	color: {
+		"": "#primary-text",
+		hovered: "#primary",
+		"pressed & hovered": "#primary-text",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_LINK_STYLES = {
+	outline: {
+		"": "0 #white.0",
+		focused: "1bw #white"
+	},
+	border: "0",
+	fill: { "": "#clear" },
+	color: {
+		"": "#white",
+		"hovered & !pressed": "#white.9",
+		disabled: "#white.4"
+	}
+};
+const SPECIAL_ITEM_STYLES = {
+	border: "#clear",
+	fill: {
+		"": "#white.0",
+		hovered: "#white.12",
+		"pressed | (selected & !hovered)": "#white.18"
+	},
+	color: {
+		"": "#white",
+		disabled: "#white.4"
+	}
+};
+const DEFAULT_CARD_STYLES = {
+	border: "#dark.20",
+	fill: "#light",
+	color: "#dark-02"
+};
+const SUCCESS_CARD_STYLES = {
+	border: "#success.20",
+	fill: "#success-bg",
+	color: "#success-text"
+};
+const DANGER_CARD_STYLES = {
+	border: "#danger.20",
+	fill: "#danger-bg",
+	color: "#danger-text"
+};
+const WARNING_CARD_STYLES = {
+	border: "#warning.20",
+	fill: "#warning-bg",
+	color: "#warning-text"
+};
+const NOTE_CARD_STYLES = {
+	border: "#note.20",
+	fill: "#note-bg",
+	color: "#note-text"
+};
+
+//#endregion
+export { DANGER_CARD_STYLES, DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CARD_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CARD_STYLES, NOTE_CLEAR_STYLES, NOTE_ITEM_STYLES, NOTE_LINK_STYLES, NOTE_NEUTRAL_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, NOTE_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CARD_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_ITEM_STYLES, SUCCESS_LINK_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, WARNING_CARD_STYLES, WARNING_CLEAR_STYLES, WARNING_ITEM_STYLES, WARNING_LINK_STYLES, WARNING_NEUTRAL_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, WARNING_SECONDARY_STYLES };
+//# sourceMappingURL=item-themes.js.map