@anvpx/motion 0.0.0-stage → 0.1.0

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

package/shared/themes/playful-dark.json

@@ -0,0 +1,362 @@
+{
+  "$description": "playful: cream ground, candy colours, round shapes, hard shadows (dark), DTCG format",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "$value": "#0f2231"
+    },
+    "bgEnd": {
+      "$value": "#16304a"
+    },
+    "glow": {
+      "$value": "#4a2060"
+    },
+    "glow2": {
+      "$value": "#123852"
+    },
+    "surface": {
+      "$value": "#152c3f"
+    },
+    "card": {
+      "$value": "#1b3550"
+    },
+    "divider": {
+      "$value": "#2f5170"
+    },
+    "accentSoft": {
+      "$value": "#55214a"
+    },
+    "fg": {
+      "$value": "#fff4e6"
+    },
+    "muted": {
+      "$value": "#cdbce6"
+    },
+    "accent": {
+      "$value": "#ff6f9f"
+    },
+    "accent2": {
+      "$value": "#ffd45e"
+    },
+    "onAccent": {
+      "$value": "#2a0614"
+    },
+    "onAccent2": {
+      "$value": "#2a1d00"
+    },
+    "deep": {
+      "$value": "#2a2466"
+    },
+    "deepEnd": {
+      "$value": "#181048"
+    },
+    "onDeep": {
+      "$value": "#ffffff"
+    },
+    "onDeepMuted": {
+      "$value": "#dccbf7"
+    }
+  },
+  "chart": {
+    "1": {
+      "$value": "#ff6f9f"
+    },
+    "2": {
+      "$value": "#6fb8ff"
+    },
+    "3": {
+      "$value": "#ffd45e"
+    },
+    "4": {
+      "$value": "#5fe08a"
+    },
+    "5": {
+      "$value": "#b18cff"
+    },
+    "6": {
+      "$value": "#ff9a5a"
+    },
+    "7": {
+      "$value": "#4fd6d6"
+    },
+    "8": {
+      "$value": "#fff4e6"
+    },
+    "$type": "color"
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": ["Inter", "system-ui", "sans-serif"]
+    },
+    "display": {
+      "$value": ["Inter", "system-ui", "sans-serif"]
+    },
+    "mono": {
+      "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"]
+    }
+  },
+  "fontSize": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "28px"
+    },
+    "md": {
+      "$value": "32px"
+    },
+    "lg": {
+      "$value": "52px"
+    },
+    "xl": {
+      "$value": "76px"
+    },
+    "title": {
+      "$value": "104px"
+    },
+    "display": {
+      "$value": "136px"
+    },
+    "heroSm": {
+      "$value": "168px"
+    },
+    "heroMd": {
+      "$value": "252px"
+    },
+    "hero": {
+      "$value": "372px"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "xs": {
+      "$value": "4px"
+    },
+    "sm": {
+      "$value": "12px"
+    },
+    "md": {
+      "$value": "20px"
+    },
+    "lg": {
+      "$value": "40px"
+    },
+    "xl": {
+      "$value": "72px"
+    },
+    "xxl": {
+      "$value": "104px"
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "12px"
+    },
+    "md": {
+      "$value": "20px"
+    },
+    "lg": {
+      "$value": "28px"
+    },
+    "xl": {
+      "$value": "40px"
+    },
+    "full": {
+      "$value": "9999px"
+    }
+  },
+  "opacity": {
+    "$type": "number",
+    "subtle": {
+      "$value": 0.7
+    },
+    "medium": {
+      "$value": 0.85
+    },
+    "full": {
+      "$value": 1
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": {
+      "$value": "200ms"
+    },
+    "base": {
+      "$value": "400ms"
+    },
+    "slow": {
+      "$value": "700ms"
+    }
+  },
+  "status": {
+    "$type": "color",
+    "good": {
+      "$value": "#4ade80"
+    },
+    "warn": {
+      "$value": "#fbbf24"
+    },
+    "bad": {
+      "$value": "#fb7185"
+    }
+  },
+  "stroke": {
+    "$type": "dimension",
+    "card": {
+      "$value": "3px"
+    },
+    "icon": {
+      "$value": "2.5px"
+    }
+  },
+  "numeric": {
+    "mode": {
+      "$type": "string",
+      "$value": "proportional"
+    }
+  },
+  "shadow": {
+    "mode": {
+      "$type": "string",
+      "$value": "hard"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "#2a2466"
+    }
+  },
+  "$extensions": {
+    "motion-kit": {
+      "family": "playful",
+      "mode": "dark",
+      "pair": "playful-light",
+      "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"
+        }
+      ]
+    }
+  }
+}