goranalkovic-infinum
commented
1 year ago Hi Marijan,
please provide some more details:
- Which version of Libs you're using?
- Please copy-paste the global manifest and the Wrapper manifest
Closed marijang closed 7 months ago
goranalkovic-infinum
commented
1 year ago Hi Marijan,
please provide some more details:
marijang
commented
1 year ago `{ "$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
commented
1 year ago 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:
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