@cube-dev/ui-kit 0.205.0 → 0.206.1

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.205.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.1 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
@@ -82,13 +82,13 @@ const DEFAULT_OUTLINE_STYLES = mergeStyles({
 	},
 	fill: {
 		"": "#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",
+		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: "#disabled-surface",
-		"selected & disabled": "#primary-accent-surface 9%, #surface-2"
+		"selected & disabled": "#surface-2+#primary-accent-surface.09"
 	},
 	color: {
 		"": "#surface-text-soft",
@@ -102,13 +102,13 @@ const DEFAULT_OUTLINE_STYLES = mergeStyles({
 }, VALIDATION_STYLES);
 const DEFAULT_OUTLINE_2_STYLES = mergeStyles(DEFAULT_OUTLINE_STYLES, { fill: {
 	"": "#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",
+	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: "#disabled-surface",
-	"selected & disabled": "#primary-accent-surface 9%, #surface-3"
+	"selected & disabled": "#surface-3+#primary-accent-surface.09"
 } });
 const DEFAULT_CLEAR_STYLES = mergeStyles({
 	outline: {
@@ -199,13 +199,13 @@ const DANGER_OUTLINE_STYLES = {
 	},
 	fill: {
 		"": "#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",
+		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: "#disabled-surface",
-		"selected & disabled": "#danger-accent-surface 9%, #surface-2"
+		"selected & disabled": "#surface-2+#danger-accent-surface.09"
 	},
 	color: {
 		"": "#danger-accent-text-soft",
@@ -216,13 +216,13 @@ const DANGER_OUTLINE_STYLES = {
 };
 const DANGER_OUTLINE_2_STYLES = mergeStyles(DANGER_OUTLINE_STYLES, { fill: {
 	"": "#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",
+	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: "#disabled-surface",
-	"selected & disabled": "#danger-accent-surface 9%, #surface-3"
+	"selected & disabled": "#surface-3+#danger-accent-surface.09"
 } });
 const DANGER_CLEAR_STYLES = {
 	outline: {
@@ -309,13 +309,13 @@ const SUCCESS_OUTLINE_STYLES = {
 	},
 	fill: {
 		"": "#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",
+		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: "#disabled-surface",
-		"selected & disabled": "#success-accent-surface 9%, #surface-2"
+		"selected & disabled": "#surface-2+#success-accent-surface.09"
 	},
 	color: {
 		"": "#success-accent-text-soft",
@@ -326,13 +326,13 @@ const SUCCESS_OUTLINE_STYLES = {
 };
 const SUCCESS_OUTLINE_2_STYLES = mergeStyles(SUCCESS_OUTLINE_STYLES, { fill: {
 	"": "#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",
+	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: "#disabled-surface",
-	"selected & disabled": "#success-accent-surface 9%, #surface-3"
+	"selected & disabled": "#surface-3+#success-accent-surface.09"
 } });
 const SUCCESS_CLEAR_STYLES = {
 	outline: {
@@ -419,13 +419,13 @@ const WARNING_OUTLINE_STYLES = {
 	},
 	fill: {
 		"": "#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",
+		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: "#disabled-surface",
-		"selected & disabled": "#warning-accent-surface 9%, #surface-2"
+		"selected & disabled": "#surface-2+#warning-accent-surface.09"
 	},
 	color: {
 		"": "#warning-accent-text-soft",
@@ -436,13 +436,13 @@ const WARNING_OUTLINE_STYLES = {
 };
 const WARNING_OUTLINE_2_STYLES = mergeStyles(WARNING_OUTLINE_STYLES, { fill: {
 	"": "#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",
+	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: "#disabled-surface",
-	"selected & disabled": "#warning-accent-surface 9%, #surface-3"
+	"selected & disabled": "#surface-3+#warning-accent-surface.09"
 } });
 const WARNING_CLEAR_STYLES = {
 	outline: {
@@ -529,13 +529,13 @@ const NOTE_OUTLINE_STYLES = {
 	},
 	fill: {
 		"": "#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",
+		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: "#disabled-surface",
-		"selected & disabled": "#note-accent-surface 9%, #surface-2"
+		"selected & disabled": "#surface-2+#note-accent-surface.09"
 	},
 	color: {
 		"": "#note-accent-text-soft",
@@ -546,13 +546,13 @@ const NOTE_OUTLINE_STYLES = {
 };
 const NOTE_OUTLINE_2_STYLES = mergeStyles(NOTE_OUTLINE_STYLES, { fill: {
 	"": "#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",
+	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: "#disabled-surface",
-	"selected & disabled": "#note-accent-surface 9%, #surface-3"
+	"selected & disabled": "#surface-3+#note-accent-surface.09"
 } });
 const NOTE_CLEAR_STYLES = {
 	outline: {
@@ -639,13 +639,13 @@ const SPECIAL_OUTLINE_STYLES = mergeStyles({
 	},
 	fill: {
 		"": "#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"
+		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"
 	},
 	color: {
 		"": "#white.8",
@@ -802,8 +802,8 @@ const CURRENT_PRIMARY_STYLES = mergeStyles(CURRENT_FOCUS_RING, {
 	},
 	fill: {
 		"": "#current",
-		"(hovered | focused) & !disabled": "#black 8%, #current",
-		pressed: "#black 16%, #current"
+		"(hovered | focused) & !disabled": "#current+#black.08",
+		pressed: "#current+#black.16"
 	},
 	color: {
 		"": "#current",