@arraypress/covers 0.0.0-stage → 1.1.0

package/recipes/gridTitle.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "gridTitle",
+  "description": "The aurora field under a dotted grid (four cells each way), grain, and an optional headline lower left.",
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid"
+    },
+    {
+      "id": "mesh",
+      "type": "mesh",
+      "count": 4,
+      "blur": "11vmax",
+      "size": [
+        0.45,
+        0.8
+      ],
+      "streak": 1.8,
+      "tone": {
+        "if": "title",
+        "then": {
+          "if": {
+            "mode": "dark"
+          },
+          "then": {
+            "l": [
+              0.34,
+              0.5
+            ],
+            "c": [
+              0.12,
+              0.22
+            ]
+          },
+          "else": {
+            "l": [
+              0.66,
+              0.82
+            ],
+            "c": [
+              0.13,
+              0.2
+            ]
+          }
+        },
+        "else": {
+          "l": [
+            0.55,
+            0.85
+          ],
+          "c": [
+            0.12,
+            0.22
+          ]
+        }
+      },
+      "fold": {
+        "if": "title",
+        "then": false,
+        "else": {
+          "pick": [
+            false,
+            false,
+            true
+          ]
+        }
+      },
+      "streaks": {
+        "if": "title",
+        "then": 0,
+        "else": {
+          "pick": [
+            0,
+            0,
+            0,
+            6
+          ]
+        }
+      },
+      "hues": {
+        "pick": [
+          2,
+          2,
+          3
+        ]
+      },
+      "hueSpan": 60
+    },
+    {
+      "id": "grid",
+      "type": "pattern",
+      "kind": "grid",
+      "divisions": 4,
+      "stroke": "0.3vmin",
+      "dash": "dotted",
+      "color": "#ffffff",
+      "opacity": 0.6
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.08
+    },
+    {
+      "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": "@text",
+          "content": "{label}"
+        }
+      }
+    }
+  ]
+}

package/recipes/iconTile.json

@@ -0,0 +1,214 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "iconTile",
+  "description": "An icon on a raised tile over a soft tint of the accent, a glow and faint rings. With a title, the tile moves to the upper left.",
+  "vars": {
+    "tint": {
+      "mix": [
+        "@bg",
+        "@accent",
+        {
+          "if": {
+            "mode": "dark"
+          },
+          "then": 0.1,
+          "else": 0.07
+        }
+      ]
+    },
+    "glow": {
+      "if": "title",
+      "then": {
+        "x": {
+          "add": [
+            0.22,
+            {
+              "range": [
+                -0.12,
+                0.12
+              ]
+            }
+          ]
+        },
+        "y": {
+          "add": [
+            0.26,
+            {
+              "range": [
+                -0.12,
+                0.12
+              ]
+            }
+          ]
+        }
+      },
+      "else": {
+        "x": {
+          "add": [
+            0.5,
+            {
+              "range": [
+                -0.12,
+                0.12
+              ]
+            }
+          ]
+        },
+        "y": {
+          "add": [
+            0.5,
+            {
+              "range": [
+                -0.12,
+                0.12
+              ]
+            }
+          ]
+        }
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid",
+      "color": "$tint"
+    },
+    {
+      "id": "glow",
+      "type": "radial",
+      "colors": [
+        {
+          "mix": [
+            "$tint",
+            "@accent",
+            {
+              "if": {
+                "mode": "dark"
+              },
+              "then": 0.32,
+              "else": 0.26
+            }
+          ]
+        },
+        "$tint"
+      ],
+      "x": "$glow.x",
+      "y": "$glow.y",
+      "radius": "52vmax"
+    },
+    {
+      "id": "rings",
+      "type": "pattern",
+      "kind": "rings",
+      "size": {
+        "if": "title",
+        "then": "6vmin",
+        "else": "7vmin"
+      },
+      "center": "$glow",
+      "opacity": {
+        "if": {
+          "mode": "dark"
+        },
+        "then": 0.14,
+        "else": 0.16
+      },
+      "fade": "radial",
+      "color": {
+        "if": {
+          "mode": "dark"
+        },
+        "then": "@text",
+        "else": "@accent"
+      }
+    },
+    {
+      "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": {
+        "mul": [
+          "@u",
+          {
+            "if": "title",
+            "then": 0.075,
+            "else": 0.12
+          }
+        ]
+      },
+      "anchor": {
+        "if": "title",
+        "then": "top-left",
+        "else": "center"
+      },
+      "tile": {
+        "color": {
+          "if": {
+            "mode": "dark"
+          },
+          "then": {
+            "mix": [
+              "$tint",
+              "@text",
+              0.09
+            ]
+          },
+          "else": {
+            "mix": [
+              "$tint",
+              "#ffffff",
+              0.85
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "grain",
+      "type": "grain",
+      "amount": 0.05
+    },
+    {
+      "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": "{label}"
+    }
+  ]
+}

package/recipes/issue.json

@@ -0,0 +1,221 @@
+{
+  "$schema": "../schema/recipe.schema.json",
+  "name": "issue",
+  "description": "Type-led: a huge issue number in the accent, sized to the canvas and cropped at the bottom only, an optional No., a masthead line with the date, a hairline.",
+  "params": {
+    "number": null,
+    "masthead": null,
+    "date": null,
+    "prefix": true
+  },
+  "vars": {
+    "number": {
+      "if": "number",
+      "then": "{number}",
+      "else": {
+        "int": [
+          1,
+          64
+        ]
+      }
+    },
+    "numeral": {
+      "readable": [
+        "@bg",
+        3,
+        "@accent"
+      ]
+    },
+    "size": {
+      "min": [
+        {
+          "mul": [
+            "@height",
+            1.04
+          ]
+        },
+        {
+          "div": [
+            {
+              "mul": [
+                "@width",
+                1.62
+              ]
+            },
+            {
+              "length": "$number"
+            }
+          ]
+        }
+      ]
+    },
+    "bleed": {
+      "add": [
+        1,
+        {
+          "div": [
+            {
+              "mul": [
+                "$size",
+                0.1
+              ]
+            },
+            "@height"
+          ]
+        }
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "solid"
+    },
+    {
+      "id": "masthead",
+      "type": "text",
+      "when": "masthead",
+      "content": "{masthead}",
+      "anchor": "top-left",
+      "size": {
+        "mul": [
+          "@u",
+          0.024
+        ]
+      },
+      "weight": 600,
+      "letterSpacing": 0.08,
+      "transform": "uppercase",
+      "maxLines": 1,
+      "balance": false,
+      "color": "@text"
+    },
+    {
+      "id": "date",
+      "type": "text",
+      "when": "date",
+      "content": "{date}",
+      "anchor": "top-right",
+      "size": {
+        "mul": [
+          "@u",
+          0.024
+        ]
+      },
+      "weight": 500,
+      "letterSpacing": 0.04,
+      "maxLines": 1,
+      "balance": false,
+      "color": "@text"
+    },
+    {
+      "id": "rule",
+      "type": "rule",
+      "y": {
+        "if": {
+          "any": [
+            "masthead",
+            "date"
+          ]
+        },
+        "then": 0.13,
+        "else": 0.1
+      }
+    },
+    {
+      "id": "no",
+      "type": "text",
+      "when": {
+        "not": {
+          "prefix": false
+        }
+      },
+      "content": "No.",
+      "anchor": "left",
+      "position": {
+        "x": 0.07,
+        "y": {
+          "if": "title",
+          "then": 0.31,
+          "else": 0.27
+        }
+      },
+      "size": {
+        "mul": [
+          "@u",
+          0.05
+        ]
+      },
+      "weight": 500,
+      "letterSpacing": -0.02,
+      "color": "$numeral",
+      "maxLines": 1,
+      "balance": false
+    },
+    {
+      "id": "number",
+      "type": "text",
+      "content": "$number",
+      "anchor": "bottom-left",
+      "position": {
+        "x": 0.055,
+        "y": "$bleed"
+      },
+      "size": "$size",
+      "weight": 600,
+      "letterSpacing": -0.06,
+      "lineHeight": 1,
+      "maxLines": 1,
+      "maxWidth": 100000,
+      "balance": false,
+      "color": "$numeral"
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "when": "title",
+      "content": "{title}",
+      "anchor": {
+        "if": {
+          "aspect": "wide"
+        },
+        "then": "top-right",
+        "else": "top-left"
+      },
+      "weight": 500,
+      "size": {
+        "mul": [
+          "@u",
+          0.05
+        ]
+      },
+      "minSize": {
+        "mul": [
+          "@u",
+          0.04
+        ]
+      },
+      "lineHeight": 1.08,
+      "letterSpacing": -0.025,
+      "maxLines": 2,
+      "label": {
+        "if": "label",
+        "then": {
+          "color": "@text",
+          "content": "{label}"
+        }
+      },
+      "offset": {
+        "y": "9vh"
+      },
+      "maxWidth": {
+        "if": {
+          "aspect": "wide"
+        },
+        "then": "40vw",
+        "else": "52vw"
+      },
+      "align": "left"
+    }
+  ]
+}