@cube-dev/ui-kit 0.137.1 → 0.138.0

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.137.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.138.0 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-text",
@@ -59,32 +59,31 @@ const DEFAULT_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #primary",
-		hovered: "#white #primary-text",
-		pressed: "#white #primary",
-		disabled: "#white #primary-disabled"
+		"": "#surface #primary",
+		hovered: "#surface #primary-hover",
+		pressed: "#surface #primary",
+		disabled: "#primary-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
-		disabled: "#white"
+		disabled: "#primary-accent-disabled-surface-text"
 	}
 };
 const DEFAULT_SECONDARY_STYLES = {
 	border: {
-		"": "#primary.15",
-		pressed: "#primary.3",
+		"": "#primary-text.15",
+		pressed: "#primary-text.3",
 		focused: "#primary-text",
 		disabled: "#border"
 	},
 	fill: {
 		"": "#primary.10",
-		hovered: "#primary.16",
-		pressed: "#primary-text.10",
-		disabled: "#dark.04"
+		"hovered & !pressed": "#primary.16",
+		disabled: "#disabled-surface"
 	},
 	color: {
-		"": "#primary",
-		disabled: "#dark-04"
+		"": "#primary-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_OUTLINE_STYLES = {
@@ -95,18 +94,18 @@ const DEFAULT_OUTLINE_STYLES = {
 		...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"
+		"": "#surface #dark.0",
+		hovered: "#surface #dark.03",
+		selected: "#surface #dark.09",
+		"selected & hovered": "#surface #dark.12",
+		pressed: "#surface #dark.09",
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#dark-02",
 		hovered: "#dark-02",
 		"pressed | (selected & !hovered)": "#dark",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_NEUTRAL_STYLES = {
@@ -127,7 +126,7 @@ const DEFAULT_NEUTRAL_STYLES = {
 		"": "#dark-02",
 		hovered: "#dark-02",
 		pressed: "#dark",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_CLEAR_STYLES = {
@@ -144,7 +143,7 @@ const DEFAULT_CLEAR_STYLES = {
 	},
 	color: {
 		"": "#primary-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_LINK_STYLES = {
@@ -155,9 +154,9 @@ const DEFAULT_LINK_STYLES = {
 	border: "0",
 	fill: { "": "#clear" },
 	color: {
-		"": "#primary-text",
-		"hovered & !pressed": "#primary",
-		disabled: "#dark-04"
+		"": "#primary-text-soft",
+		"hovered & !pressed": "#primary-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const DEFAULT_ITEM_STYLES = {
@@ -174,7 +173,7 @@ const DEFAULT_ITEM_STYLES = {
 		"": "#dark-02",
 		hovered: "#dark-02",
 		pressed: "#dark",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_PRIMARY_STYLES = {
@@ -188,49 +187,49 @@ const DANGER_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #danger",
-		hovered: "#white #danger-text",
-		pressed: "#white #danger",
-		disabled: "#danger-desaturated.6"
+		"": "#surface #danger",
+		hovered: "#surface #danger-hover",
+		pressed: "#surface #danger",
+		disabled: "#danger-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
-		disabled: "#white.6"
+		disabled: "#danger-accent-disabled-surface-text"
 	}
 };
 const DANGER_SECONDARY_STYLES = {
 	border: {
-		"": "#danger.15",
-		pressed: "#danger.3",
+		"": "#danger-text.15",
+		pressed: "#danger-text.3",
 		focused: "#danger-text",
 		disabled: "#border"
 	},
 	fill: {
 		"": "#danger.05",
 		"hovered & !pressed": "#danger.1",
-		disabled: "#dark.04"
+		disabled: "#disabled-surface"
 	},
 	color: {
-		"": "#danger",
-		disabled: "#dark-04"
+		"": "#danger-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_OUTLINE_STYLES = {
 	border: {
-		"": "#danger.15",
-		pressed: "#danger.3",
+		"": "#danger-text.15",
+		pressed: "#danger-text.3",
 		focused: "#danger-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#white #danger.0",
-		hovered: "#white #danger.1",
-		"pressed | (selected & !hovered)": "#white #danger.05",
-		disabled: "#white #dark.04"
+		"": "#surface #danger.0",
+		hovered: "#surface #danger.1",
+		"pressed | (selected & !hovered)": "#surface #danger.05",
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#danger-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_NEUTRAL_STYLES = {
@@ -246,7 +245,7 @@ const DANGER_NEUTRAL_STYLES = {
 	color: {
 		"": "#dark-02",
 		"pressed | (selected & !hovered)": "#danger-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_CLEAR_STYLES = {
@@ -278,9 +277,9 @@ const DANGER_LINK_STYLES = {
 	border: 0,
 	fill: { "": "#clear" },
 	color: {
-		"": "#danger-text",
-		"hovered & !pressed": "#danger",
-		disabled: "#dark-04"
+		"": "#danger-text-soft",
+		"hovered & !pressed": "#danger-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const DANGER_ITEM_STYLES = {
@@ -311,49 +310,49 @@ const SUCCESS_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #success",
-		hovered: "#white #success-text",
-		pressed: "#white #success",
-		disabled: "#success-desaturated.6"
+		"": "#surface #success",
+		hovered: "#surface #success-hover",
+		pressed: "#surface #success",
+		disabled: "#success-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
-		disabled: "#white.6"
+		disabled: "#success-accent-disabled-surface-text"
 	}
 };
 const SUCCESS_SECONDARY_STYLES = {
 	border: {
-		"": "#success.15",
-		pressed: "#success.3",
+		"": "#success-text.15",
+		pressed: "#success-text.3",
 		focused: "#success-text",
 		disabled: "#border"
 	},
 	fill: {
 		"": "#success.05",
 		"hovered & !pressed": "#success.1",
-		disabled: "#dark.04"
+		disabled: "#disabled-surface"
 	},
 	color: {
-		"": "#success",
-		disabled: "#dark-04"
+		"": "#success-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_OUTLINE_STYLES = {
 	border: {
-		"": "#success.15",
-		pressed: "#success.3",
+		"": "#success-text.15",
+		pressed: "#success-text.3",
 		focused: "#success-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#white #success.0",
-		hovered: "#white #success.1",
-		"pressed | (selected & !hovered)": "#white #success.05",
-		disabled: "#white #dark.04"
+		"": "#surface #success.0",
+		hovered: "#surface #success.1",
+		"pressed | (selected & !hovered)": "#surface #success.05",
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#success-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_NEUTRAL_STYLES = {
@@ -369,7 +368,7 @@ const SUCCESS_NEUTRAL_STYLES = {
 	color: {
 		"": "#dark-02",
 		"pressed | (selected & !hovered)": "#success-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_CLEAR_STYLES = {
@@ -401,9 +400,9 @@ const SUCCESS_LINK_STYLES = {
 	border: 0,
 	fill: { "": "#clear" },
 	color: {
-		"": "#success-text",
-		"hovered & !pressed": "#success",
-		disabled: "#dark-04"
+		"": "#success-text-soft",
+		"hovered & !pressed": "#success-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const SUCCESS_ITEM_STYLES = {
@@ -434,49 +433,49 @@ const WARNING_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #warning",
-		hovered: "#white #warning-text",
-		pressed: "#white #warning",
-		disabled: "#warning-desaturated.6"
+		"": "#surface #warning",
+		hovered: "#surface #warning-hover",
+		pressed: "#surface #warning",
+		disabled: "#warning-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
-		disabled: "#white.6"
+		disabled: "#warning-accent-disabled-surface-text"
 	}
 };
 const WARNING_SECONDARY_STYLES = {
 	border: {
-		"": "#warning.15",
-		pressed: "#warning.3",
+		"": "#warning-text.15",
+		pressed: "#warning-text.3",
 		focused: "#warning-text",
 		disabled: "#border"
 	},
 	fill: {
 		"": "#warning.05",
 		"hovered & !pressed": "#warning.1",
-		disabled: "#dark.04"
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#warning-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_OUTLINE_STYLES = {
 	border: {
-		"": "#warning.15",
-		pressed: "#warning.3",
+		"": "#warning-text.15",
+		pressed: "#warning-text.3",
 		focused: "#warning-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#white #warning.0",
-		hovered: "#white #warning.1",
-		"pressed | (selected & !hovered)": "#white #warning.05",
-		disabled: "#white #dark.04"
+		"": "#surface #warning.0",
+		hovered: "#surface #warning.1",
+		"pressed | (selected & !hovered)": "#surface #warning.05",
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#warning-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_NEUTRAL_STYLES = {
@@ -492,7 +491,7 @@ const WARNING_NEUTRAL_STYLES = {
 	color: {
 		"": "#dark-02",
 		"pressed | (selected & !hovered)": "#warning-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_CLEAR_STYLES = {
@@ -524,9 +523,9 @@ const WARNING_LINK_STYLES = {
 	border: 0,
 	fill: { "": "#clear" },
 	color: {
-		"": "#warning-text",
-		"hovered & !pressed": "#warning",
-		disabled: "#dark-04"
+		"": "#warning-text-soft",
+		"hovered & !pressed": "#warning-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const WARNING_ITEM_STYLES = {
@@ -557,49 +556,49 @@ const NOTE_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #note",
-		hovered: "#white #note-text",
-		pressed: "#white #note",
-		disabled: "#note-desaturated.6"
+		"": "#surface #note",
+		hovered: "#surface #note-hover",
+		pressed: "#surface #note",
+		disabled: "#note-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
-		disabled: "#white.6"
+		disabled: "#note-accent-disabled-surface-text"
 	}
 };
 const NOTE_SECONDARY_STYLES = {
 	border: {
-		"": "#note.15",
-		pressed: "#note.3",
+		"": "#note-text.15",
+		pressed: "#note-text.3",
 		focused: "#note-text",
 		disabled: "#border"
 	},
 	fill: {
 		"": "#note.05",
 		"hovered & !pressed": "#note.1",
-		disabled: "#dark.04"
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#note-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_OUTLINE_STYLES = {
 	border: {
-		"": "#note.15",
-		pressed: "#note.3",
+		"": "#note-text.15",
+		pressed: "#note-text.3",
 		focused: "#note-text",
 		disabled: "#border"
 	},
 	fill: {
-		"": "#white #note.0",
-		hovered: "#white #note.1",
-		"pressed | (selected & !hovered)": "#white #note.05",
-		disabled: "#white #dark.04"
+		"": "#surface #note.0",
+		hovered: "#surface #note.1",
+		"pressed | (selected & !hovered)": "#surface #note.05",
+		disabled: "#disabled-surface"
 	},
 	color: {
 		"": "#note-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_NEUTRAL_STYLES = {
@@ -615,7 +614,7 @@ const NOTE_NEUTRAL_STYLES = {
 	color: {
 		"": "#dark-02",
 		"pressed | (selected & !hovered)": "#note-text",
-		disabled: "#dark-04"
+		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_CLEAR_STYLES = {
@@ -647,9 +646,9 @@ const NOTE_LINK_STYLES = {
 	border: 0,
 	fill: { "": "#clear" },
 	color: {
-		"": "#note-text",
-		"hovered & !pressed": "#note",
-		disabled: "#dark-04"
+		"": "#note-text-soft",
+		"hovered & !pressed": "#note-text",
+		disabled: "#disabled-surface-text"
 	}
 };
 const NOTE_ITEM_STYLES = {
@@ -681,7 +680,7 @@ const SPECIAL_PRIMARY_STYLES = {
 	},
 	fill: {
 		"": "#white #primary",
-		hovered: "#white #primary-text",
+		hovered: "#white #primary-hover",
 		pressed: "#white #primary",
 		disabled: "#primary-disabled.5"
 	},
@@ -714,10 +713,10 @@ const SPECIAL_OUTLINE_STYLES = {
 		...VALIDATION_STYLES.border
 	},
 	fill: {
-		"": "#dark #white.0",
-		hovered: "#dark #white.18",
-		"pressed | (selected & !hovered)": "#dark #white.12",
-		disabled: "#dark #white.12"
+		"": "#fixed-dark #white.0",
+		hovered: "#fixed-dark #white.18",
+		"pressed | (selected & !hovered)": "#fixed-dark #white.12",
+		disabled: "#fixed-dark #white.12"
 	},
 	color: {
 		"": "#white",
@@ -754,9 +753,9 @@ const SPECIAL_CLEAR_STYLES = {
 		disabled: "#white.12"
 	},
 	color: {
-		"": "#primary-text",
+		"": "#fixed-primary-text",
 		hovered: "#primary",
-		"pressed & hovered": "#primary-text",
+		"pressed & hovered": "#fixed-primary-text",
 		disabled: "#white.4"
 	}
 };