@anvpx/motion-templates 0.0.0-stage → 0.1.0

package/shared/themes/editorial-light.json

@@ -0,0 +1,353 @@
+{
+  "$description": "editorial: cool paper and ink, serif type, one deep-teal accent (light), DTCG format",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "$value": "#f8f7f3"
+    },
+    "bgEnd": {
+      "$value": "#efeee8"
+    },
+    "glow": {
+      "$value": "#e6e6df"
+    },
+    "glow2": {
+      "$value": "#e1e6e8"
+    },
+    "surface": {
+      "$value": "#f1f0ea"
+    },
+    "card": {
+      "$value": "#fffffd"
+    },
+    "divider": {
+      "$value": "#d2d0c6"
+    },
+    "accentSoft": {
+      "$value": "#e0e9ef"
+    },
+    "fg": {
+      "$value": "#15130f"
+    },
+    "muted": {
+      "$value": "#524f48"
+    },
+    "accent": {
+      "$value": "#1d4f6e"
+    },
+    "accent2": {
+      "$value": "#9a3226"
+    },
+    "onAccent": {
+      "$value": "#ffffff"
+    },
+    "onAccent2": {
+      "$value": "#ffffff"
+    },
+    "deep": {
+      "$value": "#17150f"
+    },
+    "deepEnd": {
+      "$value": "#0c0b08"
+    },
+    "onDeep": {
+      "$value": "#f8f7f3"
+    },
+    "onDeepMuted": {
+      "$value": "#cfccc0"
+    }
+  },
+  "chart": {
+    "1": {
+      "$value": "#4d80b3"
+    },
+    "2": {
+      "$value": "#d95c26"
+    },
+    "3": {
+      "$value": "#284d5d"
+    },
+    "4": {
+      "$value": "#3f9282"
+    },
+    "5": {
+      "$value": "#a0352a"
+    },
+    "6": {
+      "$value": "#1d1471"
+    },
+    "7": {
+      "$value": "#2626d9"
+    },
+    "8": {
+      "$value": "#266ed9"
+    },
+    "$type": "color"
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": ["Source Serif 4", "Georgia", "serif"]
+    },
+    "display": {
+      "$value": ["Source Serif 4", "Georgia", "serif"]
+    },
+    "mono": {
+      "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"]
+    }
+  },
+  "fontSize": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "28px"
+    },
+    "md": {
+      "$value": "32px"
+    },
+    "lg": {
+      "$value": "48px"
+    },
+    "xl": {
+      "$value": "72px"
+    },
+    "title": {
+      "$value": "100px"
+    },
+    "display": {
+      "$value": "136px"
+    },
+    "heroSm": {
+      "$value": "168px"
+    },
+    "heroMd": {
+      "$value": "248px"
+    },
+    "hero": {
+      "$value": "360px"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "xs": {
+      "$value": "4px"
+    },
+    "sm": {
+      "$value": "8px"
+    },
+    "md": {
+      "$value": "16px"
+    },
+    "lg": {
+      "$value": "32px"
+    },
+    "xl": {
+      "$value": "64px"
+    },
+    "xxl": {
+      "$value": "104px"
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "0px"
+    },
+    "md": {
+      "$value": "2px"
+    },
+    "lg": {
+      "$value": "4px"
+    },
+    "xl": {
+      "$value": "8px"
+    },
+    "full": {
+      "$value": "9999px"
+    }
+  },
+  "opacity": {
+    "$type": "number",
+    "subtle": {
+      "$value": 0.7
+    },
+    "medium": {
+      "$value": 0.85
+    },
+    "full": {
+      "$value": 1
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": {
+      "$value": "300ms"
+    },
+    "base": {
+      "$value": "600ms"
+    },
+    "slow": {
+      "$value": "1200ms"
+    }
+  },
+  "status": {
+    "$type": "color",
+    "good": {
+      "$value": "#17803f"
+    },
+    "warn": {
+      "$value": "#a45a00"
+    },
+    "bad": {
+      "$value": "#b4232f"
+    }
+  },
+  "stroke": {
+    "$type": "dimension",
+    "card": {
+      "$value": "0px"
+    },
+    "icon": {
+      "$value": "1.5px"
+    }
+  },
+  "numeric": {
+    "mode": {
+      "$type": "string",
+      "$value": "proportional"
+    }
+  },
+  "$extensions": {
+    "motion-kit": {
+      "family": "editorial",
+      "mode": "light",
+      "pair": "editorial-dark",
+      "strictChart": true,
+      "textPairs": [
+        {
+          "fg": "fg",
+          "bg": "bg"
+        },
+        {
+          "fg": "fg",
+          "bg": "bgEnd"
+        },
+        {
+          "fg": "fg",
+          "bg": "glow"
+        },
+        {
+          "fg": "fg",
+          "bg": "glow2"
+        },
+        {
+          "fg": "fg",
+          "bg": "surface"
+        },
+        {
+          "fg": "fg",
+          "bg": "card"
+        },
+        {
+          "fg": "fg",
+          "bg": "accentSoft"
+        },
+        {
+          "fg": "muted",
+          "bg": "bg"
+        },
+        {
+          "fg": "muted",
+          "bg": "bgEnd"
+        },
+        {
+          "fg": "muted",
+          "bg": "glow"
+        },
+        {
+          "fg": "muted",
+          "bg": "glow2"
+        },
+        {
+          "fg": "muted",
+          "bg": "surface"
+        },
+        {
+          "fg": "muted",
+          "bg": "card"
+        },
+        {
+          "fg": "muted",
+          "bg": "accentSoft"
+        },
+        {
+          "fg": "accent",
+          "bg": "bg"
+        },
+        {
+          "fg": "accent",
+          "bg": "bgEnd"
+        },
+        {
+          "fg": "accent",
+          "bg": "glow"
+        },
+        {
+          "fg": "accent",
+          "bg": "glow2"
+        },
+        {
+          "fg": "accent",
+          "bg": "surface"
+        },
+        {
+          "fg": "accent",
+          "bg": "card"
+        },
+        {
+          "fg": "accent",
+          "bg": "accentSoft"
+        },
+        {
+          "fg": "accent2",
+          "bg": "bg"
+        },
+        {
+          "fg": "accent2",
+          "bg": "bgEnd"
+        },
+        {
+          "fg": "accent2",
+          "bg": "surface"
+        },
+        {
+          "fg": "accent2",
+          "bg": "card"
+        },
+        {
+          "fg": "onAccent",
+          "bg": "accent"
+        },
+        {
+          "fg": "onAccent2",
+          "bg": "accent2"
+        },
+        {
+          "fg": "onDeep",
+          "bg": "deep"
+        },
+        {
+          "fg": "onDeep",
+          "bg": "deepEnd"
+        },
+        {
+          "fg": "onDeepMuted",
+          "bg": "deep"
+        },
+        {
+          "fg": "onDeepMuted",
+          "bg": "deepEnd"
+        }
+      ]
+    }
+  }
+}

package/shared/themes/fjord-dark.json

@@ -0,0 +1,124 @@
+{
+  "$description": "fjord: deep teal-slate ground, pine and amber accents (dark), DTCG format",
+  "$extensions": {
+    "motion-kit": {
+      "family": "fjord",
+      "mode": "dark",
+      "pair": "fjord-light",
+      "textPairs": [
+        { "bg": "bg", "fg": "fg" },
+        { "bg": "bgEnd", "fg": "fg" },
+        { "bg": "glow", "fg": "fg" },
+        { "bg": "glow2", "fg": "fg" },
+        { "bg": "surface", "fg": "fg" },
+        { "bg": "card", "fg": "fg" },
+        { "bg": "accentSoft", "fg": "fg" },
+        { "bg": "bg", "fg": "muted" },
+        { "bg": "bgEnd", "fg": "muted" },
+        { "bg": "glow", "fg": "muted" },
+        { "bg": "glow2", "fg": "muted" },
+        { "bg": "surface", "fg": "muted" },
+        { "bg": "card", "fg": "muted" },
+        { "bg": "accentSoft", "fg": "muted" },
+        { "bg": "bg", "fg": "accent" },
+        { "bg": "bgEnd", "fg": "accent" },
+        { "bg": "glow", "fg": "accent" },
+        { "bg": "glow2", "fg": "accent" },
+        { "bg": "surface", "fg": "accent" },
+        { "bg": "card", "fg": "accent" },
+        { "bg": "accentSoft", "fg": "accent" },
+        { "bg": "bg", "fg": "accent2" },
+        { "bg": "bgEnd", "fg": "accent2" },
+        { "bg": "surface", "fg": "accent2" },
+        { "bg": "card", "fg": "accent2" },
+        { "bg": "accent", "fg": "onAccent" },
+        { "bg": "accent2", "fg": "onAccent2" },
+        { "bg": "deep", "fg": "onDeep" },
+        { "bg": "deepEnd", "fg": "onDeep" },
+        { "bg": "deep", "fg": "onDeepMuted" },
+        { "bg": "deepEnd", "fg": "onDeepMuted" }
+      ]
+    }
+  },
+  "chart": {
+    "1": { "$value": "#82b4f2" },
+    "2": { "$value": "#f59a5b" },
+    "3": { "$value": "#5fd0c0" },
+    "4": { "$value": "#b894f2" },
+    "5": { "$value": "#f2748a" },
+    "6": { "$value": "#6fcbe8" },
+    "7": { "$value": "#e6c15a" },
+    "8": { "$value": "#aab5c5" },
+    "$type": "color"
+  },
+  "color": {
+    "$type": "color",
+    "accent": { "$value": "#7fc4d4" },
+    "accent2": { "$value": "#f0a35e" },
+    "accentSoft": { "$value": "#1e3d42" },
+    "bg": { "$value": "#0d1514" },
+    "bgEnd": { "$value": "#131e1d" },
+    "card": { "$value": "#1a2625" },
+    "deep": { "$value": "#16424f" },
+    "deepEnd": { "$value": "#0e2c35" },
+    "divider": { "$value": "#2e3f3d" },
+    "fg": { "$value": "#e9f1ee" },
+    "glow": { "$value": "#1d3a40" },
+    "glow2": { "$value": "#1c3a2e" },
+    "muted": { "$value": "#a3b8b1" },
+    "onAccent": { "$value": "#06222a" },
+    "onAccent2": { "$value": "#2a1500" },
+    "onDeep": { "$value": "#ffffff" },
+    "onDeepMuted": { "$value": "#bcd8e0" },
+    "surface": { "$value": "#141f1e" }
+  },
+  "duration": {
+    "base": { "$value": "400ms" },
+    "fast": { "$value": "200ms" },
+    "slow": { "$value": "800ms" }
+  },
+  "font": {
+    "display": { "$value": ["Inter", "system-ui", "sans-serif"] },
+    "mono": { "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"] },
+    "sans": { "$value": ["Inter", "system-ui", "sans-serif"] }
+  },
+  "fontSize": {
+    "display": { "$value": "128px" },
+    "hero": { "$value": "360px" },
+    "heroMd": { "$value": "240px" },
+    "heroSm": { "$value": "160px" },
+    "lg": { "$value": "48px" },
+    "md": { "$value": "32px" },
+    "sm": { "$value": "28px" },
+    "title": { "$value": "96px" },
+    "xl": { "$value": "72px" }
+  },
+  "numeric": { "mode": { "$type": "string", "$value": "tabular" } },
+  "opacity": { "full": { "$value": 1 }, "medium": { "$value": 0.85 }, "subtle": { "$value": 0.7 } },
+  "radius": {
+    "full": { "$value": "9999px" },
+    "lg": { "$value": "12px" },
+    "md": { "$value": "8px" },
+    "sm": { "$value": "4px" },
+    "xl": { "$value": "20px" }
+  },
+  "shadow": {
+    "color": { "$type": "color", "$value": "#e9f1ee" },
+    "mode": { "$type": "string", "$value": "soft" }
+  },
+  "spacing": {
+    "lg": { "$value": "32px" },
+    "md": { "$value": "16px" },
+    "sm": { "$value": "8px" },
+    "xl": { "$value": "64px" },
+    "xs": { "$value": "4px" },
+    "xxl": { "$value": "96px" }
+  },
+  "status": {
+    "$type": "color",
+    "bad": { "$value": "#fb7185" },
+    "good": { "$value": "#4ade80" },
+    "warn": { "$value": "#fbbf24" }
+  },
+  "stroke": { "card": { "$value": "0px" }, "icon": { "$value": "1.75px" } }
+}

package/shared/themes/fjord-light.json

@@ -0,0 +1,124 @@
+{
+  "$description": "fjord: deep teal-slate ground, pine and amber accents (light), DTCG format",
+  "$extensions": {
+    "motion-kit": {
+      "family": "fjord",
+      "mode": "light",
+      "pair": "fjord-dark",
+      "textPairs": [
+        { "bg": "bg", "fg": "fg" },
+        { "bg": "bgEnd", "fg": "fg" },
+        { "bg": "glow", "fg": "fg" },
+        { "bg": "glow2", "fg": "fg" },
+        { "bg": "surface", "fg": "fg" },
+        { "bg": "card", "fg": "fg" },
+        { "bg": "accentSoft", "fg": "fg" },
+        { "bg": "bg", "fg": "muted" },
+        { "bg": "bgEnd", "fg": "muted" },
+        { "bg": "glow", "fg": "muted" },
+        { "bg": "glow2", "fg": "muted" },
+        { "bg": "surface", "fg": "muted" },
+        { "bg": "card", "fg": "muted" },
+        { "bg": "accentSoft", "fg": "muted" },
+        { "bg": "bg", "fg": "accent" },
+        { "bg": "bgEnd", "fg": "accent" },
+        { "bg": "glow", "fg": "accent" },
+        { "bg": "glow2", "fg": "accent" },
+        { "bg": "surface", "fg": "accent" },
+        { "bg": "card", "fg": "accent" },
+        { "bg": "accentSoft", "fg": "accent" },
+        { "bg": "bg", "fg": "accent2" },
+        { "bg": "bgEnd", "fg": "accent2" },
+        { "bg": "surface", "fg": "accent2" },
+        { "bg": "card", "fg": "accent2" },
+        { "bg": "accent", "fg": "onAccent" },
+        { "bg": "accent2", "fg": "onAccent2" },
+        { "bg": "deep", "fg": "onDeep" },
+        { "bg": "deepEnd", "fg": "onDeep" },
+        { "bg": "deep", "fg": "onDeepMuted" },
+        { "bg": "deepEnd", "fg": "onDeepMuted" }
+      ]
+    }
+  },
+  "chart": {
+    "1": { "$value": "#285fa8" },
+    "2": { "$value": "#c2570c" },
+    "3": { "$value": "#17766f" },
+    "4": { "$value": "#7a3fb0" },
+    "5": { "$value": "#b4263a" },
+    "6": { "$value": "#2a7fa6" },
+    "7": { "$value": "#8a6700" },
+    "8": { "$value": "#4a5565" },
+    "$type": "color"
+  },
+  "color": {
+    "$type": "color",
+    "accent": { "$value": "#1e5f6e" },
+    "accent2": { "$value": "#7c4a03" },
+    "accentSoft": { "$value": "#d9e9e6" },
+    "bg": { "$value": "#f3f6f5" },
+    "bgEnd": { "$value": "#e6ecec" },
+    "card": { "$value": "#ffffff" },
+    "deep": { "$value": "#14394a" },
+    "deepEnd": { "$value": "#0c2531" },
+    "divider": { "$value": "#c3d2d1" },
+    "fg": { "$value": "#122019" },
+    "glow": { "$value": "#d3e2e4" },
+    "glow2": { "$value": "#d8e8dd" },
+    "muted": { "$value": "#41544e" },
+    "onAccent": { "$value": "#ffffff" },
+    "onAccent2": { "$value": "#ffffff" },
+    "onDeep": { "$value": "#ffffff" },
+    "onDeepMuted": { "$value": "#bfd6de" },
+    "surface": { "$value": "#ebf0ef" }
+  },
+  "duration": {
+    "base": { "$value": "400ms" },
+    "fast": { "$value": "200ms" },
+    "slow": { "$value": "800ms" }
+  },
+  "font": {
+    "display": { "$value": ["Inter", "system-ui", "sans-serif"] },
+    "mono": { "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"] },
+    "sans": { "$value": ["Inter", "system-ui", "sans-serif"] }
+  },
+  "fontSize": {
+    "display": { "$value": "128px" },
+    "hero": { "$value": "360px" },
+    "heroMd": { "$value": "240px" },
+    "heroSm": { "$value": "160px" },
+    "lg": { "$value": "48px" },
+    "md": { "$value": "32px" },
+    "sm": { "$value": "28px" },
+    "title": { "$value": "96px" },
+    "xl": { "$value": "72px" }
+  },
+  "numeric": { "mode": { "$type": "string", "$value": "tabular" } },
+  "opacity": { "full": { "$value": 1 }, "medium": { "$value": 0.85 }, "subtle": { "$value": 0.7 } },
+  "radius": {
+    "full": { "$value": "9999px" },
+    "lg": { "$value": "12px" },
+    "md": { "$value": "8px" },
+    "sm": { "$value": "4px" },
+    "xl": { "$value": "20px" }
+  },
+  "shadow": {
+    "color": { "$type": "color", "$value": "#122019" },
+    "mode": { "$type": "string", "$value": "soft" }
+  },
+  "spacing": {
+    "lg": { "$value": "32px" },
+    "md": { "$value": "16px" },
+    "sm": { "$value": "8px" },
+    "xl": { "$value": "64px" },
+    "xs": { "$value": "4px" },
+    "xxl": { "$value": "96px" }
+  },
+  "status": {
+    "$type": "color",
+    "bad": { "$value": "#b4232f" },
+    "good": { "$value": "#17803f" },
+    "warn": { "$value": "#a45a00" }
+  },
+  "stroke": { "card": { "$value": "0px" }, "icon": { "$value": "1.75px" } }
+}