@arraypress/covers 0.0.0-stage → 1.1.0

package/recipes/mark.json

@@ -0,0 +1,170 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "mark",
+  "description": "One icon, centred, on the accent or an accent gradient: white whenever white clears 3:1 (WCAG 1.4.11, non-text) against everything under it, else near-black.",
+  "params": {
+    "background": "solid",
+    "angle": 135,
+    "colors": null,
+    "size": "24vmin",
+    "iconColor": "auto"
+  },
+  "vars": {
+    "gradient": {
+      "if": "colors",
+      "then": "{colors}",
+      "else": [
+        "@accent",
+        {
+          "mix": [
+            "@accent",
+            "@colors.1",
+            0.5,
+            "oklch"
+          ]
+        }
+      ]
+    },
+    "ink": {
+      "if": {
+        "iconColor": "auto"
+      },
+      "then": {
+        "if": {
+          "background": "gradient"
+        },
+        "then": {
+          "readable": [
+            {
+              "gradientUnder": [
+                "$gradient",
+                "{angle}",
+                "{size}"
+              ]
+            },
+            3,
+            "white"
+          ]
+        },
+        "else": {
+          "readable": [
+            "@accent",
+            3,
+            "white"
+          ]
+        }
+      },
+      "else": {
+        "if": {
+          "iconColor": "white"
+        },
+        "then": "#ffffff",
+        "else": {
+          "if": {
+            "iconColor": "black"
+          },
+          "then": "#111111",
+          "else": "{iconColor}"
+        }
+      }
+    },
+    "type": {
+      "if": {
+        "background": "gradient"
+      },
+      "then": {
+        "readable": [
+          "$gradient",
+          4.5,
+          "$ink"
+        ]
+      },
+      "else": {
+        "readable": [
+          "@accent",
+          4.5,
+          "$ink"
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid",
+      "when": {
+        "background": "solid"
+      },
+      "color": "@accent"
+    },
+    {
+      "id": "bg",
+      "type": "linear",
+      "when": {
+        "background": "gradient"
+      },
+      "angle": "{angle}",
+      "colors": "$gradient"
+    },
+    {
+      "id": "icon",
+      "type": "icon",
+      "name": "{icon}",
+      "path": {
+        "if": {
+          "not": "icon"
+        },
+        "then": "M12 2c.4 4.9 2.1 7.6 7 8.6l3 .4-3 .4c-4.9 1-6.6 3.7-7 8.6-.4-4.9-2.1-7.6-7-8.6L2 11l3-.4c4.9-1 6.6-3.7 7-8.6Z"
+      },
+      "viewBox": {
+        "if": {
+          "not": "icon"
+        },
+        "then": [
+          0,
+          0,
+          24,
+          24
+        ]
+      },
+      "size": "{size}",
+      "color": "$ink"
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.03
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.066
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.048
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "$type",
+          "content": "{label}"
+        }
+      },
+      "color": "$type"
+    }
+  ]
+}

package/recipes/photo.json

@@ -0,0 +1,156 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "photo",
+  "description": "A palette taken from a photo, laid out as full-bleed sweeps like aurora (the photo itself not shown), or `show: 'blur'` for the photo heavily blurred.",
+  "params": {
+    "show": null
+  },
+  "requires": [
+    "image"
+  ],
+  "vars": {
+    "src": {
+      "if": "image",
+      "then": "{image}",
+      "else": null
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid"
+    },
+    {
+      "id": "mesh",
+      "type": "mesh",
+      "when": {
+        "not": {
+          "show": "blur"
+        }
+      },
+      "from": "$src",
+      "count": 4,
+      "blur": "11vmax",
+      "size": [
+        0.45,
+        0.8
+      ],
+      "streak": 1.8,
+      "hues": 3,
+      "tone": {
+        "if": "title",
+        "then": {
+          "if": {
+            "mode": "dark"
+          },
+          "then": {
+            "l": [
+              0.34,
+              0.5
+            ],
+            "c": [
+              0.08,
+              0.2
+            ]
+          },
+          "else": {
+            "l": [
+              0.66,
+              0.82
+            ],
+            "c": [
+              0.08,
+              0.18
+            ]
+          }
+        },
+        "else": {
+          "l": [
+            0.5,
+            0.85
+          ],
+          "c": [
+            0.08,
+            0.2
+          ]
+        }
+      },
+      "fold": {
+        "if": "title",
+        "then": false,
+        "else": {
+          "pick": [
+            false,
+            false,
+            true
+          ]
+        }
+      }
+    },
+    {
+      "id": "photo",
+      "type": "image",
+      "when": {
+        "show": "blur"
+      },
+      "src": "$src",
+      "blur": "7vmax"
+    },
+    {
+      "id": "scrim",
+      "type": "solid",
+      "when": {
+        "all": [
+          {
+            "show": "blur"
+          },
+          "title"
+        ]
+      },
+      "color": {
+        "if": {
+          "mode": "dark"
+        },
+        "then": "#000000",
+        "else": "#ffffff"
+      },
+      "opacity": 0.4
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.08
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.062
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.046
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "@text",
+          "content": "{label}"
+        }
+      },
+      "color": "@text"
+    }
+  ]
+}

package/recipes/riso.json

@@ -0,0 +1,387 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "riso",
+  "description": "Two (or three) flat risograph inks overprinted on paper: big simple forms, slight misregistration, speckled or halftone texture, uneven density. Inks from the palette, or classic riso inks.",
+  "params": {
+    "inks": null,
+    "texture": "grain",
+    "third": false
+  },
+  "vars": {
+    "ground": {
+      "if": {
+        "mode": "dark"
+      },
+      "then": "@bg",
+      "else": "#f6f1e7"
+    },
+    "blend": {
+      "if": {
+        "mode": "dark"
+      },
+      "then": "screen",
+      "else": "multiply"
+    },
+    "inks": {
+      "if": "inks",
+      "then": "{inks}",
+      "else": [
+        {
+          "tone": [
+            "@accent",
+            {
+              "l": [
+                0.5,
+                0.72
+              ],
+              "c": [
+                0.14,
+                0.26
+              ]
+            }
+          ]
+        },
+        {
+          "tone": [
+            "@colors.1",
+            {
+              "l": [
+                0.5,
+                0.72
+              ],
+              "c": [
+                0.14,
+                0.26
+              ]
+            }
+          ]
+        },
+        {
+          "tone": [
+            "@colors.2",
+            {
+              "l": [
+                0.5,
+                0.72
+              ],
+              "c": [
+                0.14,
+                0.26
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    "comp": {
+      "if": "title",
+      "then": {
+        "pick": [
+          [
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.4,
+                    0.6
+                  ]
+                },
+                "y": 0.32,
+                "r": "24vmin"
+              }
+            ],
+            [
+              {
+                "kind": "band",
+                "y": 0.42,
+                "height": "16vmin",
+                "rotate": {
+                  "range": [
+                    -8,
+                    8
+                  ]
+                }
+              }
+            ]
+          ],
+          [
+            [
+              {
+                "kind": "arch",
+                "x": {
+                  "range": [
+                    0.34,
+                    0.42
+                  ]
+                },
+                "y": 0.34,
+                "width": "34vmin",
+                "height": "44vmin"
+              }
+            ],
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.58,
+                    0.66
+                  ]
+                },
+                "y": 0.3,
+                "r": "16vmin"
+              }
+            ]
+          ],
+          [
+            [
+              {
+                "kind": "half",
+                "x": 0.5,
+                "y": 0.5,
+                "r": "32vmin"
+              }
+            ],
+            [
+              {
+                "kind": "circle",
+                "x": 0.5,
+                "y": 0.3,
+                "r": "14vmin"
+              }
+            ]
+          ]
+        ]
+      },
+      "else": {
+        "pick": [
+          [
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.36,
+                    0.5
+                  ]
+                },
+                "y": {
+                  "range": [
+                    0.38,
+                    0.5
+                  ]
+                },
+                "r": "34vmin"
+              }
+            ],
+            [
+              {
+                "kind": "band",
+                "y": {
+                  "range": [
+                    0.56,
+                    0.68
+                  ]
+                },
+                "height": "26vmin",
+                "rotate": {
+                  "range": [
+                    -14,
+                    14
+                  ]
+                }
+              }
+            ]
+          ],
+          [
+            [
+              {
+                "kind": "arch",
+                "x": {
+                  "range": [
+                    0.32,
+                    0.42
+                  ]
+                },
+                "y": 0.54,
+                "width": "46vmin",
+                "height": "66vmin"
+              }
+            ],
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.6,
+                    0.68
+                  ]
+                },
+                "y": {
+                  "range": [
+                    0.34,
+                    0.44
+                  ]
+                },
+                "r": "22vmin"
+              }
+            ]
+          ],
+          [
+            [
+              {
+                "kind": "half",
+                "x": 0.5,
+                "y": {
+                  "range": [
+                    0.6,
+                    0.7
+                  ]
+                },
+                "r": "42vmin"
+              }
+            ],
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.42,
+                    0.58
+                  ]
+                },
+                "y": {
+                  "range": [
+                    0.34,
+                    0.42
+                  ]
+                },
+                "r": "19vmin"
+              }
+            ]
+          ],
+          [
+            [
+              {
+                "kind": "ring",
+                "x": {
+                  "range": [
+                    0.4,
+                    0.48
+                  ]
+                },
+                "y": 0.48,
+                "r": "30vmin",
+                "thickness": "12vmin"
+              }
+            ],
+            [
+              {
+                "kind": "circle",
+                "x": {
+                  "range": [
+                    0.56,
+                    0.64
+                  ]
+                },
+                "y": {
+                  "range": [
+                    0.5,
+                    0.58
+                  ]
+                },
+                "r": "24vmin"
+              }
+            ]
+          ]
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid",
+      "color": "$ground"
+    },
+    {
+      "id": "inkA",
+      "type": "ink",
+      "color": "$inks.0",
+      "shapes": "$comp.0",
+      "texture": "{texture}",
+      "blend": "$blend"
+    },
+    {
+      "id": "inkB",
+      "type": "ink",
+      "color": "$inks.1",
+      "shapes": "$comp.1",
+      "texture": "{texture}",
+      "blend": "$blend"
+    },
+    {
+      "id": "inkC",
+      "type": "ink",
+      "when": "third",
+      "color": "$inks.2",
+      "shapes": [
+        {
+          "kind": "circle",
+          "x": {
+            "range": [
+              0.2,
+              0.8
+            ]
+          },
+          "y": {
+            "range": [
+              0.2,
+              0.4
+            ]
+          },
+          "r": "7vmin"
+        }
+      ],
+      "texture": "{texture}",
+      "blend": "$blend"
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.05
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": "bottom-left",
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.062
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.046
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 3,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "@text",
+          "content": "{label}"
+        }
+      },
+      "color": "@text"
+    }
+  ]
+}