@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
@@ -60,10 +60,10 @@ const DEFAULT_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#surface #primary-accent-surface",
-		hovered: "#surface #primary-accent-surface-2",
-		pressed: "#surface #primary-accent-surface-3",
-		disabled: "#surface #primary-accent-disabled-surface"
+		"": "#primary-accent-surface",
+		hovered: "#primary-accent-surface-2",
+		pressed: "#primary-accent-surface-3",
+		disabled: "#primary-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -81,14 +81,14 @@ const DEFAULT_OUTLINE_STYLES = mergeStyles({
 		disabled: "#border"
 	},
 	fill: {
-		"": "#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",
-		"selected & disabled": "#surface-2 #primary-accent-surface.09"
+		"": "#surface-2",
+		hovered: "#surface-text 3%, #surface-2",
+		pressed: "#surface-text 9%, #surface-2",
+		selected: "#primary-accent-surface 9%, #surface-2",
+		"selected & (hovered | focused)": "#primary-accent-surface 12%, #surface-2",
+		"selected & pressed": "#primary-accent-surface 18%, #surface-2",
+		disabled: "#disabled-surface",
+		"selected & disabled": "#primary-accent-surface 9%, #surface-2"
 	},
 	color: {
 		"": "#surface-text-soft",
@@ -101,14 +101,14 @@ const DEFAULT_OUTLINE_STYLES = mergeStyles({
 	}
 }, 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"
+	"": "#surface-3",
+	hovered: "#surface-text 3%, #surface-3",
+	pressed: "#surface-text 9%, #surface-3",
+	selected: "#primary-accent-surface 9%, #surface-3",
+	"selected & (hovered | focused)": "#primary-accent-surface 12%, #surface-3",
+	"selected & pressed": "#primary-accent-surface 15%, #surface-3",
+	disabled: "#disabled-surface",
+	"selected & disabled": "#primary-accent-surface 9%, #surface-3"
 } });
 const DEFAULT_CLEAR_STYLES = mergeStyles({
 	outline: {
@@ -178,10 +178,10 @@ const DANGER_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#surface #danger-accent-surface",
-		hovered: "#surface #danger-accent-surface-2",
-		pressed: "#surface #danger-accent-surface-3",
-		disabled: "#surface #danger-accent-disabled-surface"
+		"": "#danger-accent-surface",
+		hovered: "#danger-accent-surface-2",
+		pressed: "#danger-accent-surface-3",
+		disabled: "#danger-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -198,14 +198,14 @@ const DANGER_OUTLINE_STYLES = {
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #danger-accent-surface.0",
-		hovered: "#surface-2 #danger-accent-surface.03",
-		pressed: "#surface-2 #danger-accent-surface.09",
-		selected: "#surface-2 #danger-accent-surface.09",
-		"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-surface.09"
+		"": "#surface-2",
+		hovered: "#danger-accent-surface 3%, #surface-2",
+		pressed: "#danger-accent-surface 9%, #surface-2",
+		selected: "#danger-accent-surface 9%, #surface-2",
+		"selected & (hovered | focused)": "#danger-accent-surface 12%, #surface-2",
+		"selected & pressed": "#danger-accent-surface 18%, #surface-2",
+		disabled: "#disabled-surface",
+		"selected & disabled": "#danger-accent-surface 9%, #surface-2"
 	},
 	color: {
 		"": "#danger-accent-text-soft",
@@ -215,14 +215,14 @@ const DANGER_OUTLINE_STYLES = {
 	}
 };
 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"
+	"": "#surface-3",
+	hovered: "#danger-accent-surface 3%, #surface-3",
+	pressed: "#danger-accent-surface 9%, #surface-3",
+	selected: "#danger-accent-surface 9%, #surface-3",
+	"selected & (hovered | focused)": "#danger-accent-surface 12%, #surface-3",
+	"selected & pressed": "#danger-accent-surface 18%, #surface-3",
+	disabled: "#disabled-surface",
+	"selected & disabled": "#danger-accent-surface 9%, #surface-3"
 } });
 const DANGER_CLEAR_STYLES = {
 	outline: {
@@ -288,10 +288,10 @@ const SUCCESS_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#surface #success-accent-surface",
-		hovered: "#surface #success-accent-surface-2",
-		pressed: "#surface #success-accent-surface-3",
-		disabled: "#surface #success-accent-disabled-surface"
+		"": "#success-accent-surface",
+		hovered: "#success-accent-surface-2",
+		pressed: "#success-accent-surface-3",
+		disabled: "#success-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -308,14 +308,14 @@ const SUCCESS_OUTLINE_STYLES = {
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #success-accent-surface.0",
-		hovered: "#surface-2 #success-accent-surface.03",
-		pressed: "#surface-2 #success-accent-surface.09",
-		selected: "#surface-2 #success-accent-surface.09",
-		"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-surface.09"
+		"": "#surface-2",
+		hovered: "#success-accent-surface 3%, #surface-2",
+		pressed: "#success-accent-surface 9%, #surface-2",
+		selected: "#success-accent-surface 9%, #surface-2",
+		"selected & (hovered | focused)": "#success-accent-surface 12%, #surface-2",
+		"selected & pressed": "#success-accent-surface 18%, #surface-2",
+		disabled: "#disabled-surface",
+		"selected & disabled": "#success-accent-surface 9%, #surface-2"
 	},
 	color: {
 		"": "#success-accent-text-soft",
@@ -325,14 +325,14 @@ const SUCCESS_OUTLINE_STYLES = {
 	}
 };
 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"
+	"": "#surface-3",
+	hovered: "#success-accent-surface 3%, #surface-3",
+	pressed: "#success-accent-surface 9%, #surface-3",
+	selected: "#success-accent-surface 9%, #surface-3",
+	"selected & (hovered | focused)": "#success-accent-surface 12%, #surface-3",
+	"selected & pressed": "#success-accent-surface 18%, #surface-3",
+	disabled: "#disabled-surface",
+	"selected & disabled": "#success-accent-surface 9%, #surface-3"
 } });
 const SUCCESS_CLEAR_STYLES = {
 	outline: {
@@ -398,10 +398,10 @@ const WARNING_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#surface #warning-accent-surface",
-		hovered: "#surface #warning-accent-surface-2",
-		pressed: "#surface #warning-accent-surface-3",
-		disabled: "#surface #warning-accent-disabled-surface"
+		"": "#warning-accent-surface",
+		hovered: "#warning-accent-surface-2",
+		pressed: "#warning-accent-surface-3",
+		disabled: "#warning-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -418,14 +418,14 @@ const WARNING_OUTLINE_STYLES = {
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #warning-accent-surface.0",
-		hovered: "#surface-2 #warning-accent-surface.03",
-		pressed: "#surface-2 #warning-accent-surface.09",
-		selected: "#surface-2 #warning-accent-surface.09",
-		"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-surface.09"
+		"": "#surface-2",
+		hovered: "#warning-accent-surface 3%, #surface-2",
+		pressed: "#warning-accent-surface 9%, #surface-2",
+		selected: "#warning-accent-surface 9%, #surface-2",
+		"selected & (hovered | focused)": "#warning-accent-surface 12%, #surface-2",
+		"selected & pressed": "#warning-accent-surface 18%, #surface-2",
+		disabled: "#disabled-surface",
+		"selected & disabled": "#warning-accent-surface 9%, #surface-2"
 	},
 	color: {
 		"": "#warning-accent-text-soft",
@@ -435,14 +435,14 @@ const WARNING_OUTLINE_STYLES = {
 	}
 };
 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"
+	"": "#surface-3",
+	hovered: "#warning-accent-surface 3%, #surface-3",
+	pressed: "#warning-accent-surface 9%, #surface-3",
+	selected: "#warning-accent-surface 9%, #surface-3",
+	"selected & (hovered | focused)": "#warning-accent-surface 12%, #surface-3",
+	"selected & pressed": "#warning-accent-surface 18%, #surface-3",
+	disabled: "#disabled-surface",
+	"selected & disabled": "#warning-accent-surface 9%, #surface-3"
 } });
 const WARNING_CLEAR_STYLES = {
 	outline: {
@@ -508,10 +508,10 @@ const NOTE_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#surface #note-accent-surface",
-		hovered: "#surface #note-accent-surface-2",
-		pressed: "#surface #note-accent-surface-3",
-		disabled: "#surface #note-accent-disabled-surface"
+		"": "#note-accent-surface",
+		hovered: "#note-accent-surface-2",
+		pressed: "#note-accent-surface-3",
+		disabled: "#note-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -528,14 +528,14 @@ const NOTE_OUTLINE_STYLES = {
 		disabled: "#border"
 	},
 	fill: {
-		"": "#surface-2 #note-accent-surface.0",
-		hovered: "#surface-2 #note-accent-surface.03",
-		pressed: "#surface-2 #note-accent-surface.09",
-		selected: "#surface-2 #note-accent-surface.09",
-		"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-surface.09"
+		"": "#surface-2",
+		hovered: "#note-accent-surface 3%, #surface-2",
+		pressed: "#note-accent-surface 9%, #surface-2",
+		selected: "#note-accent-surface 9%, #surface-2",
+		"selected & (hovered | focused)": "#note-accent-surface 12%, #surface-2",
+		"selected & pressed": "#note-accent-surface 18%, #surface-2",
+		disabled: "#disabled-surface",
+		"selected & disabled": "#note-accent-surface 9%, #surface-2"
 	},
 	color: {
 		"": "#note-accent-text-soft",
@@ -545,14 +545,14 @@ const NOTE_OUTLINE_STYLES = {
 	}
 };
 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"
+	"": "#surface-3",
+	hovered: "#note-accent-surface 3%, #surface-3",
+	pressed: "#note-accent-surface 9%, #surface-3",
+	selected: "#note-accent-surface 9%, #surface-3",
+	"selected & (hovered | focused)": "#note-accent-surface 12%, #surface-3",
+	"selected & pressed": "#note-accent-surface 18%, #surface-3",
+	disabled: "#disabled-surface",
+	"selected & disabled": "#note-accent-surface 9%, #surface-3"
 } });
 const NOTE_CLEAR_STYLES = {
 	outline: {
@@ -618,10 +618,10 @@ const SPECIAL_PRIMARY_STYLES = {
 		disabled: "#clear"
 	},
 	fill: {
-		"": "#white #special-accent-surface",
-		hovered: "#white #special-accent-surface-2",
-		pressed: "#white #special-accent-surface-3",
-		disabled: "#white #special-accent-disabled-surface"
+		"": "#special-accent-surface",
+		hovered: "#special-accent-surface-2",
+		pressed: "#special-accent-surface-3",
+		disabled: "#special-accent-disabled-surface"
 	},
 	color: {
 		"": "#white",
@@ -638,14 +638,14 @@ const SPECIAL_OUTLINE_STYLES = mergeStyles({
 		selected: "#white.2"
 	},
 	fill: {
-		"": "#special-surface #white.0",
-		hovered: "#special-surface #white.06",
-		pressed: "#special-surface #white.12",
-		selected: "#special-surface #white.18",
-		"selected & (hovered | focused)": "#special-surface #white.24",
-		"selected & pressed": "#special-surface #white.3",
-		disabled: "#special-surface #white.04",
-		"selected & disabled": "#special-surface #white.18"
+		"": "#special-surface",
+		hovered: "#white 6%, #special-surface",
+		pressed: "#white 12%, #special-surface",
+		selected: "#white 18%, #special-surface",
+		"selected & (hovered | focused)": "#white 24%, #special-surface",
+		"selected & pressed": "#white 30%, #special-surface",
+		disabled: "#white 4%, #special-surface",
+		"selected & disabled": "#white 18%, #special-surface"
 	},
 	color: {
 		"": "#white.8",
@@ -801,9 +801,9 @@ const CURRENT_PRIMARY_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 		disabled: "#surface-text.2"
 	},
 	fill: {
-		"": "#current #black.0",
-		"(hovered | focused) & !disabled": "#current #black.08",
-		pressed: "#current #black.16"
+		"": "#current",
+		"(hovered | focused) & !disabled": "#black 8%, #current",
+		pressed: "#black 16%, #current"
 	},
 	color: {
 		"": "#current",