Pixl: add style variations (#6530)

* add style variations

* update tertiary to nearest background color

* add schema to style variation files

pixl/styles/blue.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Blue",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#A4FFBD",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#A4FFBD",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#1135F9",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#2949f7",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}

pixl/styles/green.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Green",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#002DF5",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#002DF5",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#DCFC72",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#c9fd1e",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}

pixl/styles/magenta.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Magenta",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#FEFBF1",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#FEFBF1",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#6D1059",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#95167a",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}

pixl/styles/pink.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Pink",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#45075B",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#45075B",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#FDAEFF",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#fa82fd",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}

pixl/styles/red.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Red",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#E4FFF5",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#E4FFF5",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#B7253F",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#dc2f4e",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}

pixl/styles/yellow.json

@@ -0,0 +1,31 @@
+{
+    "$schema": "https://schemas.wp.org/trunk/theme.json",
+    "version": 2,
+    "title": "Yellow",
+    "settings": {
+        "color": {
+            "palette": [
+                {
+                    "color": "#000000",
+                    "name": "Primary",
+                    "slug": "primary"
+                },
+                {
+                    "color": "#000000",
+                    "name": "Foreground",
+                    "slug": "foreground"
+                },
+                {
+                    "color": "#FFFA52",
+                    "name": "Background",
+                    "slug": "background"
+                },
+                {
+                    "color": "#c0bb22",
+                    "name": "Tertiary",
+                    "slug": "tertiary"
+                }
+            ]
+        }
+    }
+}