[BUG] - Color picker

[marijang]

Hey,

gardient color picker still not works also i have colors in manifest like grey50,grey100, grey200...900 and i put them into wrapper manifest but also that not works

[goranalkovic-infinum]

Hi Marijan,

please provide some more details:

• Which version of Libs you're using?
• Please copy-paste the global manifest and the Wrapper manifest

[marijang]

`{ "$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/globalManifest.json", "namespace": "eightshift-boilerplate", "background": "#FBF9FF", "foreground": "#9973E3", "config": { "outputCssGlobally": true, "outputCssOptimize": true, "outputCssSelectorName": "esCssVariables", "outputCssGloballyAdditionalStyles": [ ":root {--es-loader-opacity: 1;}" ], "useRemBaseSize": false, "useWrapper": true, "experiments": { "wrapperDragNDropEditing": false } },

"globalVariables": {
	"customBlocksName": "eightshift-block",
	"maxCols": 12,
	"baseFont": "'Barlow'",
	"mainContentWidth": 12,
	"zIndex": {
		"header": 100,
		"drawer": 99,
		"overlay": 98
	},
	"breakpoints": {
		"mobile": 480,
		"tablet": 1200,
		"desktop": 1600,
		"large": 2400
	},
	"grid": {
		"gutter": "1vw",
		"sidePadding": "6.75vw"
	},
	"grid-site-padding": "6.75vw",
	"grid-gutter": "2.78vw",
	"containers": {
		"default": "66rem",
		"wide": "100rem",
		"default-old": "66rem",
		"regular": "80rem",
		"small": "56rem",
		"smaller": "46rem",
		"tiny": "36rem"
	},
	"easing":{
		"ease-motion": "cubic-bezier(0.66, 0.19, 0.29, 0.79)",
		"long-slow-down": "cubic-bezier(0.13, 0.63, 0.4, 0.97)",
		"slow-down": "cubic-bezier(0.25, 0.49, 0.31, 1.00)",
		"ease-in-out": "cubic-bezier(0.55, 0, 0.45, 1)",
		"expressive-in-out": "cubic-bezier(0.76, 0.09, 0.03, 0.96)",
		"fly-in":"cubic-bezier(0.08, 0.69, 0.07, 1)",
		"fly-out":"cubic-bezier(0.54, 0.01, 0.99, 0.26)"
	},
	"gutters": {
		"none": "0",
		"default": "1.25rem",
		"regular": "1.25rem",
		"big": "2.5rem",
		"large": "5rem",
		"larger": "7.5rem"
	},
	"sectionSpacing": {
		"min":  -300,
		"max":  300,
		"step": 10
	},
	"sectionInSpacing": {
		"min":  0,
		"max":  300,
		"step": 10
	},
	"button":{
		"border-radius": "0px"
	},
	"header":{
		"backgroundColor": "#fff",
		"linkColor": "var(--global-colors-black)",
		"linkColorHover": "var(--global-colors-primary)"
	},
	"footer":{
		"backgroundColor": "var(--global-colors-grey200)",
		"borderColor": "var(--global-colors-grey300)",
		"color": "var(--global-colors-black)",
		"linkColor": "var(--global-colors-black)",
		"linkColorHover": "var(--global-colors-primary)",
		"headingColor": "var(--global-colors-black)",
		"paragraphColor": "var(--global-colors-black)",
		"spanColor": "var(--global-colors-black)"
	},
	"footerCopyright":{
		"backgroundColor": "var(--global-colors-grey200)",
		"color": "var(--global-colors-black)",
		"linkColor": "var(--global-colors-black)",
		"linkColorHover": "var(--global-colors-primary)"
	},
	"drawer":{
		"backgroundColor": "var(--global-colors-white)",
		"color": "var(--global-colors-black)",
		"linkColor": "var(--global-colors-black)",
		"linkColorHover": "var(--global-colors-primary)"
	},
	"hamburger":{
		"backgroundColor": "var(--global-colors-white)",
		"color": "var(--global-colors-black)"
	},
	"colors": [
		{
			"name": "Primary",
			"slug": "primary",
			"color": "#D81022"
		},
		{
			"name": "Primary 900",
			"slug": "primary900",
			"color": "#bd0009"
		},
		{
			"name": "Primary 800",
			"slug": "primary800",
			"color": "#cb0019"
		},
		{
			"name": "Primary 700",
			"slug": "primary700",
			"color": "#d81021"
		},
		{
			"name": "Primary 600",
			"slug": "primary600",
			"color": "#ea2026"
		},
		{
			"name": "Primary 500",
			"slug": "primary500",
			"color": "#f82e26"
		},
		{
			"name": "Primary 400",
			"slug": "primary400",
			"color": "#f44544"
		},
		{
			"name": "Primary 300",
			"slug": "primary300",
			"color": "#ea6a6a"
		},
		{
			"name": "Primary 200",
			"slug": "primary200",
			"color": "#f39594"
		},
		{
			"name": "Primary 100",
			"slug": "primary100",
			"color": "#ffcacf"
		},
		{
			"name": "Primary 50",
			"slug": "primary50",
			"color": "#ffeaed"
		},
		{
			"name": "Secondary",
			"slug": "secondary",
			"color": "#000000"
		},
		{
			"name": "Secondary900",
			"slug": "secondary900",
			"color": "#000000"
		},
		{
			"name": "Secondary 800",
			"slug": "secondary800",
			"color": "#262626"
		},
		{
			"name": "Secondary 700",
			"slug": "secondary700",
			"color": "#434343"
		},
		{
			"name": "Secondary 600",
			"slug": "secondary600",
			"color": "#555555"
		},
		{
			"name": "Secondary 500",
			"slug": "secondary500",
			"color": "#7b7b7b"
		},
		{
			"name": "Secondary 400",
			"slug": "secondary400",
			"color": "#9d9d9d"
		},
		{
			"name": "Secondary 300",
			"slug": "secondary300",
			"color": "#c4c4c4"
		},
		{
			"name": "Secondary 200",
			"slug": "secondary200",
			"color": "#d9d9d9"
		},
		{
			"name": "Secondary 100",
			"slug": "secondary100",
			"color": "#e9e9e9"
		},
		{
			"name": "Secondary 50",
			"slug": "secondary50",
			"color": "#f5f5f5"
		},
		{
			"name": "Black",
			"slug": "black",
			"color": "#000000"
			
		},
		{
			"name": "Light",
			"slug": "light",
			"color": "#FAFAFA"
		},
		{
			"name": "White",
			"slug": "white",
			"color": "#FFFFFF"
		},
		{
			"name": "Ocean",
			"slug": "ocean",
			"color": "#00B8D4"
		},
		{
			"name": "Green",
			"slug": "green",
			"color": "#00E676"
		},
		{
			"name": "Red",
			"slug": "red",
			"color": "#B30024"
		},
		{
			"name": "Yellow",
			"slug": "yellow",
			"color": "#FFEA00"
		},
		{
			"name": "Yellow100",
			"slug": "yellow100",
			"color": "#fff9c4"
		},
		{
			"name": "Yellow200",
			"slug": "yellow200",
			"color": "#fff59d"
		},
		{
			"name": "Yellow300",
			"slug": "yellow300",
			"color": "#fff176"
		},
		{
			"name": "Yellow400",
			"slug": "yellow400",
			"color": "#ffea00"
		},
		{
			"name": "Yellow500",
			"slug": "yellow500",
			"color": "#ffeb3b"
		},
		{
			"name": "Yellow600",
			"slug": "yellow600",
			"color": "#fdd835"
		},
		{
			"name": "Yellow700",
			"slug": "yellow700",
			"color": "#ffd600"
		},
		{
			"name": "Blue",
			"slug": "blue",
			"color": "#0040F0"
		},
		
		{
			"name": "Blue500",
			"slug": "blue500",
			"color": "#11527E"
		},
		{
			"name": "Blue400",
			"slug": "blue400",
			"color": "#4BA9E7"
		},
		{
			"name": "Blue300",
			"slug": "blue300",
			"color": "#93CBF0"
		},
		{
			"name": "Mist",
			"slug": "mist",
			"color": "#F1FBFE"
		},
		{
			"name": "Dew",
			"slug": "dew",
			"color": "#FAF8FC"
		},
		{
			"name": "Cream",
			"slug": "cream",
			"color": "#FFFBF5"
		},
		{
			"name": "Eightshift",
			"slug": "eightshift",
			"color": "#0D3636"
		},
		{
			"name": "Grey",
			"slug": "grey",
			"color": "#dfdfdf"
		},
		{
			"name": "Dark Grey",
			"slug": "dark-grey",
			"color": "#484848"
		},
		{
			"name": "Light Grey",
			"slug": "light-grey",
			"color": "#f8f8f8"
		},
		
		{
			"name": "Divider",
			"slug": "divider",
			"color": "#E4EBF5"
		},
		{
			"name": "Ghost Primary",
			"slug": "ghost-primary",
			"color": "#979797"
		},
		{
			"name": "Ghost White",
			"slug": "ghost-white",
			"color": "#979797"
		},
		{
			"name": "Grey50",
			"slug": "grey50",
			"color": "#fafafa"
		},
		{
			"name": "Grey100",
			"slug": "grey100",
			"color": "#f5f5f5"
		},
		{
			"name": "Grey200",
			"slug": "grey200",
			"color": "#eeeeee"	
		},
		{
			"name": "Grey300",
			"slug": "grey300",
			"color": "#e0e0e0"
		},
		{
			"name": "Grey400",
			"slug": "grey400",
			"color": "#bdbdbd"
		},
		{
			"name": "Grey500",
			"slug": "grey500",
			"color": "#9e9e9e"
		},
		{
			"name": "Grey600",
			"slug": "grey600",
			"color": "#757575"
		},
		{
			"name": "Grey700",
			"slug": "grey700",
			"color": "#616161"
		},
		{
			"name": "Grey800",
			"slug": "grey800",
			"color": "#424242"
		},
		{
			"name": "Grey900",
			"slug": "grey900",
			"color": "#212121"
		},
		
		{
			"name": "Purple",
			"slug": "purple",
			"color": "#623D91"
		},

		{
			"name": "Froggy Gray",
			"slug": "froggy-gray",
			"color": "#D2D1C2"
		},
		{
			"name": "Metallic Bronze",
			"slug": "metallic-bronze",
			"color": "#51391C"
		},
		{
			"name": "Malta",
			"slug": "malta",
			"color": "#BCAC9B"
		},
		{
			"name": "Bronco",
			"slug": "bronco",
			"color": "#B0A499"
		},
		{
			"name": "Vanilla",
			"slug": "vanilla",
			"color": "#CEB6A5"
		},
		{
			"name": "Dust storm",
			"slug": "dust-storm",
			"color": "#DFCDC0"
		},
		{
			"name": "Toast",
			"slug": "toast",
			"color": "#D77462"
		},
		{
			"name": "Rich",
			"slug": "richcoffe",
			"color": "#251A16"
		},
		{
			"name": "Bjn",
			"slug": "bjn",
			"color": "#1210A9"
		},
		{
			"name": "BlueCrolis",
			"slug": "bluecrolis",
			"color": "#00AEEF"
		},
		{
			"name": "GreyCrolis",
			"slug": "greycrolis",
			"color": "#D1D3D4"
		},
		{
			"name": "OrangeCrolis",
			"slug": "orangecrolis",
			"color": "#D65A29"
		},
		{
			"name": "YellowCrolis",
			"slug": "yellowcrolis",
			"color": "#DAA95D"
		},
		{
			"name": "GreenCrolis",
			"slug": "greencrolis",
			"color": "#009444"
		},
		{
			"name": "GreenDarkCrolis",
			"slug": "greendarkcrolis",
			"color": "#006335"
		},
		{
			"name": "3dtechPurple",
			"slug": "3dtechpurple",
			"color": "#6c63ff"
		},
		{
			"name": "plum",
			"slug": "plum",
			"color": "#1b2143"
		}
		

		
	]
}

} `

I have latest version: I always delete node_models and then install new version

[goranalkovic-infinum]

Hi Marijan, the global manifest seems ok.

However, I don't see any gradient presets, so if you're expecting to see them in the gradient picker, you won't find any there automatically :)

Regarding wrapper background colors not showing, if you check the wrapper manifest, you can find a key under options where you can add slugs of colors that are present in the global manifest to show as the project background color: