@arraypress/covers 0.0.0-stage → 1.0.0

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}