@anvpx/motion 0.0.0-stage → 0.1.1

package/shared/themes/tech-light.json

@@ -0,0 +1,360 @@
+{
+  "$description": "tech: near-black with cyan and lime accents and mono labels (light), DTCG format",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "$value": "#f2f4f6"
+    },
+    "bgEnd": {
+      "$value": "#e4e8ec"
+    },
+    "glow": {
+      "$value": "#d6e4ea"
+    },
+    "glow2": {
+      "$value": "#e2e9d4"
+    },
+    "surface": {
+      "$value": "#eaeef1"
+    },
+    "card": {
+      "$value": "#ffffff"
+    },
+    "divider": {
+      "$value": "#c8d2da"
+    },
+    "accentSoft": {
+      "$value": "#d9e9ef"
+    },
+    "fg": {
+      "$value": "#0a1520"
+    },
+    "muted": {
+      "$value": "#40505f"
+    },
+    "accent": {
+      "$value": "#0a6b85"
+    },
+    "accent2": {
+      "$value": "#476f0c"
+    },
+    "onAccent": {
+      "$value": "#ffffff"
+    },
+    "onAccent2": {
+      "$value": "#ffffff"
+    },
+    "deep": {
+      "$value": "#0d2733"
+    },
+    "deepEnd": {
+      "$value": "#071820"
+    },
+    "onDeep": {
+      "$value": "#ffffff"
+    },
+    "onDeepMuted": {
+      "$value": "#b7d6e0"
+    }
+  },
+  "chart": {
+    "1": {
+      "$value": "#0a6b85"
+    },
+    "2": {
+      "$value": "#7f8d07"
+    },
+    "3": {
+      "$value": "#248f6f"
+    },
+    "4": {
+      "$value": "#6a221b"
+    },
+    "5": {
+      "$value": "#6a1b42"
+    },
+    "6": {
+      "$value": "#0d80f2"
+    },
+    "7": {
+      "$value": "#07137e"
+    },
+    "8": {
+      "$value": "#0d0df2"
+    },
+    "$type": "color"
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": ["Space Grotesk", "system-ui", "sans-serif"]
+    },
+    "display": {
+      "$value": ["Space Grotesk", "system-ui", "sans-serif"]
+    },
+    "mono": {
+      "$value": [
+        "JetBrains Mono",
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Consolas",
+        "monospace"
+      ]
+    }
+  },
+  "fontSize": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "28px"
+    },
+    "md": {
+      "$value": "32px"
+    },
+    "lg": {
+      "$value": "46px"
+    },
+    "xl": {
+      "$value": "68px"
+    },
+    "title": {
+      "$value": "92px"
+    },
+    "display": {
+      "$value": "120px"
+    },
+    "heroSm": {
+      "$value": "152px"
+    },
+    "heroMd": {
+      "$value": "224px"
+    },
+    "hero": {
+      "$value": "340px"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "xs": {
+      "$value": "4px"
+    },
+    "sm": {
+      "$value": "8px"
+    },
+    "md": {
+      "$value": "16px"
+    },
+    "lg": {
+      "$value": "32px"
+    },
+    "xl": {
+      "$value": "56px"
+    },
+    "xxl": {
+      "$value": "88px"
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "2px"
+    },
+    "md": {
+      "$value": "4px"
+    },
+    "lg": {
+      "$value": "8px"
+    },
+    "xl": {
+      "$value": "12px"
+    },
+    "full": {
+      "$value": "9999px"
+    }
+  },
+  "opacity": {
+    "$type": "number",
+    "subtle": {
+      "$value": 0.7
+    },
+    "medium": {
+      "$value": 0.85
+    },
+    "full": {
+      "$value": 1
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": {
+      "$value": "120ms"
+    },
+    "base": {
+      "$value": "250ms"
+    },
+    "slow": {
+      "$value": "500ms"
+    }
+  },
+  "status": {
+    "$type": "color",
+    "good": {
+      "$value": "#17803f"
+    },
+    "warn": {
+      "$value": "#a45a00"
+    },
+    "bad": {
+      "$value": "#b4232f"
+    }
+  },
+  "stroke": {
+    "$type": "dimension",
+    "card": {
+      "$value": "1px"
+    },
+    "icon": {
+      "$value": "1.5px"
+    }
+  },
+  "numeric": {
+    "mode": {
+      "$type": "string",
+      "$value": "tabular"
+    }
+  },
+  "$extensions": {
+    "motion-kit": {
+      "family": "tech",
+      "mode": "light",
+      "pair": "tech-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/warm-dark.json

@@ -0,0 +1,368 @@
+{
+  "$description": "warm: cream and terracotta with serif headings and static film grain (dark), DTCG format",
+  "color": {
+    "$type": "color",
+    "bg": {
+      "$value": "#1c130e"
+    },
+    "bgEnd": {
+      "$value": "#271b14"
+    },
+    "glow": {
+      "$value": "#553018"
+    },
+    "glow2": {
+      "$value": "#3d3818"
+    },
+    "surface": {
+      "$value": "#251a13"
+    },
+    "card": {
+      "$value": "#2d2018"
+    },
+    "divider": {
+      "$value": "#4a372a"
+    },
+    "accentSoft": {
+      "$value": "#512c1c"
+    },
+    "fg": {
+      "$value": "#f7ead8"
+    },
+    "muted": {
+      "$value": "#c9b098"
+    },
+    "accent": {
+      "$value": "#f29363"
+    },
+    "accent2": {
+      "$value": "#bcc982"
+    },
+    "onAccent": {
+      "$value": "#2a0f03"
+    },
+    "onAccent2": {
+      "$value": "#1b2203"
+    },
+    "deep": {
+      "$value": "#4a2414"
+    },
+    "deepEnd": {
+      "$value": "#2e140a"
+    },
+    "onDeep": {
+      "$value": "#fff7ea"
+    },
+    "onDeepMuted": {
+      "$value": "#ecd2ba"
+    }
+  },
+  "chart": {
+    "1": {
+      "$value": "#f29363"
+    },
+    "2": {
+      "$value": "#bcc982"
+    },
+    "3": {
+      "$value": "#7fb4d2"
+    },
+    "4": {
+      "$value": "#e6bf5a"
+    },
+    "5": {
+      "$value": "#d49ab8"
+    },
+    "6": {
+      "$value": "#62c8b4"
+    },
+    "7": {
+      "$value": "#f2748a"
+    },
+    "8": {
+      "$value": "#cdb8a2"
+    },
+    "$type": "color"
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": ["Inter", "system-ui", "sans-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": "50px"
+    },
+    "xl": {
+      "$value": "76px"
+    },
+    "title": {
+      "$value": "104px"
+    },
+    "display": {
+      "$value": "136px"
+    },
+    "heroSm": {
+      "$value": "168px"
+    },
+    "heroMd": {
+      "$value": "248px"
+    },
+    "hero": {
+      "$value": "364px"
+    }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "xs": {
+      "$value": "4px"
+    },
+    "sm": {
+      "$value": "8px"
+    },
+    "md": {
+      "$value": "16px"
+    },
+    "lg": {
+      "$value": "32px"
+    },
+    "xl": {
+      "$value": "64px"
+    },
+    "xxl": {
+      "$value": "100px"
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "sm": {
+      "$value": "6px"
+    },
+    "md": {
+      "$value": "12px"
+    },
+    "lg": {
+      "$value": "20px"
+    },
+    "xl": {
+      "$value": "32px"
+    },
+    "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": "#4ade80"
+    },
+    "warn": {
+      "$value": "#fbbf24"
+    },
+    "bad": {
+      "$value": "#fb7185"
+    }
+  },
+  "stroke": {
+    "$type": "dimension",
+    "card": {
+      "$value": "0px"
+    },
+    "icon": {
+      "$value": "1.75px"
+    }
+  },
+  "numeric": {
+    "mode": {
+      "$type": "string",
+      "$value": "proportional"
+    }
+  },
+  "shadow": {
+    "mode": {
+      "$type": "string",
+      "$value": "soft"
+    },
+    "color": {
+      "$type": "color",
+      "$value": "#f7ead8"
+    }
+  },
+  "grain": {
+    "opacity": {
+      "$type": "number",
+      "$value": 0.06
+    }
+  },
+  "$extensions": {
+    "motion-kit": {
+      "family": "warm",
+      "mode": "dark",
+      "pair": "warm-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"
+        }
+      ]
+    }
+  }
+}