chore: import upstream snapshot with attribution
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,90 @@
|
||||
# Airbnb Seed Deck — Design Notes
|
||||
|
||||
## Intent
|
||||
|
||||
A premium remake of Airbnb's 2009 seed pitch deck using current Airbnb brand language.
|
||||
The composition should feel warm, human, and tasteful — the opposite of a tech startup
|
||||
dark-mode deck. White canvas, generous space, soft coral accents. Three.js backgrounds
|
||||
are elegant mood-setters, never distracting.
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Token | Value | Use |
|
||||
| ---------------- | --------- | ------------------------------------ |
|
||||
| Rausch (primary) | `#FF385C` | CTAs, logo, accent bars, highlights |
|
||||
| Coral warm | `#FF5A5F` | Gradient partner to Rausch |
|
||||
| Babu dark | `#E61E4D` | Hover / emphasis gradient endpoint |
|
||||
| Off-white | `#FFFFFF` | Slide background on light slides |
|
||||
| Hof dark | `#222222` | Primary text; dramatic dark slide bg |
|
||||
| Foggy gray | `#717171` | Body copy, captions, secondary text |
|
||||
| Arches light | `#F7F7F7` | Card backgrounds, subtle panel fills |
|
||||
| Arches pink | `#FFF1F1` | Soft pink tint for card areas |
|
||||
|
||||
Do not introduce blue, purple, or green accents. The palette is warm coral + neutral.
|
||||
|
||||
## Typography
|
||||
|
||||
**Font**: "Nunito Sans" from Google Fonts — geometric, rounded, friendly.
|
||||
Fallback stack: `"Nunito Sans", "Montserrat", system-ui, sans-serif`.
|
||||
|
||||
| Role | Size (1920×1080) | Weight |
|
||||
| -------- | ---------------- | ----------------- |
|
||||
| Headline | 80–96px | 800 |
|
||||
| Subhead | 48px | 400 |
|
||||
| Body | 40–44px | 400–600 |
|
||||
| Eyebrow | 28–32px | 700, letterspaced |
|
||||
| Numbers | 96–120px | 900 |
|
||||
|
||||
Minimum readable size: 40px. Never go below that for audience-facing text.
|
||||
|
||||
## The Bélo Logo
|
||||
|
||||
The Bélo is Airbnb's universal belonging mark — a rounded loop that is simultaneously
|
||||
a heart, a location pin, and a letter A. Reproduce it as inline SVG in Rausch `#FF385C`.
|
||||
|
||||
Use on: cover slide (large, centered), corner mark on every slide (48×48px, top-left).
|
||||
Do NOT stretch or recolor the Bélo. Pair with lowercase "airbnb" wordmark in `#222222`.
|
||||
|
||||
## Layout Language
|
||||
|
||||
- **Generous whitespace**: 120px top/bottom padding, 160px left/right on 1920px canvas.
|
||||
- **Rounded corners**: 16–24px on all cards and stat blocks.
|
||||
- **Soft shadows**: `box-shadow: 0 4px 24px rgba(0,0,0,0.08)` for cards.
|
||||
- White or very light slide backgrounds for most slides (readable and clean).
|
||||
- Dark background (`#222222`) for: Cover (optional dramatic variant), Team, Ask.
|
||||
- Keep layouts left-aligned or centered — never right-heavy.
|
||||
|
||||
## Three.js Background Moods (per-slide)
|
||||
|
||||
Backgrounds run on a persistent WebGL canvas behind all slide content.
|
||||
All animations use a fixed seed (no `Math.random()`); seeded using a deterministic LCG.
|
||||
Particle counts, positions, and velocities are computed from seeded values.
|
||||
|
||||
| Slide | Mood |
|
||||
| ------------- | ------------------------------------------------------------------- |
|
||||
| cover | Soft floating coral particles, slow upward drift, warm pink fog |
|
||||
| problem | Desaturated gray particles, slower/heavier motion, cooler hue |
|
||||
| solution | Coral bloom: particles converge inward, warm pulse |
|
||||
| market | Low-poly globe outline with soft arc routes in coral, gentle rotate |
|
||||
| product | Clean minimal — very subtle grid of pale dots, nearly static |
|
||||
| business | Same as product — minimal |
|
||||
| adoption | Sparse warm nodes with thin connecting lines (network graph feel) |
|
||||
| competition | Cool gray minimal — positioning matrix backdrop |
|
||||
| team | Soft bokeh: large blurred coral orbs, slow parallax |
|
||||
| ask | Coral gradient swell — warm radial from center, slow pulse |
|
||||
| market-sizing | Same globe as market, camera zoomed in, arcs highlighted |
|
||||
|
||||
## Do's
|
||||
|
||||
- Large, single-stat slides for numbers ($2.1B, $500K) — let the number breathe.
|
||||
- Bottom-up math shown explicitly: trips × take-rate = revenue.
|
||||
- Complete-sentence headlines that make a claim, not a label.
|
||||
- SVG Bélo mark consistent across slides.
|
||||
|
||||
## Don'ts
|
||||
|
||||
- No dark purple, electric blue, neon green.
|
||||
- No hero imagery or stock photos (pure typography + Three.js + SVG).
|
||||
- No glassmorphism, frosted panels, or gamer-aesthetic effects.
|
||||
- No unseeded random values — all Three.js positions must be deterministic.
|
||||
- No font below 40px for any audience-visible text.
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Airbnb 2009 Seed Deck — Slideshow Demo</title>
|
||||
<script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
|
||||
<script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
NOTE: The <script type="application/hyperframes-slideshow+json"> island below is a
|
||||
COPY of the island inside index.html. This duplication is intentional: <hyperframes-slideshow>
|
||||
reads the island from its OWN innerHTML (not from the composition loaded by
|
||||
<hyperframes-player>). Keep this copy in sync with the island in index.html whenever
|
||||
slides, fragments, hotspots, or sequences change.
|
||||
-->
|
||||
<hyperframes-slideshow tabindex="0" sound style="display: block; position: relative; width: 100vw; height: 100vh">
|
||||
<hyperframes-player
|
||||
style="position: absolute; inset: 0"
|
||||
src="index.html"
|
||||
></hyperframes-player>
|
||||
|
||||
<script type="application/hyperframes-slideshow+json">
|
||||
{
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "cover",
|
||||
"notes": "Open with the tagline. Let the Bélo breathe. This is the belonging company."
|
||||
},
|
||||
{
|
||||
"sceneId": "problem",
|
||||
"notes": "Two problems, one at a time. Price first — hotels are expensive. Then connection.",
|
||||
"fragments": [9.3, 9.6]
|
||||
},
|
||||
{
|
||||
"sceneId": "solution",
|
||||
"notes": "Platform connects hosts and travelers. Belong anywhere. Three value props."
|
||||
},
|
||||
{
|
||||
"sceneId": "validation",
|
||||
"notes": "Couchsurfing proves demand: 660k members want this. Craigslist shows supply side."
|
||||
},
|
||||
{
|
||||
"sceneId": "market",
|
||||
"notes": "Bottom-up: trips × take-rate = $2.1B. Use the hotspot for the drill-down math.",
|
||||
"hotspots": [
|
||||
{
|
||||
"id": "mkt-hotspot",
|
||||
"label": "Show me the math",
|
||||
"target": "market-math-detail",
|
||||
"region": { "x": 70, "y": 80, "w": 25, "h": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"sceneId": "product",
|
||||
"notes": "Three clicks: Search, Book, Travel. Show the booking flow simplicity."
|
||||
},
|
||||
{
|
||||
"sceneId": "business",
|
||||
"notes": "10% commission. At 80k transactions × $26 avg nightly take = $2.1M revenue."
|
||||
},
|
||||
{
|
||||
"sceneId": "adoption",
|
||||
"notes": "Events, conferences, Craigslist cross-posting, partnerships. Grass-roots growth."
|
||||
},
|
||||
{
|
||||
"sceneId": "competition",
|
||||
"notes": "Matrix: cheapest + online + transaction. Airbnb is the only one that hits all three."
|
||||
},
|
||||
{
|
||||
"sceneId": "team",
|
||||
"notes": "Brian (CEO/design), Joe (design), Nate (engineering). Domain depth: housing + tech."
|
||||
},
|
||||
{
|
||||
"sceneId": "ask",
|
||||
"notes": "Raising $500K. 12 months runway. Target: 80K transactions ≈ $2M revenue."
|
||||
}
|
||||
],
|
||||
"slideSequences": [
|
||||
{
|
||||
"id": "market-math-detail",
|
||||
"label": "Market sizing methodology",
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "market-sizing",
|
||||
"notes": "Bottom-up drill: global trips × budget share × online booking rate × take-rate = $2.1B."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</hyperframes-slideshow>
|
||||
|
||||
<!--
|
||||
Sound effects play HERE, in the parent document. The composition (loaded in the
|
||||
player's iframe) detects slide/fragment/branch transitions and posts
|
||||
{ type: 'hf-sfx', name } to the parent. Audio must live in the frame that
|
||||
receives the user's gesture (the parent) — an iframe without its own user
|
||||
activation is autoplay-blocked. The mp3s are in sfx/ next to this file.
|
||||
|
||||
Mute state is owned by <hyperframes-slideshow sound>. Listen for 'hf-sound'
|
||||
events (or read slideshow.muted / data-hf-muted) to skip playback when muted.
|
||||
-->
|
||||
<script>
|
||||
(function () {
|
||||
var clips = {
|
||||
advance: new Audio("sfx/advance.mp3"),
|
||||
fragment: new Audio("sfx/fragment.mp3"),
|
||||
"branch-enter": new Audio("sfx/branch-enter.mp3"),
|
||||
back: new Audio("sfx/back.mp3"),
|
||||
};
|
||||
clips.advance.volume = 0.45;
|
||||
clips.fragment.volume = 0.4;
|
||||
clips["branch-enter"].volume = 0.4;
|
||||
clips.back.volume = 0.4;
|
||||
for (var k in clips) clips[k].preload = "auto";
|
||||
|
||||
// Track mute state: updated via 'hf-sound' events from the slideshow chrome.
|
||||
var muted = false;
|
||||
var slideshow = document.querySelector("hyperframes-slideshow");
|
||||
if (slideshow) {
|
||||
slideshow.addEventListener("hf-sound", function (e) {
|
||||
muted = e.detail && e.detail.muted === true;
|
||||
});
|
||||
}
|
||||
|
||||
var unlocked = false;
|
||||
function unlock() {
|
||||
if (unlocked) return;
|
||||
unlocked = true;
|
||||
// Prime each clip (play muted then reset) so later plays are instant + allowed.
|
||||
Object.keys(clips).forEach(function (name) {
|
||||
var el = clips[name];
|
||||
var v = el.volume;
|
||||
el.volume = 0;
|
||||
el.play()
|
||||
.then(function () {
|
||||
el.pause();
|
||||
el.currentTime = 0;
|
||||
el.volume = v;
|
||||
})
|
||||
.catch(function () {
|
||||
el.volume = v;
|
||||
});
|
||||
});
|
||||
}
|
||||
window.addEventListener("keydown", unlock, true);
|
||||
window.addEventListener("pointerdown", unlock, true);
|
||||
window.addEventListener("click", unlock, true);
|
||||
|
||||
window.addEventListener("message", function (e) {
|
||||
var d = e.data;
|
||||
if (!d || d.type !== "hf-sfx") return;
|
||||
// Skip playback when muted — the component owns mute state.
|
||||
if (muted) return;
|
||||
var el = clips[d.name];
|
||||
if (!el || !unlocked) return;
|
||||
try {
|
||||
el.currentTime = 0;
|
||||
el.play().catch(function () {});
|
||||
} catch (err) {
|
||||
/* ignore */
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1577
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+56
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Decision Tree</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="decision-tree-comp"
|
||||
data-composition-id="decision-tree"
|
||||
data-composition-src="compositions/decision_tree.html"
|
||||
data-start="0"
|
||||
data-duration="10"
|
||||
data-track-index="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "decision-tree",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Decision Tree",
|
||||
"description": "Animated flowchart with branching paths",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 15,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/decision_tree.html",
|
||||
"target": "compositions/decision_tree.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Kinetic Type</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,900;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #0a0a0f;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<!--
|
||||
A-Roll video. Media is only seeked/decoded when it is a DIRECT child of
|
||||
the host root, so the footage lives here (not inside the sub-composition
|
||||
template) and its per-scene reveal is driven on the main timeline below.
|
||||
-->
|
||||
<video
|
||||
id="a-roll-video"
|
||||
class="clip"
|
||||
src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/67cf5a05_e134ec83a57042b38776c952da595870.mp4"
|
||||
data-start="0"
|
||||
data-duration="14.72"
|
||||
data-track-index="0"
|
||||
data-has-audio="true"
|
||||
playsinline
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
"
|
||||
></video>
|
||||
<div
|
||||
id="graphics-layer"
|
||||
data-composition-id="main-graphics"
|
||||
data-composition-src="compositions/main-graphics.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
style="position: absolute; inset: 0; z-index: 1"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// The A-roll <video> is a host-root element, so the sub-composition
|
||||
// timeline cannot reach it. Drive its reveal here on the main timeline at
|
||||
// global time (the graphics sub-comp starts at 0, so scene-local == global).
|
||||
//
|
||||
// COUPLING: the reveal/hide times below (2.2 / 11.7 / 13.5) are hand-tuned
|
||||
// to the graphics-layer sub-composition's scene boundaries and assume it is
|
||||
// mounted at data-start="0". If you re-time the sub-composition's scenes or
|
||||
// change its data-start, these absolute times drift out of alignment and
|
||||
// must be updated to match the new scene boundaries.
|
||||
tl.set("#a-roll-video", { opacity: 0 }, 0);
|
||||
tl.set("#a-roll-video", { opacity: 1 }, 2.2); // reveal after the Scene 1 white wipe
|
||||
tl.to("#a-roll-video", { opacity: 0, duration: 0.4 }, 11.7); // hide for the Wes Anderson scene
|
||||
tl.set("#a-roll-video", { opacity: 1 }, 13.5); // back for the Vignelli outro
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "kinetic-type",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Kinetic Type",
|
||||
"description": "Bold kinetic typography promo",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 15,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/main-graphics.html",
|
||||
"target": "compositions/main-graphics.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+572
@@ -0,0 +1,572 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Motion Blur — Velocity Showcase</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #06060a;
|
||||
}
|
||||
|
||||
#comp {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "SF Mono", ui-monospace, monospace;
|
||||
background: #06060a;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 0 72px 20px;
|
||||
border-bottom: 1px solid #0f0f18;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: #1e1e2a;
|
||||
}
|
||||
.header-sub {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #14141c;
|
||||
}
|
||||
|
||||
/* Each group = one speed level, containing a shape row + text row */
|
||||
.group {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 184px; /* 72 + 16 + 72 + 24 bottom */
|
||||
}
|
||||
|
||||
/* Group bottom separator */
|
||||
.group::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 72px;
|
||||
right: 72px;
|
||||
height: 1px;
|
||||
background: #0d0d15;
|
||||
}
|
||||
|
||||
/* Duration label — left, spanning both rows */
|
||||
.dur {
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
top: 0;
|
||||
width: 90px;
|
||||
height: 160px; /* 72+16+72 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.dur-num {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
.dur-unit {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: #252532;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Row-type hint ("shape" / "text") — right of dur label */
|
||||
.row-hint {
|
||||
position: absolute;
|
||||
left: 176px;
|
||||
width: 44px;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #161620;
|
||||
}
|
||||
|
||||
/* Speed label — right, spanning both rows */
|
||||
.spd {
|
||||
position: absolute;
|
||||
right: 72px;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.spd-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: #181822;
|
||||
}
|
||||
|
||||
/* Animated elements — both types live at left:0, GSAP drives x */
|
||||
.pill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
height: 72px;
|
||||
border-radius: 36px;
|
||||
will-change: transform, filter;
|
||||
}
|
||||
|
||||
.word {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 88px; /* 72 + 16 gap */
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
white-space: nowrap;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
will-change: transform, filter;
|
||||
}
|
||||
|
||||
/* Inner divider between shape row and text row */
|
||||
.inner-div {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
right: 200px;
|
||||
top: 80px; /* 72 + 8 */
|
||||
height: 1px;
|
||||
background: #0a0a12;
|
||||
}
|
||||
|
||||
/* Track guide lines */
|
||||
.track-a,
|
||||
.track-b {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
right: 200px;
|
||||
height: 1px;
|
||||
background: #0c0c14;
|
||||
}
|
||||
.track-a {
|
||||
top: 35px;
|
||||
} /* center of shape row */
|
||||
.track-b {
|
||||
top: 123px;
|
||||
} /* 88 + 35 = center of text row */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="comp"
|
||||
data-composition-id="motion-blur-example"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="4"
|
||||
>
|
||||
<div class="header" data-layout-ignore>
|
||||
<span class="header-title">Motion Blur — Velocity Showcase</span>
|
||||
<span class="header-sub">feGaussianBlur + scaleX · blur ∝ velocity</span>
|
||||
</div>
|
||||
|
||||
<!-- Group 1: 3.0s slow — top: 80 -->
|
||||
<div class="group" style="top: 80px">
|
||||
<div class="dur" data-layout-ignore>
|
||||
<span class="dur-num">3.0</span><span class="dur-unit">seconds</span>
|
||||
</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 0">shape</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 88px">text</div>
|
||||
<div class="track-a"></div>
|
||||
<div class="inner-div"></div>
|
||||
<div class="track-b"></div>
|
||||
<div
|
||||
class="pill"
|
||||
id="s1"
|
||||
style="
|
||||
background: linear-gradient(135deg, #60a5fa, #2563eb);
|
||||
box-shadow: 0 0 32px rgba(96, 165, 250, 0.18);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="word"
|
||||
id="t1"
|
||||
style="color: #3b82f6; text-shadow: 0 0 40px rgba(96, 165, 250, 0.3)"
|
||||
>
|
||||
DRIFT
|
||||
</div>
|
||||
<div class="spd" data-layout-ignore><span class="spd-label">slow</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Group 2: 1.5s medium — top: 264 -->
|
||||
<div class="group" style="top: 264px">
|
||||
<div class="dur" data-layout-ignore>
|
||||
<span class="dur-num">1.5</span><span class="dur-unit">seconds</span>
|
||||
</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 0">shape</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 88px">text</div>
|
||||
<div class="track-a"></div>
|
||||
<div class="inner-div"></div>
|
||||
<div class="track-b"></div>
|
||||
<div
|
||||
class="pill"
|
||||
id="s2"
|
||||
style="
|
||||
background: linear-gradient(135deg, #34d399, #059669);
|
||||
box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="word"
|
||||
id="t2"
|
||||
style="color: #10b981; text-shadow: 0 0 40px rgba(52, 211, 153, 0.3)"
|
||||
>
|
||||
GLIDE
|
||||
</div>
|
||||
<div class="spd" data-layout-ignore><span class="spd-label">medium</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Group 3: 0.7s fast — top: 448 -->
|
||||
<div class="group" style="top: 448px">
|
||||
<div class="dur" data-layout-ignore>
|
||||
<span class="dur-num">0.7</span><span class="dur-unit">seconds</span>
|
||||
</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 0">shape</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 88px">text</div>
|
||||
<div class="track-a"></div>
|
||||
<div class="inner-div"></div>
|
||||
<div class="track-b"></div>
|
||||
<div
|
||||
class="pill"
|
||||
id="s3"
|
||||
style="
|
||||
background: linear-gradient(135deg, #c084fc, #7c3aed);
|
||||
box-shadow: 0 0 32px rgba(192, 132, 252, 0.18);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="word"
|
||||
id="t3"
|
||||
style="color: #a855f7; text-shadow: 0 0 40px rgba(192, 132, 252, 0.3)"
|
||||
>
|
||||
RUSH
|
||||
</div>
|
||||
<div class="spd" data-layout-ignore><span class="spd-label">fast</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Group 4: 0.35s faster — top: 632 -->
|
||||
<div class="group" style="top: 632px">
|
||||
<div class="dur" data-layout-ignore>
|
||||
<span class="dur-num">0.35</span><span class="dur-unit">seconds</span>
|
||||
</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 0">shape</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 88px">text</div>
|
||||
<div class="track-a"></div>
|
||||
<div class="inner-div"></div>
|
||||
<div class="track-b"></div>
|
||||
<div
|
||||
class="pill"
|
||||
id="s4"
|
||||
style="
|
||||
background: linear-gradient(135deg, #fb923c, #ea580c);
|
||||
box-shadow: 0 0 32px rgba(251, 146, 60, 0.18);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="word"
|
||||
id="t4"
|
||||
style="color: #f97316; text-shadow: 0 0 40px rgba(251, 146, 60, 0.3)"
|
||||
>
|
||||
BLAST
|
||||
</div>
|
||||
<div class="spd" data-layout-ignore><span class="spd-label">faster</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Group 5: 0.2s extreme — top: 816 -->
|
||||
<div class="group" style="top: 816px">
|
||||
<div class="dur" data-layout-ignore>
|
||||
<span class="dur-num">0.2</span><span class="dur-unit">seconds</span>
|
||||
</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 0">shape</div>
|
||||
<div class="row-hint" data-layout-ignore style="top: 88px">text</div>
|
||||
<div class="track-a"></div>
|
||||
<div class="inner-div"></div>
|
||||
<div class="track-b"></div>
|
||||
<div
|
||||
class="pill"
|
||||
id="s5"
|
||||
style="
|
||||
background: linear-gradient(135deg, #f87171, #dc2626);
|
||||
box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
class="word"
|
||||
id="t5"
|
||||
style="color: #ef4444; text-shadow: 0 0 40px rgba(248, 113, 113, 0.3)"
|
||||
>
|
||||
WARP
|
||||
</div>
|
||||
<div class="spd" data-layout-ignore><span class="spd-label">extreme</span></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
/* ── attachMotionBlur ─────────────────────────────────────── */
|
||||
if (!window._hfMbUid) window._hfMbUid = 0;
|
||||
var ns = "http://www.w3.org/2000/svg";
|
||||
|
||||
function attachMotionBlur(selector, tl, opts) {
|
||||
opts = opts || {};
|
||||
var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
|
||||
var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
|
||||
var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
|
||||
var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
|
||||
var axis = opts.axis || "both";
|
||||
|
||||
var items = Array.isArray(selector) ? selector : [selector];
|
||||
var targets = items.reduce(function (acc, s) {
|
||||
if (typeof s === "string") {
|
||||
document.querySelectorAll(s).forEach(function (el) {
|
||||
acc.push(el);
|
||||
});
|
||||
} else if (s instanceof Element) {
|
||||
acc.push(s);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
// Ghost trail: copies placed only behind the element → inherently one-sided.
|
||||
// Top layer: small Gaussian at current position so element looks blurry, not sharp.
|
||||
var GHOST_CFG = [
|
||||
{ frac: 0.25, slope: 0.55 },
|
||||
{ frac: 0.55, slope: 0.28 },
|
||||
{ frac: 1.0, slope: 0.1 },
|
||||
];
|
||||
|
||||
var state = targets.map(function (el) {
|
||||
var uid = "hf-mb-" + window._hfMbUid++;
|
||||
var svg = document.createElementNS(ns, "svg");
|
||||
svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
|
||||
|
||||
var filter = document.createElementNS(ns, "filter");
|
||||
filter.id = uid;
|
||||
filter.setAttribute("x", "-110%");
|
||||
filter.setAttribute("y", "-25%");
|
||||
filter.setAttribute("width", "260%");
|
||||
filter.setAttribute("height", "150%");
|
||||
|
||||
var ghosts = GHOST_CFG.map(function (cfg, gi) {
|
||||
var feOff = document.createElementNS(ns, "feOffset");
|
||||
feOff.setAttribute("in", "SourceGraphic");
|
||||
feOff.setAttribute("dx", "0");
|
||||
feOff.setAttribute("dy", "0");
|
||||
feOff.setAttribute("result", "go" + gi);
|
||||
|
||||
var feGB = document.createElementNS(ns, "feGaussianBlur");
|
||||
feGB.setAttribute("in", "go" + gi);
|
||||
feGB.setAttribute("stdDeviation", "0 0");
|
||||
feGB.setAttribute("result", "gb" + gi);
|
||||
|
||||
var feCT = document.createElementNS(ns, "feComponentTransfer");
|
||||
feCT.setAttribute("in", "gb" + gi);
|
||||
feCT.setAttribute("result", "gf" + gi);
|
||||
var feFuncA = document.createElementNS(ns, "feFuncA");
|
||||
feFuncA.setAttribute("type", "linear");
|
||||
feFuncA.setAttribute("slope", String(cfg.slope));
|
||||
feCT.appendChild(feFuncA);
|
||||
|
||||
filter.appendChild(feOff);
|
||||
filter.appendChild(feGB);
|
||||
filter.appendChild(feCT);
|
||||
return { feOff: feOff, feGB: feGB, frac: cfg.frac };
|
||||
});
|
||||
|
||||
var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
|
||||
feTopBlur.setAttribute("in", "SourceGraphic");
|
||||
feTopBlur.setAttribute("stdDeviation", "0 0");
|
||||
feTopBlur.setAttribute("result", "top");
|
||||
filter.appendChild(feTopBlur);
|
||||
|
||||
var feMerge = document.createElementNS(ns, "feMerge");
|
||||
for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
|
||||
var mn = document.createElementNS(ns, "feMergeNode");
|
||||
mn.setAttribute("in", "gf" + mi);
|
||||
feMerge.appendChild(mn);
|
||||
}
|
||||
var mnTop = document.createElementNS(ns, "feMergeNode");
|
||||
mnTop.setAttribute("in", "top");
|
||||
feMerge.appendChild(mnTop);
|
||||
filter.appendChild(feMerge);
|
||||
|
||||
svg.appendChild(filter);
|
||||
document.body.appendChild(svg);
|
||||
|
||||
return {
|
||||
el: el,
|
||||
ghosts: ghosts,
|
||||
feTopBlur: feTopBlur,
|
||||
filterId: uid,
|
||||
prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
|
||||
prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
|
||||
prevTime: tl.time(),
|
||||
};
|
||||
});
|
||||
|
||||
// tl.eventCallback("onUpdate") is not available in the HyperFrames renderer —
|
||||
// the runtime proxies the timeline. Tween onUpdate fires on every seek instead.
|
||||
var _proxy = { t: 0 };
|
||||
tl.to(
|
||||
_proxy,
|
||||
{
|
||||
t: 1,
|
||||
duration: Math.max(tl.duration(), 0.1),
|
||||
ease: "none",
|
||||
onUpdate: function () {
|
||||
var time = tl.time();
|
||||
|
||||
state.forEach(function (s) {
|
||||
var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
|
||||
var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
|
||||
var dt = time - s.prevTime;
|
||||
|
||||
if (dt > 0.0005) {
|
||||
var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
|
||||
var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
|
||||
|
||||
var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
|
||||
var by = Math.min(Math.abs(vy) * blurScale, blurMax);
|
||||
var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
|
||||
var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
|
||||
var active = bx > 0.3 || by > 0.3;
|
||||
|
||||
if (active) {
|
||||
s.el.style.filter = "url(#" + s.filterId + ")";
|
||||
s.ghosts.forEach(function (g) {
|
||||
var dx =
|
||||
axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
|
||||
var dy =
|
||||
axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
|
||||
g.feOff.setAttribute("dx", dx.toFixed(2));
|
||||
g.feOff.setAttribute("dy", dy.toFixed(2));
|
||||
var gbx =
|
||||
axis !== "y"
|
||||
? (bxFinal * g.frac * 0.5).toFixed(2)
|
||||
: Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
|
||||
var gby =
|
||||
axis !== "x"
|
||||
? (byFinal * g.frac * 0.5).toFixed(2)
|
||||
: Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
|
||||
g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
|
||||
});
|
||||
s.feTopBlur.setAttribute(
|
||||
"stdDeviation",
|
||||
(bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
|
||||
);
|
||||
if (stretchMax > 0) {
|
||||
var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
|
||||
var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
|
||||
var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
|
||||
var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
|
||||
gsap.set(s.el, {
|
||||
scaleX: axis !== "y" ? sx : 1,
|
||||
scaleY: axis !== "x" ? sy : 1,
|
||||
transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
s.el.style.filter = "";
|
||||
s.ghosts.forEach(function (g) {
|
||||
g.feOff.setAttribute("dx", "0");
|
||||
g.feOff.setAttribute("dy", "0");
|
||||
g.feGB.setAttribute("stdDeviation", "0 0");
|
||||
});
|
||||
s.feTopBlur.setAttribute("stdDeviation", "0 0");
|
||||
if (stretchMax > 0) {
|
||||
gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
|
||||
}
|
||||
}
|
||||
|
||||
s.prevX = x;
|
||||
s.prevY = y;
|
||||
s.prevTime = time;
|
||||
} else if (dt < -0.0005) {
|
||||
s.el.style.filter = "";
|
||||
s.ghosts.forEach(function (g) {
|
||||
g.feOff.setAttribute("dx", "0");
|
||||
g.feOff.setAttribute("dy", "0");
|
||||
g.feGB.setAttribute("stdDeviation", "0 0");
|
||||
});
|
||||
s.feTopBlur.setAttribute("stdDeviation", "0 0");
|
||||
if (stretchMax > 0) {
|
||||
gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
|
||||
}
|
||||
s.prevX = x;
|
||||
s.prevY = y;
|
||||
s.prevTime = time;
|
||||
}
|
||||
// dt ≈ 0: runtime double-fires — skip.
|
||||
});
|
||||
},
|
||||
},
|
||||
0,
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Timeline ─────────────────────────────────────────────── */
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
// All elements start at x=-400 (off-screen left), travel to x=1920 (off-screen right).
|
||||
// Shape + text in each group share the same duration → same velocity → same blur.
|
||||
gsap.set(["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"], {
|
||||
x: -400,
|
||||
});
|
||||
|
||||
tl.to(["#s1", "#t1"], { x: 1640, duration: 3.0, ease: "power3.inOut" }, 0);
|
||||
tl.to(["#s2", "#t2"], { x: 1640, duration: 1.5, ease: "power3.inOut" }, 0);
|
||||
tl.to(["#s3", "#t3"], { x: 1640, duration: 0.7, ease: "power3.inOut" }, 0);
|
||||
tl.to(["#s4", "#t4"], { x: 1640, duration: 0.35, ease: "power3.inOut" }, 0);
|
||||
tl.to(["#s5", "#t5"], { x: 1640, duration: 0.2, ease: "power3.inOut" }, 0);
|
||||
|
||||
tl.set(document.body, {}, 4);
|
||||
|
||||
attachMotionBlur(
|
||||
["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"],
|
||||
tl,
|
||||
{ axis: "x", blurMax: 80, stretchMax: 0 },
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["motion-blur-example"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>NYT Graph</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #faf9f6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="nyt-chart-comp"
|
||||
data-composition-id="nyt-chart"
|
||||
data-composition-src="compositions/nyt-chart.html"
|
||||
data-start="0"
|
||||
data-duration="15"
|
||||
data-track-index="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "nyt-graph",
|
||||
"type": "hyperframes:example",
|
||||
"title": "NYT Graph",
|
||||
"description": "Animated data chart in print editorial style",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 15,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/nyt-chart.html",
|
||||
"target": "compositions/nyt-chart.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hyperframes - Play Mode</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bg-comp,
|
||||
#aroll-comp,
|
||||
#intro-comp,
|
||||
#stats-comp,
|
||||
#captions-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bg-comp {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#aroll-comp {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#intro-comp {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#stats-comp {
|
||||
z-index: 150;
|
||||
}
|
||||
|
||||
#captions-comp {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#aroll-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#short_mag_cut {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
border: 8px solid #ffffff;
|
||||
}
|
||||
|
||||
#background-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-video"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<!-- Background Layer Composition -->
|
||||
<div
|
||||
id="bg-comp"
|
||||
data-composition-id="background"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="1"
|
||||
>
|
||||
<div id="background-layer"></div>
|
||||
<style>
|
||||
#background-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const bg = document.getElementById("background-layer");
|
||||
// Sync with A-roll framing 3 (4.659s)
|
||||
tl.to(bg, { backgroundColor: "#0057FF", duration: 0.5 }, 4.659);
|
||||
// Sync with A-roll framing 4 (8.88s)
|
||||
tl.to(bg, { backgroundColor: "#FFFFFF", duration: 0.5 }, 8.88);
|
||||
window.__timelines["background"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-roll Layer Composition -->
|
||||
<div
|
||||
id="aroll-comp"
|
||||
data-composition-id="aroll-layer"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="10"
|
||||
>
|
||||
<div id="aroll-container">
|
||||
<video
|
||||
id="short_mag_cut"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="1"
|
||||
style="width: 100%; height: auto"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
<style>
|
||||
#aroll-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#short_mag_cut {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
border: 8px solid #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const container = document.getElementById("aroll-container");
|
||||
gsap.set(container, { y: -1100, scale: 0.8 });
|
||||
tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
|
||||
tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
|
||||
tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
|
||||
tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
|
||||
window.__timelines["aroll-layer"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Compositions -->
|
||||
<div
|
||||
id="intro-comp"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="100"
|
||||
></div>
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="200"
|
||||
></div>
|
||||
<div
|
||||
id="stats-comp"
|
||||
data-composition-id="stats"
|
||||
data-composition-src="compositions/stats.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-track-index="150"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
window.__timelines["main-video"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "play-mode",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Play Mode",
|
||||
"description": "Playful elastic animations",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 10,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/captions.html",
|
||||
"target": "compositions/captions.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/intro.html",
|
||||
"target": "compositions/intro.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/stats.html",
|
||||
"target": "compositions/stats.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<defs>
|
||||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.2"/>
|
||||
</filter>
|
||||
<g id="cursor-arrow">
|
||||
<path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="#000" stroke-width="1.5" stroke-linejoin="round" filter="url(#shadow)"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<rect width="1920" height="1080" fill="#f0f0f0" />
|
||||
|
||||
<g id="cursor-designer" transform="translate(600, 500)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="90" height="24" rx="4" fill="#A259FF"/>
|
||||
<text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Designer</text>
|
||||
</g>
|
||||
|
||||
<g id="cursor-engineer" transform="translate(900, 400)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="90" height="24" rx="4" fill="#1ABCFE"/>
|
||||
<text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Engineer</text>
|
||||
</g>
|
||||
|
||||
<g id="cursor-pm" transform="translate(1200, 600)">
|
||||
<use href="#cursor-arrow" x="0" y="0"/>
|
||||
<rect x="16" y="20" width="50" height="24" rx="4" fill="#F24E1E"/>
|
||||
<text x="41" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">PM</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<g transform="translate(880, 420)">
|
||||
<!-- Top-left: rounded square -->
|
||||
<path id="logo-tl" d="M 40 0 A 40 40 0 0 0 0 40 L 0 80 A 40 40 0 0 0 40 120 A 40 40 0 0 0 80 80 L 80 40 A 40 40 0 0 0 40 0 Z" fill="#F24E1E" />
|
||||
|
||||
<!-- Top-right: rounded square -->
|
||||
<path id="logo-tr" d="M 120 0 A 40 40 0 0 0 80 40 L 80 80 A 40 40 0 0 0 120 120 A 40 40 0 0 0 160 80 L 160 40 A 40 40 0 0 0 120 0 Z" fill="#A259FF" />
|
||||
|
||||
<!-- Bottom-left: half-circle -->
|
||||
<path id="logo-bl" d="M 0 120 A 40 120 0 0 0 80 120 Z" fill="#1ABCFE" />
|
||||
|
||||
<!-- Bottom-right: half-circle -->
|
||||
<path id="logo-br" d="M 80 120 A 40 120 0 0 0 160 120 Z" fill="#0ACF83" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 771 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
|
||||
<rect id="pill-tl" x="870" y="410" width="80" height="120" rx="40" fill="#F24E1E" />
|
||||
<rect id="pill-tr" x="970" y="410" width="80" height="120" rx="40" fill="#A259FF" />
|
||||
<rect id="pill-bl" x="870" y="550" width="80" height="120" rx="40" fill="#1ABCFE" />
|
||||
<rect id="pill-br" x="970" y="550" width="80" height="120" rx="40" fill="#0ACF83" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 446 B |
+158
@@ -0,0 +1,158 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Product Promo</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=block"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #0a0a0f;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.scene {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.caption-text-wrapper {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.caption-line {
|
||||
color: white;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="main"
|
||||
data-start="0"
|
||||
data-duration="20"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<!-- Scene 1: Logo Intro -->
|
||||
<div
|
||||
id="scene-1"
|
||||
class="scene"
|
||||
data-composition-id="scene1-logo-intro"
|
||||
data-composition-src="compositions/scene1-logo-intro.html"
|
||||
data-start="0"
|
||||
data-duration="1.5"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Scene 2-4: Continuous Canvas -->
|
||||
<div
|
||||
id="scene-2-4"
|
||||
class="scene"
|
||||
data-composition-id="scene2-4-canvas"
|
||||
data-composition-src="compositions/scene2-4-canvas.html"
|
||||
data-start="1.5"
|
||||
data-duration="12.5"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Scene 5: Logo Outro -->
|
||||
<div
|
||||
id="scene-5"
|
||||
class="scene"
|
||||
data-composition-id="scene5-logo-outro"
|
||||
data-composition-src="compositions/scene5-logo-outro.html"
|
||||
data-start="14"
|
||||
data-duration="6"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
|
||||
<!-- Captions -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-start="1.5"
|
||||
data-duration="12.5"
|
||||
data-track-index="2"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div class="caption-text-wrapper">
|
||||
<div id="caption-text" class="caption-line">Starting with a blank canvas.</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const text = document.querySelector("#caption-text");
|
||||
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 3.2);
|
||||
tl.set(text, { innerText: "Three cursors. One file. Zero meetings.", y: 40 }, 3.5);
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 3.5);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 7.7);
|
||||
tl.set(
|
||||
text,
|
||||
{ innerText: "Components in. Feedback resolved. No one waited.", y: 40 },
|
||||
8.0,
|
||||
);
|
||||
tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 8.0);
|
||||
tl.to(text, { opacity: 0, y: -20, duration: 0.4, ease: "power3.in" }, 12.1);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["captions"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const mainTl = gsap.timeline({ paused: true });
|
||||
|
||||
mainTl.set("#scene-2-4", { scale: 1, filter: "blur(0px)" }, 1.5);
|
||||
mainTl.to(
|
||||
"#scene-2-4",
|
||||
{ duration: 0.25, scale: 0.94, filter: "blur(6px)", opacity: 0, ease: "power2.in" },
|
||||
13.75,
|
||||
);
|
||||
|
||||
window.__timelines["main"] = mainTl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "product-promo",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Product Promo",
|
||||
"description": "Multi-scene product showcase with SVG assets",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 20,
|
||||
"files": [
|
||||
{
|
||||
"path": "assets/figma-cursors.svg",
|
||||
"target": "assets/figma-cursors.svg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/figma-logo-pieces.svg",
|
||||
"target": "assets/figma-logo-pieces.svg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/figma-logo-pills.svg",
|
||||
"target": "assets/figma-logo-pills.svg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "compositions/scene1-logo-intro.html",
|
||||
"target": "compositions/scene1-logo-intro.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/scene2-4-canvas.html",
|
||||
"target": "compositions/scene2-4-canvas.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/scene5-logo-outro.html",
|
||||
"target": "compositions/scene5-logo-outro.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FlowDesk Pitch — Slideshow Demo</title>
|
||||
<script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
|
||||
<script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
NOTE: The <script type="application/hyperframes-slideshow+json"> island
|
||||
below is a COPY of the island inside index.html. This duplication is a
|
||||
current workaround: <hyperframes-slideshow> reads the island from its OWN
|
||||
innerHTML (not from the composition loaded by <hyperframes-player>). In a
|
||||
future version the component should read the island from the composition
|
||||
directly. Keep this copy in sync with the one in index.html.
|
||||
-->
|
||||
<hyperframes-slideshow tabindex="0" style="display: block; position: relative; width: 100vw; height: 100vh">
|
||||
<hyperframes-player
|
||||
style="position: absolute; inset: 0"
|
||||
src="index.html"
|
||||
></hyperframes-player>
|
||||
|
||||
<script type="application/hyperframes-slideshow+json">
|
||||
{
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "cover",
|
||||
"notes": "Open cold with the tagline. Let it breathe — no build, just the claim."
|
||||
},
|
||||
{
|
||||
"sceneId": "problem",
|
||||
"notes": "Walk through each pain point one fragment at a time. The 14h/week stat is the anchor.",
|
||||
"fragments": [8.3, 8.6, 8.9],
|
||||
"hotspots": []
|
||||
},
|
||||
{
|
||||
"sceneId": "solution",
|
||||
"notes": "One sentence. The product kills the three pains from the previous slide."
|
||||
},
|
||||
{
|
||||
"sceneId": "why-now",
|
||||
"notes": "Three macro tailwinds — remote-first freelancing, API economy, AI underwriting."
|
||||
},
|
||||
{
|
||||
"sceneId": "market",
|
||||
"notes": "Bottom-up math only. 480k agencies × $4,200 ACV = $2.0B SAM. Use hotspot for methodology Q.",
|
||||
"hotspots": [
|
||||
{
|
||||
"id": "mkt-hotspot",
|
||||
"label": "How did you size this market?",
|
||||
"target": "market-sizing-drill",
|
||||
"region": { "x": 55, "y": 60, "w": 40, "h": 28 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"sceneId": "product",
|
||||
"notes": "Three product pillars — intake, approvals, invoicing. Show the single workflow view."
|
||||
},
|
||||
{
|
||||
"sceneId": "traction",
|
||||
"notes": "Lead with MRR and NRR — investors pattern-match on those two numbers first."
|
||||
},
|
||||
{
|
||||
"sceneId": "team",
|
||||
"notes": "Why us: ex-Stripe, ex-Figma, serial founders. Domain depth on both sides."
|
||||
},
|
||||
{
|
||||
"sceneId": "ask",
|
||||
"notes": "$4M seed to hit 1,000 customers. Show specific use of proceeds."
|
||||
}
|
||||
],
|
||||
"slideSequences": [
|
||||
{
|
||||
"id": "market-sizing-drill",
|
||||
"label": "Market sizing methodology",
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "market-drill",
|
||||
"notes": "Step through the bottom-up math: Dun & Bradstreet count → filter → ACV from comparable comps."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</hyperframes-slideshow>
|
||||
</body>
|
||||
</html>
|
||||
+859
@@ -0,0 +1,859 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>FlowDesk — Investor Pitch</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Shared scene positioning ───────────────────────── */
|
||||
.scene-frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ── Content containers ──────────────────────────────── */
|
||||
.slide-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 100px 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
.slide-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
padding: 100px 200px;
|
||||
}
|
||||
|
||||
/* ── Typography ─────────────────────────────────────── */
|
||||
.eyebrow {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.headline {
|
||||
font-size: 80px;
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.headline-lg {
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
text-align: center;
|
||||
}
|
||||
.subhead {
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.subhead-center {
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
max-width: 1100px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-row {
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.stat-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.stat-number {
|
||||
font-size: 96px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Problem bullets ─────────────────────────────────── */
|
||||
.pain-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 28px;
|
||||
/* pain items start hidden; driver reveals them imperatively on fragment */
|
||||
opacity: 0;
|
||||
}
|
||||
.pain-num {
|
||||
font-size: 56px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
}
|
||||
.pain-text {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ── Market math ─────────────────────────────────────── */
|
||||
.math-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.math-op {
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.math-result {
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* ── Traction stats ──────────────────────────────────── */
|
||||
.traction-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 60px;
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
}
|
||||
.traction-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 48px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.traction-number {
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.traction-label {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Team cards ──────────────────────────────────────── */
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 60px;
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
}
|
||||
.team-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 48px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.team-name {
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.team-role {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.team-bio {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ── Ask pill list ──────────────────────────────────── */
|
||||
.use-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.use-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
font-size: 44px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.use-pct {
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* ── Decorative accent bar ───────────────────────────── */
|
||||
.accent-bar {
|
||||
width: 80px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0">
|
||||
<!--
|
||||
FlowDesk — Investor Pitch Deck
|
||||
Startup: FlowDesk — workflow SaaS for freelance creative agencies
|
||||
automates client intake, approval loops, and invoicing.
|
||||
|
||||
Timeline layout (all scenes non-overlapping, contiguous main line):
|
||||
00–08s cover (main slide 1)
|
||||
08–20s problem (main slide 2, 3 fragments at 8.3, 8.6, 8.9s — bunched near start)
|
||||
20–28s solution (main slide 3)
|
||||
28–36s why-now (main slide 4)
|
||||
36–44s market (main slide 5, hotspot → market-drill branch)
|
||||
44–52s product (main slide 6)
|
||||
52–60s traction (main slide 7)
|
||||
60–68s team (main slide 8)
|
||||
68–76s ask (main slide 9)
|
||||
76–84s market-drill (branch slide — market-sizing-drill sequence)
|
||||
-->
|
||||
|
||||
<!-- ── JSON island (source of truth for slide order, fragments, hotspots) ── -->
|
||||
<script type="application/hyperframes-slideshow+json">
|
||||
{
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "cover",
|
||||
"notes": "Open cold with the tagline. Let it breathe — no build, just the claim."
|
||||
},
|
||||
{
|
||||
"sceneId": "problem",
|
||||
"notes": "Walk through each pain point one fragment at a time. The 14h/week stat is the anchor.",
|
||||
"fragments": [8.3, 8.6, 8.9],
|
||||
"hotspots": []
|
||||
},
|
||||
{
|
||||
"sceneId": "solution",
|
||||
"notes": "One sentence. The product kills the three pains from the previous slide."
|
||||
},
|
||||
{
|
||||
"sceneId": "why-now",
|
||||
"notes": "Three macro tailwinds — remote-first freelancing, API economy, AI underwriting."
|
||||
},
|
||||
{
|
||||
"sceneId": "market",
|
||||
"notes": "Bottom-up math only. 480k agencies × $4,200 ACV = $2.0B SAM. Use hotspot for methodology Q.",
|
||||
"hotspots": [
|
||||
{
|
||||
"id": "mkt-hotspot",
|
||||
"label": "How did you size this market?",
|
||||
"target": "market-sizing-drill",
|
||||
"region": { "x": 55, "y": 60, "w": 40, "h": 28 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"sceneId": "product",
|
||||
"notes": "Three product pillars — intake, approvals, invoicing. Show the single workflow view."
|
||||
},
|
||||
{
|
||||
"sceneId": "traction",
|
||||
"notes": "Lead with MRR and NRR — investors pattern-match on those two numbers first."
|
||||
},
|
||||
{
|
||||
"sceneId": "team",
|
||||
"notes": "Why us: ex-Stripe, ex-Figma, serial founders. Domain depth on both sides."
|
||||
},
|
||||
{
|
||||
"sceneId": "ask",
|
||||
"notes": "$4M seed to hit 1,000 customers. Show specific use of proceeds."
|
||||
}
|
||||
],
|
||||
"slideSequences": [
|
||||
{
|
||||
"id": "market-sizing-drill",
|
||||
"label": "Market sizing methodology",
|
||||
"slides": [
|
||||
{
|
||||
"sceneId": "market-drill",
|
||||
"notes": "Step through the bottom-up math: Dun & Bradstreet count → filter → ACV from comparable comps."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Root composition container -->
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="root"
|
||||
data-start="0"
|
||||
data-duration="84"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0b0b0f"
|
||||
>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 1 — COVER
|
||||
"FlowDesk turns creative agency chaos into billable momentum"
|
||||
Start: 0 Duration: 8 End: 8
|
||||
Background: deep indigo gradient
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-cover"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="cover"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-label="Cover"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #0d0d2b 0%, #1a0a3d 50%, #0d1f4a 100%)"
|
||||
>
|
||||
<div class="slide-center">
|
||||
<div id="cover-eyebrow" class="eyebrow" style="color: #7c6ff7" data-anim>Seed Round 2026</div>
|
||||
<h1 id="cover-headline" class="headline-lg" style="color: #ffffff" data-anim>
|
||||
FlowDesk turns creative agency chaos into billable momentum
|
||||
</h1>
|
||||
<p id="cover-sub" class="subhead-center" style="color: rgba(255,255,255,0.65)" data-anim>
|
||||
Workflow automation for freelance creative agencies — intake, approvals, and invoicing in one place
|
||||
</p>
|
||||
<div id="cover-bar" class="accent-bar" style="background: #7c6ff7; width: 120px" data-anim></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 2 — PROBLEM
|
||||
"Creative agencies haemorrhage 14 hours a week chasing approvals and invoices"
|
||||
Start: 8 Duration: 12 End: 20
|
||||
Fragments at 8.3, 8.6, 8.9 (absolute timeline times — bunched near start for snappiness)
|
||||
Background: dark warm red
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-problem"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="problem"
|
||||
data-start="8"
|
||||
data-duration="12"
|
||||
data-label="The problem"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #1a0808 0%, #2d0f0f 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="prob-eyebrow" class="eyebrow" style="color: #f87171" data-anim>The problem</div>
|
||||
<h2 id="prob-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
|
||||
Creative agencies haemorrhage 14 hours a week chasing approvals and invoices
|
||||
</h2>
|
||||
<div id="prob-pain1" class="pain-item">
|
||||
<span class="pain-num" style="color: #f87171">01</span>
|
||||
<span class="pain-text" style="color: rgba(255,255,255,0.9)">Client feedback loops take 4–6 days per project revision</span>
|
||||
</div>
|
||||
<div id="prob-pain2" class="pain-item">
|
||||
<span class="pain-num" style="color: #f87171">02</span>
|
||||
<span class="pain-text" style="color: rgba(255,255,255,0.9)">Late invoices leave 28% of revenue outstanding 30+ days</span>
|
||||
</div>
|
||||
<div id="prob-pain3" class="pain-item">
|
||||
<span class="pain-num" style="color: #f87171">03</span>
|
||||
<span class="pain-text" style="color: rgba(255,255,255,0.9)">Intake chaos — email threads, Notion, DMs — kills 3h/week on triage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 3 — SOLUTION
|
||||
"FlowDesk collapses intake, approvals, and invoicing into one automated workflow — agencies bill faster and work less"
|
||||
Start: 20 Duration: 8 End: 28
|
||||
Background: rich teal/green
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-solution"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="solution"
|
||||
data-start="20"
|
||||
data-duration="8"
|
||||
data-label="Solution"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #071a17 0%, #0a2e26 50%, #06201b 100%)"
|
||||
>
|
||||
<div class="slide-center">
|
||||
<div id="sol-eyebrow" class="eyebrow" style="color: #34d399" data-anim>Our solution</div>
|
||||
<h2 id="sol-headline" class="headline-lg" style="color: #ffffff; max-width: 1400px" data-anim>
|
||||
FlowDesk collapses intake, approvals, and invoicing into one automated workflow — agencies bill faster and work less
|
||||
</h2>
|
||||
<p id="sol-sub" class="subhead-center" style="color: rgba(255,255,255,0.65)" data-anim>
|
||||
One link for clients. One dashboard for teams. Zero email follow-ups.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 4 — WHY NOW
|
||||
"Three forces converging in 2026 make FlowDesk a category-defining moment"
|
||||
Start: 28 Duration: 8 End: 36
|
||||
Background: midnight blue
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-why-now"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="why-now"
|
||||
data-start="28"
|
||||
data-duration="8"
|
||||
data-label="Why now"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #050d1f 0%, #0a1a3d 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="wn-eyebrow" class="eyebrow" style="color: #60a5fa" data-anim>Why now</div>
|
||||
<h2 id="wn-headline" class="headline" style="color: #ffffff" data-anim>
|
||||
Three forces converging in 2026 make FlowDesk a category-defining moment
|
||||
</h2>
|
||||
<div id="wn-row" class="stat-row" style="gap: 60px; margin-top: 16px" data-anim>
|
||||
<div class="stat-block">
|
||||
<span class="stat-number" style="color: #60a5fa">74%</span>
|
||||
<span class="stat-label" style="color: rgba(255,255,255,0.65)">of US agencies now fully remote — async tooling is table stakes</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-number" style="color: #60a5fa">3×</span>
|
||||
<span class="stat-label" style="color: rgba(255,255,255,0.65)">growth in SMB API adoption, enabling no-code automations</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-number" style="color: #60a5fa">AI</span>
|
||||
<span class="stat-label" style="color: rgba(255,255,255,0.65)">AI-powered approval routing cuts review cycles by 60%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 5 — MARKET
|
||||
"480,000 US creative agencies × $4,200 ACV = $2.0B serviceable market"
|
||||
Start: 36 Duration: 8 End: 44
|
||||
Hotspot → market-sizing-drill branch
|
||||
Background: deep purple
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-market"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="market"
|
||||
data-start="36"
|
||||
data-duration="8"
|
||||
data-label="Market"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #110824 0%, #1e0a40 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="mkt-eyebrow" class="eyebrow" style="color: #a78bfa" data-anim>Market sizing</div>
|
||||
<h2 id="mkt-headline" class="headline" style="color: #ffffff; max-width: 1300px" data-anim>
|
||||
480,000 US creative agencies × $4,200 ACV = $2.0B serviceable market
|
||||
</h2>
|
||||
<div id="mkt-math" class="math-row" style="color: #ffffff; margin-top: 8px" data-anim>
|
||||
<span style="color: #a78bfa; font-size: 56px; font-weight: 800">480k</span>
|
||||
<span class="math-op">agencies</span>
|
||||
<span class="math-op">×</span>
|
||||
<span style="color: #a78bfa; font-size: 56px; font-weight: 800">$4,200</span>
|
||||
<span class="math-op">ACV</span>
|
||||
<span class="math-op">=</span>
|
||||
<span id="mkt-result" class="math-result" style="color: #c4b5fd">$2.0B SAM</span>
|
||||
</div>
|
||||
<p id="mkt-note" class="subhead" style="color: rgba(255,255,255,0.55); font-size: 36px; margin-top: 8px" data-anim>
|
||||
Initial wedge: 3–15 person US agencies billing $250k–$2M/yr via Stripe. Expand to EU in year 2.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 6 — PRODUCT
|
||||
"FlowDesk's three-module platform cuts the agency ops stack from six tools to one"
|
||||
Start: 44 Duration: 8 End: 52
|
||||
Background: slate dark
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-product"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="product"
|
||||
data-start="44"
|
||||
data-duration="8"
|
||||
data-label="Product"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #0c0f18 0%, #161b2e 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="prod-eyebrow" class="eyebrow" style="color: #38bdf8" data-anim>Product</div>
|
||||
<h2 id="prod-headline" class="headline" style="color: #ffffff; max-width: 1300px" data-anim>
|
||||
FlowDesk's three-module platform cuts the agency ops stack from six tools to one
|
||||
</h2>
|
||||
<div id="prod-modules" style="display: flex; gap: 48px; margin-top: 16px" data-anim>
|
||||
<div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
|
||||
<div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Intake</div>
|
||||
<div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">Smart intake forms with file upload, budget qualifier, and auto-brief generation</div>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
|
||||
<div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Approvals</div>
|
||||
<div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">AI-routed review links — one URL, unlimited rounds, full audit trail</div>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
|
||||
<div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Invoicing</div>
|
||||
<div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">Auto-invoice on approval — Stripe-native, net-terms, retainer billing</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 7 — TRACTION
|
||||
"We crossed $42k MRR in 14 months with 186 paying agencies and 118% NRR"
|
||||
Start: 52 Duration: 8 End: 60
|
||||
Background: emerald dark
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-traction"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="traction"
|
||||
data-start="52"
|
||||
data-duration="8"
|
||||
data-label="Traction"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #051a10 0%, #0a2e1c 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="tr-eyebrow" class="eyebrow" style="color: #4ade80" data-anim>Traction</div>
|
||||
<h2 id="tr-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
|
||||
We crossed $42k MRR in 14 months with 186 paying agencies and 118% NRR
|
||||
</h2>
|
||||
<div id="tr-cards" class="traction-grid" style="margin-top: 16px" data-anim>
|
||||
<div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
|
||||
<span class="traction-number" style="color: #4ade80">$42k</span>
|
||||
<span class="traction-label" style="color: rgba(255,255,255,0.75)">MRR (Apr 2026)</span>
|
||||
</div>
|
||||
<div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
|
||||
<span class="traction-number" style="color: #4ade80">118%</span>
|
||||
<span class="traction-label" style="color: rgba(255,255,255,0.75)">Net Revenue Retention</span>
|
||||
</div>
|
||||
<div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
|
||||
<span class="traction-number" style="color: #4ade80">186</span>
|
||||
<span class="traction-label" style="color: rgba(255,255,255,0.75)">Paying agencies, 0 churned in 90 days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 8 — TEAM
|
||||
"Our three-person founding team has shipped and sold workflow software at Stripe, Figma, and HoneyBook"
|
||||
Start: 60 Duration: 8 End: 68
|
||||
Background: warm charcoal
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-team"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="team"
|
||||
data-start="60"
|
||||
data-duration="8"
|
||||
data-label="Team"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #16100a 0%, #261a0f 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="team-eyebrow" class="eyebrow" style="color: #fb923c" data-anim>Team</div>
|
||||
<h2 id="team-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
|
||||
Our three-person founding team has shipped and sold workflow software at Stripe, Figma, and HoneyBook
|
||||
</h2>
|
||||
<div id="team-cards" class="team-grid" style="margin-top: 16px" data-anim>
|
||||
<div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
|
||||
<span class="team-name" style="color: #fb923c">Sara Okeke</span>
|
||||
<span class="team-role" style="color: rgba(255,255,255,0.7)">CEO & Co-founder</span>
|
||||
<span class="team-bio" style="color: rgba(255,255,255,0.7)">Former PM at Stripe Billing. 2× founder (YC S18).</span>
|
||||
</div>
|
||||
<div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
|
||||
<span class="team-name" style="color: #fb923c">Dev Patel</span>
|
||||
<span class="team-role" style="color: rgba(255,255,255,0.7)">CTO & Co-founder</span>
|
||||
<span class="team-bio" style="color: rgba(255,255,255,0.7)">Eng lead on Figma Comments. Built async review infra used by 4M teams.</span>
|
||||
</div>
|
||||
<div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
|
||||
<span class="team-name" style="color: #fb923c">Leila Hart</span>
|
||||
<span class="team-role" style="color: rgba(255,255,255,0.7)">Head of Revenue</span>
|
||||
<span class="team-bio" style="color: rgba(255,255,255,0.7)">Closed first 200 customers at HoneyBook. Agency market expert.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
SLIDE 9 — ASK
|
||||
"We are raising $4M seed to reach 1,000 customers and $200k MRR in 18 months"
|
||||
Start: 68 Duration: 8 End: 76
|
||||
Background: strong indigo
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-ask"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="ask"
|
||||
data-start="68"
|
||||
data-duration="8"
|
||||
data-label="The ask"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #0d0d2b 0%, #1a1060 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="ask-eyebrow" class="eyebrow" style="color: #818cf8" data-anim>The ask</div>
|
||||
<h2 id="ask-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
|
||||
We are raising $4M seed to reach 1,000 customers and $200k MRR in 18 months
|
||||
</h2>
|
||||
<div id="ask-uses" class="use-list" style="margin-top: 16px" data-anim>
|
||||
<div class="use-item">
|
||||
<span class="use-pct" style="color: #818cf8">50%</span>
|
||||
<span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Eng & product — hire 4 engineers, ship EU data residency + mobile app</span>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<span class="use-pct" style="color: #818cf8">30%</span>
|
||||
<span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Sales & CS — 3 AEs + partner channel (agencies tool stack)</span>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<span class="use-pct" style="color: #818cf8">20%</span>
|
||||
<span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Marketing — content-led PLG, SEO moat, case study library</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
BRANCH SLIDE — MARKET-DRILL
|
||||
Branch: market-sizing-drill / "Market sizing methodology"
|
||||
Start: 76 Duration: 8 End: 84
|
||||
NOT in main slides array — only in slideSequences
|
||||
Background: charcoal purple (visually distinct from market slide)
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
<div
|
||||
id="scene-market-drill"
|
||||
class="scene-frame clip"
|
||||
data-composition-id="market-drill"
|
||||
data-start="76"
|
||||
data-duration="8"
|
||||
data-label="Market math drill-down"
|
||||
data-track-index="1"
|
||||
style="background: linear-gradient(135deg, #0f0a20 0%, #1c1035 100%)"
|
||||
>
|
||||
<div class="slide-inner">
|
||||
<div id="drill-eyebrow" class="eyebrow" style="color: #c084fc" data-anim>Market sizing methodology</div>
|
||||
<h2 id="drill-headline" class="headline" style="color: #ffffff; max-width: 1500px" data-anim>
|
||||
Bottom-up: Dun & Bradstreet lists 1.1M US "design services" firms — we filter to 480k agencies billing >$250k/yr
|
||||
</h2>
|
||||
<div id="drill-steps" style="display: flex; flex-direction: column; gap: 24px; margin-top: 16px" data-anim>
|
||||
<div style="display: flex; gap: 24px; align-items: center">
|
||||
<span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">1.</span>
|
||||
<span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">1.1M Dun & Bradstreet "design services" — filter to 5+ employee, $250k+ revenue</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: center">
|
||||
<span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">2.</span>
|
||||
<span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">= 480k addressable agencies × $4,200 ACV (3 seats × $1,400/seat/yr = comparable to HoneyBook)</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 24px; align-items: center">
|
||||
<span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">3.</span>
|
||||
<span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">$2.0B SAM. Expand to EU (est. 600k agencies) in Y2 for $4.5B total SAM.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Root timeline (spans full 84s composition) ──────── -->
|
||||
<script>
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
tl.to({}, { duration: 84 });
|
||||
window.__timelines["root"] = tl;
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div><!-- end #root -->
|
||||
|
||||
<!-- ── Scene visibility controller + imperative animation driver ──────────
|
||||
Drives each scene's opacity based on playhead (seek-driven visibility).
|
||||
ALSO fires imperative GSAP entrance animations via GSAP's own ticker
|
||||
when a scene transitions from inactive→active. Pain items are revealed
|
||||
imperatively when the playhead crosses their bunched fragment times.
|
||||
|
||||
Fragment times for problem: [8.3, 8.6, 8.9] — bunched near scene start
|
||||
so each ArrowRight advances the playhead to the next reveal within ~300ms.
|
||||
──────────────────────────────────────────────────────────────────────────── -->
|
||||
<script>
|
||||
(function () {
|
||||
var scenes = [
|
||||
{ id: "scene-cover", start: 0, end: 8 },
|
||||
{ id: "scene-problem", start: 8, end: 20 },
|
||||
{ id: "scene-solution", start: 20, end: 28 },
|
||||
{ id: "scene-why-now", start: 28, end: 36 },
|
||||
{ id: "scene-market", start: 36, end: 44 },
|
||||
{ id: "scene-product", start: 44, end: 52 },
|
||||
{ id: "scene-traction", start: 52, end: 60 },
|
||||
{ id: "scene-team", start: 60, end: 68 },
|
||||
{ id: "scene-ask", start: 68, end: 76 },
|
||||
{ id: "scene-market-drill", start: 76, end: 84 }
|
||||
];
|
||||
|
||||
// Fragment config for problem slide: pain items revealed at bunched times
|
||||
var painFragments = [
|
||||
{ time: 8.3, id: "prob-pain1" },
|
||||
{ time: 8.6, id: "prob-pain2" },
|
||||
{ time: 8.9, id: "prob-pain3" }
|
||||
];
|
||||
var painRevealed = [false, false, false];
|
||||
|
||||
// Track which scene was last active to detect transitions
|
||||
var lastActiveId = null;
|
||||
|
||||
function fireEntranceAnim(scene) {
|
||||
var animEls = scene.querySelectorAll("[data-anim]");
|
||||
if (!animEls.length) return;
|
||||
// Quick crossfade: scene container from 0→1 already handled by visibility controller.
|
||||
// Stagger-in the data-anim elements from below+transparent via GSAP's own ticker.
|
||||
gsap.from(animEls, {
|
||||
opacity: 0,
|
||||
y: 30,
|
||||
duration: 0.45,
|
||||
stagger: 0.08,
|
||||
ease: "power2.out",
|
||||
overwrite: true
|
||||
});
|
||||
}
|
||||
|
||||
function revealPainItem(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
gsap.fromTo(el, { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.4, ease: "power2.out", overwrite: true });
|
||||
}
|
||||
|
||||
function updateVisibility(t) {
|
||||
for (var i = 0; i < scenes.length; i++) {
|
||||
var s = scenes[i];
|
||||
var el = document.getElementById(s.id);
|
||||
if (!el) continue;
|
||||
var isActive = t >= s.start && t < s.end;
|
||||
el.style.opacity = isActive ? "1" : "0";
|
||||
el.style.pointerEvents = isActive ? "auto" : "none";
|
||||
|
||||
// Fire entrance animation when scene BECOMES active
|
||||
if (isActive && lastActiveId !== s.id) {
|
||||
// Reset pain items when re-entering problem scene
|
||||
if (s.id === "scene-problem") {
|
||||
painRevealed = [false, false, false];
|
||||
var pains = ["prob-pain1", "prob-pain2", "prob-pain3"];
|
||||
for (var p = 0; p < pains.length; p++) {
|
||||
var pEl = document.getElementById(pains[p]);
|
||||
if (pEl) gsap.set(pEl, { opacity: 0, x: 0, clearProps: "transform" });
|
||||
}
|
||||
}
|
||||
lastActiveId = s.id;
|
||||
fireEntranceAnim(el);
|
||||
}
|
||||
}
|
||||
|
||||
// Fragment reveals for problem slide pain items
|
||||
for (var f = 0; f < painFragments.length; f++) {
|
||||
if (!painRevealed[f] && t >= painFragments[f].time) {
|
||||
painRevealed[f] = true;
|
||||
revealPainItem(painFragments[f].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expose so the player / slideshow component can drive it directly
|
||||
window.__hfSetTime = updateVisibility;
|
||||
|
||||
// Show the first slide immediately on load so the deck isn't blank
|
||||
updateVisibility(0);
|
||||
|
||||
// Hook into the root timeline's onUpdate so every seek drives scene visibility
|
||||
function hookRoot() {
|
||||
var root = window.__timelines && window.__timelines["root"];
|
||||
if (root) {
|
||||
root.eventCallback("onUpdate", function () {
|
||||
updateVisibility(root.time());
|
||||
});
|
||||
}
|
||||
}
|
||||
hookRoot();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- ── Bootstrap postMessage for slideshow component ─────
|
||||
Sends the timeline manifest so <hyperframes-slideshow>
|
||||
can discover all scenes (main + branch) without relying
|
||||
on the engine's full runtime injection.
|
||||
──────────────────────────────────────────────────────── -->
|
||||
<script>
|
||||
(function () {
|
||||
var totalFrames = 84 * 30; // 84s × 30fps = 2520 frames
|
||||
var scenes = [
|
||||
{ id: "cover", start: 0, duration: 8 },
|
||||
{ id: "problem", start: 8, duration: 12 },
|
||||
{ id: "solution", start: 20, duration: 8 },
|
||||
{ id: "why-now", start: 28, duration: 8 },
|
||||
{ id: "market", start: 36, duration: 8 },
|
||||
{ id: "product", start: 44, duration: 8 },
|
||||
{ id: "traction", start: 52, duration: 8 },
|
||||
{ id: "team", start: 60, duration: 8 },
|
||||
{ id: "ask", start: 68, duration: 8 },
|
||||
{ id: "market-drill", start: 76, duration: 8 }
|
||||
];
|
||||
|
||||
function postTimeline() {
|
||||
parent.postMessage({
|
||||
source: "hf-preview",
|
||||
type: "timeline",
|
||||
durationInFrames: totalFrames,
|
||||
scenes: scenes
|
||||
}, "*");
|
||||
}
|
||||
|
||||
// Post after a brief delay to let the parent frame settle
|
||||
if (window.requestAnimationFrame) {
|
||||
var delayed = function (deadline) {
|
||||
// ~300ms after load
|
||||
setTimeout(postTimeline, 300);
|
||||
};
|
||||
if (document.readyState === "complete") {
|
||||
delayed();
|
||||
} else {
|
||||
window.addEventListener("load", delayed);
|
||||
}
|
||||
} else {
|
||||
setTimeout(postTimeline, 300);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1920" height="1080" fill="#F2F2F2" />
|
||||
|
||||
<g id="thin-grid-lines" stroke="#0A1E3D" stroke-width="1" opacity="0.1">
|
||||
<line id="v-thin-1" x1="60" y1="0" x2="60" y2="1080" />
|
||||
<line id="v-thin-2" x1="120" y1="0" x2="120" y2="1080" />
|
||||
<line id="v-thin-3" x1="180" y1="0" x2="180" y2="1080" />
|
||||
<line id="v-thin-5" x1="300" y1="0" x2="300" y2="1080" />
|
||||
<line id="v-thin-6" x1="360" y1="0" x2="360" y2="1080" />
|
||||
<line id="v-thin-7" x1="420" y1="0" x2="420" y2="1080" />
|
||||
<line id="v-thin-9" x1="540" y1="0" x2="540" y2="1080" />
|
||||
<line id="v-thin-10" x1="600" y1="0" x2="600" y2="1080" />
|
||||
<line id="v-thin-11" x1="660" y1="0" x2="660" y2="1080" />
|
||||
<line id="v-thin-13" x1="780" y1="0" x2="780" y2="1080" />
|
||||
<line id="v-thin-14" x1="840" y1="0" x2="840" y2="1080" />
|
||||
<line id="v-thin-15" x1="900" y1="0" x2="900" y2="1080" />
|
||||
<line id="v-thin-17" x1="1020" y1="0" x2="1020" y2="1080" />
|
||||
<line id="v-thin-18" x1="1080" y1="0" x2="1080" y2="1080" />
|
||||
<line id="v-thin-19" x1="1140" y1="0" x2="1140" y2="1080" />
|
||||
<line id="v-thin-21" x1="1260" y1="0" x2="1260" y2="1080" />
|
||||
<line id="v-thin-22" x1="1320" y1="0" x2="1320" y2="1080" />
|
||||
<line id="v-thin-23" x1="1380" y1="0" x2="1380" y2="1080" />
|
||||
<line id="v-thin-25" x1="1500" y1="0" x2="1500" y2="1080" />
|
||||
<line id="v-thin-26" x1="1560" y1="0" x2="1560" y2="1080" />
|
||||
<line id="v-thin-27" x1="1620" y1="0" x2="1620" y2="1080" />
|
||||
<line id="v-thin-29" x1="1740" y1="0" x2="1740" y2="1080" />
|
||||
<line id="v-thin-30" x1="1800" y1="0" x2="1800" y2="1080" />
|
||||
<line id="v-thin-31" x1="1860" y1="0" x2="1860" y2="1080" />
|
||||
<line id="h-thin-1" x1="0" y1="60" x2="1920" y2="60" />
|
||||
<line id="h-thin-2" x1="0" y1="120" x2="1920" y2="120" />
|
||||
<line id="h-thin-3" x1="0" y1="180" x2="1920" y2="180" />
|
||||
<line id="h-thin-5" x1="0" y1="300" x2="1920" y2="300" />
|
||||
<line id="h-thin-6" x1="0" y1="360" x2="1920" y2="360" />
|
||||
<line id="h-thin-7" x1="0" y1="420" x2="1920" y2="420" />
|
||||
<line id="h-thin-9" x1="0" y1="540" x2="1920" y2="540" />
|
||||
<line id="h-thin-10" x1="0" y1="600" x2="1920" y2="600" />
|
||||
<line id="h-thin-11" x1="0" y1="660" x2="1920" y2="660" />
|
||||
<line id="h-thin-13" x1="0" y1="780" x2="1920" y2="780" />
|
||||
<line id="h-thin-14" x1="0" y1="840" x2="1920" y2="840" />
|
||||
<line id="h-thin-15" x1="0" y1="900" x2="1920" y2="900" />
|
||||
<line id="h-thin-17" x1="0" y1="1020" x2="1920" y2="1020" />
|
||||
</g>
|
||||
|
||||
<g id="thick-grid-lines" stroke="#0A1E3D" stroke-width="3" opacity="0.2">
|
||||
<line id="v-thick-1" x1="240" y1="0" x2="240" y2="1080" />
|
||||
<line id="v-thick-2" x1="480" y1="0" x2="480" y2="1080" />
|
||||
<line id="v-thick-3" x1="720" y1="0" x2="720" y2="1080" />
|
||||
<line id="v-thick-4" x1="960" y1="0" x2="960" y2="1080" />
|
||||
<line id="v-thick-5" x1="1200" y1="0" x2="1200" y2="1080" />
|
||||
<line id="v-thick-6" x1="1440" y1="0" x2="1440" y2="1080" />
|
||||
<line id="v-thick-7" x1="1680" y1="0" x2="1680" y2="1080" />
|
||||
<line id="h-thick-1" x1="0" y1="240" x2="1920" y2="240" />
|
||||
<line id="h-thick-2" x1="0" y1="480" x2="1920" y2="480" />
|
||||
<line id="h-thick-3" x1="0" y1="720" x2="1920" y2="720" />
|
||||
<line id="h-thick-4" x1="0" y1="960" x2="1920" y2="960" />
|
||||
</g>
|
||||
|
||||
<g id="intersections" stroke="#0A1E3D" stroke-width="2" opacity="0.3">
|
||||
<line x1="230" y1="240" x2="250" y2="240" />
|
||||
<line x1="240" y1="230" x2="240" y2="250" />
|
||||
<line x1="230" y1="480" x2="250" y2="480" />
|
||||
<line x1="240" y1="470" x2="240" y2="490" />
|
||||
<line x1="230" y1="720" x2="250" y2="720" />
|
||||
<line x1="240" y1="710" x2="240" y2="730" />
|
||||
<line x1="230" y1="960" x2="250" y2="960" />
|
||||
<line x1="240" y1="950" x2="240" y2="970" />
|
||||
<line x1="470" y1="240" x2="490" y2="240" />
|
||||
<line x1="480" y1="230" x2="480" y2="250" />
|
||||
<line x1="470" y1="480" x2="490" y2="480" />
|
||||
<line x1="480" y1="470" x2="480" y2="490" />
|
||||
<line x1="470" y1="720" x2="490" y2="720" />
|
||||
<line x1="480" y1="710" x2="480" y2="730" />
|
||||
<line x1="470" y1="960" x2="490" y2="960" />
|
||||
<line x1="480" y1="950" x2="480" y2="970" />
|
||||
<line x1="710" y1="240" x2="730" y2="240" />
|
||||
<line x1="720" y1="230" x2="720" y2="250" />
|
||||
<line x1="710" y1="480" x2="730" y2="480" />
|
||||
<line x1="720" y1="470" x2="720" y2="490" />
|
||||
<line x1="710" y1="720" x2="730" y2="720" />
|
||||
<line x1="720" y1="710" x2="720" y2="730" />
|
||||
<line x1="710" y1="960" x2="730" y2="960" />
|
||||
<line x1="720" y1="950" x2="720" y2="970" />
|
||||
<line x1="950" y1="240" x2="970" y2="240" />
|
||||
<line x1="960" y1="230" x2="960" y2="250" />
|
||||
<line x1="950" y1="480" x2="970" y2="480" />
|
||||
<line x1="960" y1="470" x2="960" y2="490" />
|
||||
<line x1="950" y1="720" x2="970" y2="720" />
|
||||
<line x1="960" y1="710" x2="960" y2="730" />
|
||||
<line x1="950" y1="960" x2="970" y2="960" />
|
||||
<line x1="960" y1="950" x2="960" y2="970" />
|
||||
<line x1="1190" y1="240" x2="1210" y2="240" />
|
||||
<line x1="1200" y1="230" x2="1200" y2="250" />
|
||||
<line x1="1190" y1="480" x2="1210" y2="480" />
|
||||
<line x1="1200" y1="470" x2="1200" y2="490" />
|
||||
<line x1="1190" y1="720" x2="1210" y2="720" />
|
||||
<line x1="1200" y1="710" x2="1200" y2="730" />
|
||||
<line x1="1190" y1="960" x2="1210" y2="960" />
|
||||
<line x1="1200" y1="950" x2="1200" y2="970" />
|
||||
<line x1="1430" y1="240" x2="1450" y2="240" />
|
||||
<line x1="1440" y1="230" x2="1440" y2="250" />
|
||||
<line x1="1430" y1="480" x2="1450" y2="480" />
|
||||
<line x1="1440" y1="470" x2="1440" y2="490" />
|
||||
<line x1="1430" y1="720" x2="1450" y2="720" />
|
||||
<line x1="1440" y1="710" x2="1440" y2="730" />
|
||||
<line x1="1430" y1="960" x2="1450" y2="960" />
|
||||
<line x1="1440" y1="950" x2="1440" y2="970" />
|
||||
<line x1="1670" y1="240" x2="1690" y2="240" />
|
||||
<line x1="1680" y1="230" x2="1680" y2="250" />
|
||||
<line x1="1670" y1="480" x2="1690" y2="480" />
|
||||
<line x1="1680" y1="470" x2="1680" y2="490" />
|
||||
<line x1="1670" y1="720" x2="1690" y2="720" />
|
||||
<line x1="1680" y1="710" x2="1680" y2="730" />
|
||||
<line x1="1670" y1="960" x2="1690" y2="960" />
|
||||
<line x1="1680" y1="950" x2="1680" y2="970" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
+220
@@ -0,0 +1,220 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Swiss Grid - Hyperframes</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #f2f2f2;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
#master-root {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* A-roll styling */
|
||||
#short_mag_cut_frame {
|
||||
position: absolute;
|
||||
border-radius: 8px; /* Required */
|
||||
z-index: 1;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#short_mag_cut,
|
||||
#short_mag_cut_frame > img.__render_frame__,
|
||||
#short_mag_cut_frame > img.__preview_render_frame__ {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Overlay layers */
|
||||
.overlay-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#intro-comp {
|
||||
z-index: 2;
|
||||
}
|
||||
#graphics-comp {
|
||||
z-index: 3;
|
||||
}
|
||||
#captions-comp {
|
||||
z-index: 4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="master-root"
|
||||
data-composition-id="master"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Background Grid -->
|
||||
<img id="bg-grid" class="background-grid" src="assets/swiss-grid.svg" alt="Grid" />
|
||||
|
||||
<!-- Intro Sub-composition -->
|
||||
<div
|
||||
id="intro-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="1.86"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<!-- Graphics Sub-composition -->
|
||||
<div
|
||||
id="graphics-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="graphics"
|
||||
data-composition-src="compositions/graphics.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<!-- Captions Sub-composition -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
class="overlay-layer"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="4"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
const masterTL = gsap.timeline({ paused: true });
|
||||
const v = document.getElementById("short_mag_cut_frame");
|
||||
|
||||
// --- A-ROLL MOVEMENT (Structured Swiss Layout) ---
|
||||
|
||||
// 1. Entrance (0-1.86s): Slide in from left, settle centered for Intro
|
||||
masterTL.fromTo(
|
||||
v,
|
||||
{ x: -1000, y: 120, width: 960, height: 840 },
|
||||
{ x: 480, y: 120, width: 960, height: 840, duration: 0.8, ease: "power2.out" },
|
||||
0,
|
||||
);
|
||||
|
||||
// 2. Stat 1 (1.86s - 4.68s): Move to right side (Graphic is on left)
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 1080,
|
||||
y: 120,
|
||||
width: 720,
|
||||
height: 720,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
1.86,
|
||||
);
|
||||
|
||||
// 3. Stat 2 (4.68s - 8.88s): Stay right, zoom in slightly
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 1080,
|
||||
y: 60,
|
||||
width: 780,
|
||||
height: 780,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
4.68,
|
||||
);
|
||||
|
||||
// 4. Stat 3 (8.88s - 14.2s): Move to left side (Graphic is on right)
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 120,
|
||||
y: 120,
|
||||
width: 720,
|
||||
height: 720,
|
||||
duration: 0.25,
|
||||
ease: "expo.out",
|
||||
},
|
||||
8.88,
|
||||
);
|
||||
|
||||
// 5. Conclusion (14.2s - 16.04s): Center large
|
||||
masterTL.to(
|
||||
v,
|
||||
{
|
||||
x: 240,
|
||||
y: 60,
|
||||
width: 1440,
|
||||
height: 810,
|
||||
duration: 0.5,
|
||||
ease: "expo.out",
|
||||
},
|
||||
14.2,
|
||||
);
|
||||
|
||||
window.__timelines["master"] = masterTL;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-roll Video (direct child of body to avoid video_nested_in_timed_element) -->
|
||||
<div id="short_mag_cut_frame">
|
||||
<video
|
||||
id="short_mag_cut"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="1"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "swiss-grid",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Swiss Grid",
|
||||
"description": "Structured grid layout",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 10,
|
||||
"files": [
|
||||
{
|
||||
"path": "assets/swiss-grid.svg",
|
||||
"target": "assets/swiss-grid.svg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "compositions/captions.html",
|
||||
"target": "compositions/captions.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/graphics.html",
|
||||
"target": "compositions/graphics.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/intro.html",
|
||||
"target": "compositions/intro.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Massimo Vignelli Video</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
font-family: "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 6-Column Grid System */
|
||||
.grid-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
opacity: 0; /* Keep grid invisible but present for layout references */
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
border-right: 1px solid rgba(204, 0, 0, 0.2); /* Vignelli Red accent */
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Layer Hosts */
|
||||
#a-roll-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#a-roll,
|
||||
#a-roll-wrapper img.__render_frame__,
|
||||
#a-roll-wrapper img.__preview_render_frame__ {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#overlays-comp,
|
||||
#captions-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#overlays-comp {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#captions-comp {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* Curtain Transition Layer */
|
||||
.curtain {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
z-index: 25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.curtain.red {
|
||||
background: #cc0000;
|
||||
z-index: 26;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-comp"
|
||||
data-width="1080"
|
||||
data-height="1920"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Transitions -->
|
||||
<div id="curtain-black" class="curtain"></div>
|
||||
<div id="curtain-red" class="curtain red"></div>
|
||||
|
||||
<!-- Overlays Composition -->
|
||||
<div
|
||||
id="overlays-comp"
|
||||
data-composition-id="overlays"
|
||||
data-composition-src="compositions/overlays.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<!-- Captions Composition -->
|
||||
<div
|
||||
id="captions-comp"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<!-- Grid Visualization -->
|
||||
<div class="grid-container">
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
<div class="grid-column"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// Curtains rest off-screen left until their wipes begin.
|
||||
gsap.set("#curtain-black", { xPercent: -100 });
|
||||
gsap.set("#curtain-red", { xPercent: -100 });
|
||||
|
||||
// Transition: Curtain Pull logic
|
||||
// A-roll leaves the screen at least once.
|
||||
// Timing: Let's do a curtain pull at 3.7s (transitioning to the 62% stat)
|
||||
// and return at 7.3s (end of attention stat).
|
||||
|
||||
// Curtain Out (A-roll hidden)
|
||||
tl.to("#curtain-black", { xPercent: 0, duration: 0.2, ease: "power2.inOut" }, 3.5);
|
||||
tl.to("#a-roll-wrapper", { opacity: 0, duration: 0 }, 3.7);
|
||||
tl.to("#curtain-black", { xPercent: 100, duration: 0.4, ease: "power2.inOut" }, 3.7);
|
||||
|
||||
// Curtain In (A-roll return)
|
||||
tl.set("#curtain-red", { xPercent: -100 }, 7.1);
|
||||
tl.to("#curtain-red", { xPercent: 0, duration: 0.2, ease: "power2.inOut" }, 7.1);
|
||||
tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
|
||||
tl.to("#curtain-red", { xPercent: 100, duration: 0.4, ease: "power2.inOut" }, 7.3);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["main-comp"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-Roll (direct child of body to avoid video_nested_in_timed_element) -->
|
||||
<div id="a-roll-wrapper">
|
||||
<video
|
||||
id="a-roll"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="0"
|
||||
></video>
|
||||
</div>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "vignelli",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Vignelli",
|
||||
"description": "Bold typography with red accents",
|
||||
"dimensions": {
|
||||
"width": 1080,
|
||||
"height": 1920
|
||||
},
|
||||
"duration": 10,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/captions.html",
|
||||
"target": "compositions/captions.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/overlays.html",
|
||||
"target": "compositions/overlays.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
# VS Code Theme Visualizer Design Notes
|
||||
|
||||
## Intent
|
||||
|
||||
This POC should feel like a real VS Code tutorial capture, not a generic code window. The purpose is to prove that HyperFrames can render code-writing scenes with faithful product context and theme-aware polish.
|
||||
|
||||
## Visual Identity
|
||||
|
||||
The visual identity is sourced from official VS Code built-in theme JSON files from `microsoft/vscode/extensions/theme-defaults/themes`. Do not invent palette values for the workbench. Colors should flow through the generated theme registry and CSS variables.
|
||||
|
||||
## Theme Set
|
||||
|
||||
- Light 2026
|
||||
- Dark 2026
|
||||
- Dark+
|
||||
- Dark Modern
|
||||
- Light+
|
||||
- Light Modern
|
||||
- Visual Studio Dark
|
||||
- Visual Studio Light
|
||||
- Default High Contrast
|
||||
- Default High Contrast Light
|
||||
|
||||
## Typography
|
||||
|
||||
- Workbench UI: `Inter`, then system UI fallbacks.
|
||||
- Code and terminal: `Menlo`, `Monaco`, `Consolas`, then monospace fallbacks.
|
||||
- Keep letter spacing at `0`.
|
||||
|
||||
## Layout Rules
|
||||
|
||||
- Recreate the VS Code workbench proportions: activity bar, explorer sidebar, editor tabs, editor gutter, status bar, and optional terminal panel.
|
||||
- Use official theme colors for editor, sidebar, tabs, activity bar, panel, terminal, and status bar surfaces.
|
||||
- Keep the composition full-frame at 1920x1080.
|
||||
- Cards are allowed only for the theme selector strip because they are repeated selectable items.
|
||||
- Do not use decorative gradients, glows, or synthetic color accents outside theme-derived colors.
|
||||
|
||||
## Motion Rules
|
||||
|
||||
- Theme changes should feel like command-palette theme switching: quick, crisp, and functional.
|
||||
- Code typing is the hero action. UI chrome should support it without becoming theatrical.
|
||||
- All animation must be deterministic and GSAP-controlled.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
@@ -0,0 +1,390 @@
|
||||
(() => {
|
||||
const codeLines = [
|
||||
[{ text: "# A small functional toolkit", token: "comment" }],
|
||||
[
|
||||
{ text: "def", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "pluck_deep", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "key", token: "parameter" },
|
||||
{ text: "):", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "return", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "lambda", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "obj", token: "parameter" },
|
||||
{ text: ": ", token: "punctuation" },
|
||||
{ text: "reduce", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "lambda", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "acc", token: "parameter" },
|
||||
{ text: ", ", token: "punctuation" },
|
||||
{ text: "k", token: "parameter" },
|
||||
{ text: ": ", token: "punctuation" },
|
||||
{ text: "acc", token: "variable" },
|
||||
{ text: "[", token: "punctuation" },
|
||||
{ text: "k", token: "variable" },
|
||||
{ text: "]", token: "punctuation" },
|
||||
{ text: ", ", token: "punctuation" },
|
||||
{ text: "key", token: "variable" },
|
||||
{ text: ".split", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "'.'", token: "string" },
|
||||
{ text: "), ", token: "punctuation" },
|
||||
{ text: "obj", token: "variable" },
|
||||
{ text: ")", token: "punctuation" },
|
||||
],
|
||||
[],
|
||||
[
|
||||
{ text: "def", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "compose", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "*", token: "operator" },
|
||||
{ text: "fns", token: "parameter" },
|
||||
{ text: "):", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "return", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "lambda", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "res", token: "parameter" },
|
||||
{ text: ": ", token: "punctuation" },
|
||||
{ text: "reduce", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "lambda", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "acc", token: "parameter" },
|
||||
{ text: ", ", token: "punctuation" },
|
||||
{ text: "fn", token: "parameter" },
|
||||
{ text: ": ", token: "punctuation" },
|
||||
{ text: "fn", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "acc", token: "variable" },
|
||||
{ text: "), ", token: "punctuation" },
|
||||
{ text: "fns", token: "variable" },
|
||||
{ text: ", ", token: "punctuation" },
|
||||
{ text: "res", token: "variable" },
|
||||
{ text: ")", token: "punctuation" },
|
||||
],
|
||||
[],
|
||||
[
|
||||
{ text: "def", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "unfold", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "f", token: "parameter" },
|
||||
{ text: ", ", token: "punctuation" },
|
||||
{ text: "seed", token: "parameter" },
|
||||
{ text: "):", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
|
||||
],
|
||||
[
|
||||
{ text: " acc", token: "variable" },
|
||||
{ text: " = ", token: "operator" },
|
||||
{ text: "[]", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " while", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "True", token: "className" },
|
||||
{ text: ":", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " result", token: "variable" },
|
||||
{ text: " = ", token: "operator" },
|
||||
{ text: "f", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "seed", token: "variable" },
|
||||
{ text: ")", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " if", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "result", token: "variable" },
|
||||
{ text: " is ", token: "keyword" },
|
||||
{ text: "None", token: "className" },
|
||||
{ text: ":", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " return", token: "keyword" },
|
||||
{ text: " ", token: "plain" },
|
||||
{ text: "acc", token: "variable" },
|
||||
],
|
||||
[
|
||||
{ text: " acc", token: "variable" },
|
||||
{ text: ".append", token: "function" },
|
||||
{ text: "(", token: "punctuation" },
|
||||
{ text: "result", token: "variable" },
|
||||
{ text: "[", token: "punctuation" },
|
||||
{ text: "0", token: "number" },
|
||||
{ text: "])", token: "punctuation" },
|
||||
],
|
||||
[
|
||||
{ text: " seed", token: "variable" },
|
||||
{ text: " = ", token: "operator" },
|
||||
{ text: "result", token: "variable" },
|
||||
{ text: "[", token: "punctuation" },
|
||||
{ text: "1", token: "number" },
|
||||
{ text: "]", token: "punctuation" },
|
||||
],
|
||||
[],
|
||||
];
|
||||
|
||||
const fallback = {
|
||||
"activityBar.background": "#181818",
|
||||
"activityBar.foreground": "#d7d7d7",
|
||||
"activityBar.inactiveForeground": "#868686",
|
||||
"activityBar.activeBorder": "#0078d4",
|
||||
"sideBar.background": "#181818",
|
||||
"sideBar.foreground": "#cccccc",
|
||||
"sideBar.border": "#2b2b2b",
|
||||
"tab.activeBackground": "#1f1f1f",
|
||||
"tab.activeForeground": "#ffffff",
|
||||
"tab.inactiveBackground": "#181818",
|
||||
"tab.inactiveForeground": "#9d9d9d",
|
||||
"tab.border": "#2b2b2b",
|
||||
"editor.background": "#1f1f1f",
|
||||
"editor.foreground": "#cccccc",
|
||||
"editor.lineHighlightBackground": "#ffffff0a",
|
||||
"editorLineNumber.foreground": "#6e7681",
|
||||
"editorLineNumber.activeForeground": "#cccccc",
|
||||
"panel.background": "#181818",
|
||||
"panel.border": "#2b2b2b",
|
||||
"statusBar.background": "#181818",
|
||||
"statusBar.foreground": "#cccccc",
|
||||
"statusBar.border": "#2b2b2b",
|
||||
"titleBar.activeBackground": "#181818",
|
||||
"titleBar.activeForeground": "#cccccc",
|
||||
};
|
||||
|
||||
function color(theme, key) {
|
||||
return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
|
||||
}
|
||||
|
||||
function solarizedGrey(theme) {
|
||||
return theme.colors["tab.inactiveForeground"] || theme.colors["editor.foreground"] || "#586E75";
|
||||
}
|
||||
|
||||
function setVar(root, name, value) {
|
||||
root.style.setProperty(name, value);
|
||||
}
|
||||
|
||||
function applyTheme(root, theme) {
|
||||
const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
|
||||
setVar(root, "--activity-bg", color(theme, "activityBar.background"));
|
||||
setVar(root, "--activity-fg", solarizedUiGrey || color(theme, "activityBar.foreground"));
|
||||
setVar(
|
||||
root,
|
||||
"--activity-muted",
|
||||
solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
|
||||
);
|
||||
setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
|
||||
setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
|
||||
setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
|
||||
setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
|
||||
setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
|
||||
setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
|
||||
setVar(root, "--tab-active-fg", solarizedUiGrey || color(theme, "tab.activeForeground"));
|
||||
setVar(root, "--tab-inactive-fg", solarizedUiGrey || color(theme, "tab.inactiveForeground"));
|
||||
setVar(root, "--tab-border", color(theme, "tab.border"));
|
||||
setVar(root, "--editor-bg", color(theme, "editor.background"));
|
||||
setVar(root, "--editor-fg", color(theme, "editor.foreground"));
|
||||
setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
|
||||
setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
|
||||
setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
|
||||
setVar(root, "--panel-bg", color(theme, "panel.background"));
|
||||
setVar(root, "--panel-border", color(theme, "panel.border"));
|
||||
setVar(root, "--status-bg", color(theme, "statusBar.background"));
|
||||
setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
|
||||
setVar(root, "--status-border", color(theme, "statusBar.border"));
|
||||
setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
|
||||
setVar(
|
||||
root,
|
||||
"--status-remote-fg",
|
||||
solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
|
||||
);
|
||||
setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
|
||||
setVar(root, "--title-fg", solarizedUiGrey || color(theme, "titleBar.activeForeground"));
|
||||
setVar(root, "--token-comment", theme.tokens.comment);
|
||||
setVar(root, "--token-keyword", theme.tokens.keyword);
|
||||
setVar(root, "--token-function", theme.tokens.function);
|
||||
setVar(root, "--token-string", theme.tokens.string);
|
||||
setVar(root, "--token-number", theme.tokens.number);
|
||||
setVar(root, "--token-variable", theme.tokens.variable);
|
||||
setVar(root, "--token-parameter", theme.tokens.parameter);
|
||||
setVar(root, "--token-operator", theme.tokens.operator);
|
||||
setVar(root, "--token-punctuation", theme.tokens.punctuation);
|
||||
setVar(root, "--token-class-name", theme.tokens.className);
|
||||
}
|
||||
|
||||
function renderCode(root) {
|
||||
const code = root.querySelector(".code");
|
||||
codeLines.forEach((segments, index) => {
|
||||
const line = document.createElement("div");
|
||||
line.className = "line";
|
||||
line.dataset.lineIndex = String(index);
|
||||
|
||||
const lineNumber = document.createElement("span");
|
||||
lineNumber.className = "line-number";
|
||||
lineNumber.textContent = String(index + 1);
|
||||
line.appendChild(lineNumber);
|
||||
|
||||
const lineCode = document.createElement("span");
|
||||
lineCode.className = "line-code";
|
||||
segments.forEach((segment) => {
|
||||
[...segment.text].forEach((char) => {
|
||||
const span = document.createElement("span");
|
||||
span.className =
|
||||
segment.token === "plain"
|
||||
? "char"
|
||||
: "char tok-" + segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
|
||||
span.dataset.lineIndex = String(index);
|
||||
span.textContent = char;
|
||||
lineCode.appendChild(span);
|
||||
});
|
||||
});
|
||||
line.appendChild(lineCode);
|
||||
code.appendChild(line);
|
||||
});
|
||||
|
||||
const caret = document.createElement("span");
|
||||
caret.className = "caret";
|
||||
root.querySelector(".editor").appendChild(caret);
|
||||
}
|
||||
|
||||
function caretPointForElement(editor, el) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const charBox = el.getBoundingClientRect();
|
||||
return {
|
||||
x: charBox.right - editorBox.left + 2,
|
||||
y: charBox.top - editorBox.top + 3,
|
||||
};
|
||||
}
|
||||
|
||||
function caretPointForLineStart(editor, line) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const lineBox = line.getBoundingClientRect();
|
||||
const codeBox = line.querySelector(".line-code").getBoundingClientRect();
|
||||
return {
|
||||
x: codeBox.left - editorBox.left,
|
||||
y: lineBox.top - editorBox.top + 3,
|
||||
};
|
||||
}
|
||||
|
||||
function lineHighlightY(editor, line) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const lineBox = line.getBoundingClientRect();
|
||||
return lineBox.top - editorBox.top;
|
||||
}
|
||||
|
||||
function buildTimeline(root, compositionId) {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const editor = root.querySelector(".editor");
|
||||
const caret = root.querySelector(".caret");
|
||||
const activeLine = root.querySelector(".active-line");
|
||||
const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
|
||||
const lineStartTimes = [];
|
||||
const charSchedule = [];
|
||||
let cursorTime = 0.95;
|
||||
|
||||
lineEls.forEach((line, lineIndex) => {
|
||||
const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
|
||||
lineStartTimes[lineIndex] = cursorTime;
|
||||
lineChars.forEach((char, charIndex) => {
|
||||
charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
|
||||
});
|
||||
cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
|
||||
});
|
||||
|
||||
gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
|
||||
gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
|
||||
|
||||
tl.from(
|
||||
root.querySelector(".header"),
|
||||
{ y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
|
||||
0,
|
||||
);
|
||||
tl.from(
|
||||
root.querySelector(".workbench"),
|
||||
{ y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
|
||||
0.1,
|
||||
);
|
||||
tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
|
||||
lineStartTimes.forEach((time, lineIndex) => {
|
||||
const line = lineEls[lineIndex];
|
||||
tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
|
||||
tl.set(caret, caretPointForLineStart(editor, line), time);
|
||||
tl.call(
|
||||
() => {
|
||||
lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
|
||||
},
|
||||
[],
|
||||
time,
|
||||
);
|
||||
});
|
||||
charSchedule.forEach(({ char, time }) => {
|
||||
tl.set(char, { opacity: 1 }, time);
|
||||
tl.set(caret, caretPointForElement(editor, char), time + 0.002);
|
||||
});
|
||||
tl.to(
|
||||
root.querySelector(".caret"),
|
||||
{ opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
|
||||
0.95,
|
||||
);
|
||||
tl.from(
|
||||
root.querySelector(".terminal"),
|
||||
{ y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
|
||||
7.55,
|
||||
);
|
||||
tl.from(
|
||||
root.querySelector(".terminal-body").children,
|
||||
{ opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
|
||||
8.05,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelector(".workbench"),
|
||||
{ rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
|
||||
9.35,
|
||||
);
|
||||
tl.to(
|
||||
root.querySelector(".workbench"),
|
||||
{ rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
|
||||
10.08,
|
||||
);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines[compositionId] = tl;
|
||||
|
||||
const previewTime = new URLSearchParams(window.location.search).get("t");
|
||||
if (previewTime !== null) {
|
||||
tl.time(Number(previewTime));
|
||||
}
|
||||
}
|
||||
|
||||
window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
|
||||
const root =
|
||||
document.querySelector('[data-composition-id="' + compositionId + '"] .vscode-theme-scene') ||
|
||||
document.querySelector('.vscode-theme-scene[data-composition-id="' + compositionId + '"]') ||
|
||||
document.querySelector('[data-composition-id="' + compositionId + '"]');
|
||||
const theme =
|
||||
typeof themeOrId === "string"
|
||||
? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
|
||||
: themeOrId;
|
||||
if (!root || !theme) return;
|
||||
root.querySelector(".theme-label").textContent = theme.label;
|
||||
root.querySelector(".theme-source").textContent = theme.sourceFile;
|
||||
applyTheme(root, theme);
|
||||
renderCode(root);
|
||||
buildTimeline(root, compositionId);
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,483 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.vscode-theme-scene {
|
||||
--activity-bg: #181818;
|
||||
--activity-fg: #d7d7d7;
|
||||
--activity-muted: #868686;
|
||||
--activity-active: #0078d4;
|
||||
--sidebar-bg: #181818;
|
||||
--sidebar-fg: #cccccc;
|
||||
--sidebar-border: #2b2b2b;
|
||||
--tab-bg: #181818;
|
||||
--tab-active-bg: #1f1f1f;
|
||||
--tab-active-fg: #ffffff;
|
||||
--tab-inactive-fg: #9d9d9d;
|
||||
--tab-border: #2b2b2b;
|
||||
--editor-bg: #1f1f1f;
|
||||
--editor-fg: #cccccc;
|
||||
--editor-line: rgba(255, 255, 255, 0.04);
|
||||
--gutter-fg: #6e7681;
|
||||
--gutter-active-fg: #cccccc;
|
||||
--panel-bg: #181818;
|
||||
--panel-border: #2b2b2b;
|
||||
--status-bg: #181818;
|
||||
--status-fg: #cccccc;
|
||||
--status-border: #2b2b2b;
|
||||
--title-bg: #181818;
|
||||
--title-fg: #cccccc;
|
||||
--token-comment: #6a9955;
|
||||
--token-keyword: #c586c0;
|
||||
--token-function: #dcdcaa;
|
||||
--token-string: #ce9178;
|
||||
--token-number: #b5cea8;
|
||||
--token-variable: #9cdcfe;
|
||||
--token-parameter: #9cdcfe;
|
||||
--token-operator: #d4d4d4;
|
||||
--token-punctuation: #d4d4d4;
|
||||
--token-class-name: #4ec9b0;
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
|
||||
url("../assets/background.jpeg") center / cover no-repeat;
|
||||
color: var(--editor-fg);
|
||||
}
|
||||
|
||||
.scene-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 54px 70px 92px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
perspective: 2200px;
|
||||
perspective-origin: 56% 52%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
min-height: 66px;
|
||||
text-shadow:
|
||||
0 2px 12px rgba(0, 0, 0, 0.42),
|
||||
0 14px 34px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.kicker {
|
||||
margin: 0 0 7px;
|
||||
color: var(--gutter-fg);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.48),
|
||||
0 10px 26px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: var(--editor-fg);
|
||||
font-size: 44px;
|
||||
line-height: 1;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.source-note {
|
||||
width: 510px;
|
||||
color: var(--gutter-fg);
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
text-align: right;
|
||||
text-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.46),
|
||||
0 12px 30px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.workbench {
|
||||
height: 824px;
|
||||
display: grid;
|
||||
grid-template-columns: 54px 290px 1fr;
|
||||
grid-template-rows: 36px 1fr 26px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--sidebar-border);
|
||||
border-radius: 8px;
|
||||
background: var(--editor-bg);
|
||||
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
|
||||
transform: translateZ(0);
|
||||
transform-origin: 82% 50%;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 210px;
|
||||
align-items: center;
|
||||
background: var(--title-bg);
|
||||
color: var(--title-fg);
|
||||
border-bottom: 1px solid var(--tab-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.traffic {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.traffic span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.traffic span:nth-child(1) {
|
||||
background: #ff5f57;
|
||||
}
|
||||
.traffic span:nth-child(2) {
|
||||
background: #ffbd2e;
|
||||
}
|
||||
.traffic span:nth-child(3) {
|
||||
background: #28c840;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
justify-self: center;
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
.command-center {
|
||||
justify-self: end;
|
||||
width: 176px;
|
||||
height: 22px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
|
||||
border-radius: 5px;
|
||||
color: color-mix(in srgb, var(--title-fg), transparent 18%);
|
||||
}
|
||||
|
||||
.activity {
|
||||
grid-row: 2 / 3;
|
||||
background: var(--activity-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--activity-muted);
|
||||
}
|
||||
|
||||
.activity-icon.active {
|
||||
color: var(--activity-fg);
|
||||
border-left: 2px solid var(--activity-active);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-row: 2 / 3;
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--sidebar-fg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: var(--sidebar-fg);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px;
|
||||
background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
border-bottom: 1px solid var(--sidebar-border);
|
||||
color: var(--sidebar-fg);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tree {
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tree-row {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px 0 18px;
|
||||
color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree-row.child {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.tree-row.selected {
|
||||
background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
|
||||
.editor-area {
|
||||
grid-row: 2 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: 36px 30px 1fr 138px;
|
||||
min-width: 0;
|
||||
background: var(--editor-bg);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: var(--tab-bg);
|
||||
border-bottom: 1px solid var(--tab-border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 205px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 13px;
|
||||
border-right: 1px solid var(--tab-border);
|
||||
background: var(--tab-active-bg);
|
||||
color: var(--tab-active-fg);
|
||||
border-top: 2px solid var(--activity-active);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
background: var(--tab-bg);
|
||||
color: var(--tab-inactive-fg);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 18px;
|
||||
color: var(--gutter-fg);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--editor-bg);
|
||||
color: var(--editor-fg);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1.52;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 28px;
|
||||
background: var(--editor-line);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.code {
|
||||
position: relative;
|
||||
padding: 20px 36px 18px 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
padding-right: 18px;
|
||||
color: var(--gutter-fg);
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line.is-active .line-number {
|
||||
color: var(--gutter-active-fg);
|
||||
}
|
||||
|
||||
.line-code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.char {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tok-comment {
|
||||
color: var(--token-comment);
|
||||
}
|
||||
.tok-keyword {
|
||||
color: var(--token-keyword);
|
||||
}
|
||||
.tok-function {
|
||||
color: var(--token-function);
|
||||
}
|
||||
.tok-string {
|
||||
color: var(--token-string);
|
||||
}
|
||||
.tok-number {
|
||||
color: var(--token-number);
|
||||
}
|
||||
.tok-variable {
|
||||
color: var(--token-variable);
|
||||
}
|
||||
.tok-parameter {
|
||||
color: var(--token-parameter);
|
||||
}
|
||||
.tok-operator {
|
||||
color: var(--token-operator);
|
||||
}
|
||||
.tok-punctuation {
|
||||
color: var(--token-punctuation);
|
||||
}
|
||||
.tok-class-name {
|
||||
color: var(--token-class-name);
|
||||
}
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 22px;
|
||||
background: var(--editor-fg);
|
||||
pointer-events: none;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
display: grid;
|
||||
grid-template-rows: 32px 1fr;
|
||||
background: var(--panel-bg);
|
||||
border-top: 1px solid var(--panel-border);
|
||||
color: var(--editor-fg);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
color: var(--gutter-fg);
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-tabs .active {
|
||||
color: var(--editor-fg);
|
||||
border-bottom: 1px solid var(--activity-active);
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
padding: 12px 20px;
|
||||
color: var(--editor-fg);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--token-function);
|
||||
}
|
||||
|
||||
.statusbar {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--status-bg);
|
||||
color: var(--status-fg);
|
||||
border-top: 1px solid var(--status-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-left,
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.remote {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin-left: -12px;
|
||||
background: var(--status-remote-bg, var(--activity-active));
|
||||
color: var(--status-remote-fg, #ffffff);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,478 @@
|
||||
// Generated by scripts/build-theme-registry.mjs from official VS Code theme JSON.
|
||||
window.VSCODE_THEME_REGISTRY = [
|
||||
{
|
||||
id: "light-2026",
|
||||
label: "Light 2026",
|
||||
sourceFile: "2026-light.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"activityBar.activeBorder": "#000000",
|
||||
"activityBar.background": "#FAFAFD",
|
||||
"activityBar.border": "#F0F1F2FF",
|
||||
"activityBar.foreground": "#202020",
|
||||
"activityBar.inactiveForeground": "#606060",
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#202020",
|
||||
"editor.lineHighlightBackground": "#EAEAEA40",
|
||||
"editor.selectionBackground": "#0069CC40",
|
||||
"editorGroup.border": "#E5E5E5",
|
||||
"editorGroupHeader.tabsBackground": "#FAFAFD",
|
||||
"editorGroupHeader.tabsBorder": "#F0F1F2FF",
|
||||
"editorLineNumber.activeForeground": "#202020",
|
||||
"editorLineNumber.foreground": "#606060",
|
||||
foreground: "#202020",
|
||||
"icon.foreground": "#606060",
|
||||
"panel.background": "#FAFAFD",
|
||||
"panel.border": "#F0F1F2FF",
|
||||
"sideBar.background": "#FAFAFD",
|
||||
"sideBar.border": "#F0F1F2FF",
|
||||
"sideBar.foreground": "#202020",
|
||||
"sideBarSectionHeader.background": "#FAFAFD",
|
||||
"sideBarSectionHeader.border": "#F0F1F2FF",
|
||||
"sideBarSectionHeader.foreground": "#202020",
|
||||
"sideBarTitle.foreground": "#202020",
|
||||
"statusBar.background": "#FAFAFD",
|
||||
"statusBar.border": "#F0F1F2FF",
|
||||
"statusBar.foreground": "#606060",
|
||||
"statusBarItem.remoteBackground": "#005FB8",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#FFFFFF",
|
||||
"tab.activeBorder": "#FFFFFF",
|
||||
"tab.activeBorderTop": "#000000",
|
||||
"tab.activeForeground": "#202020",
|
||||
"tab.border": "#F0F1F2FF",
|
||||
"tab.inactiveBackground": "#FAFAFD",
|
||||
"tab.inactiveForeground": "#606060",
|
||||
"terminal.foreground": "#3B3B3B",
|
||||
"terminalCursor.foreground": "#202020",
|
||||
"titleBar.activeBackground": "#FAFAFD",
|
||||
"titleBar.activeForeground": "#606060",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#6e7781",
|
||||
keyword: "#1f2328",
|
||||
function: "#0550ae",
|
||||
string: "#0a3069",
|
||||
number: "#0550ae",
|
||||
variable: "#1f2328",
|
||||
parameter: "#953800",
|
||||
operator: "#cf222e",
|
||||
punctuation: "#953800",
|
||||
className: "#116329",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "dark-2026",
|
||||
label: "Dark 2026",
|
||||
sourceFile: "2026-dark.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"activityBar.activeBorder": "#bfbfbf",
|
||||
"activityBar.background": "#191A1B",
|
||||
"activityBar.border": "#2A2B2CFF",
|
||||
"activityBar.foreground": "#bfbfbf",
|
||||
"activityBar.inactiveForeground": "#8C8C8C",
|
||||
"editor.background": "#121314",
|
||||
"editor.foreground": "#BBBEBF",
|
||||
"editor.lineHighlightBackground": "#242526",
|
||||
"editor.selectionBackground": "#276782dd",
|
||||
"editorGroup.border": "#FFFFFF17",
|
||||
"editorGroupHeader.tabsBackground": "#191A1B",
|
||||
"editorGroupHeader.tabsBorder": "#2A2B2CFF",
|
||||
"editorLineNumber.activeForeground": "#BBBEBF",
|
||||
"editorLineNumber.foreground": "#858889",
|
||||
foreground: "#bfbfbf",
|
||||
"icon.foreground": "#8C8C8C",
|
||||
"panel.background": "#191A1B",
|
||||
"panel.border": "#2A2B2CFF",
|
||||
"sideBar.background": "#191A1B",
|
||||
"sideBar.border": "#2A2B2CFF",
|
||||
"sideBar.foreground": "#bfbfbf",
|
||||
"sideBarSectionHeader.background": "#191A1B",
|
||||
"sideBarSectionHeader.border": "#2A2B2CFF",
|
||||
"sideBarSectionHeader.foreground": "#bfbfbf",
|
||||
"sideBarTitle.foreground": "#bfbfbf",
|
||||
"statusBar.background": "#191A1B",
|
||||
"statusBar.border": "#2A2B2CFF",
|
||||
"statusBar.foreground": "#8C8C8C",
|
||||
"statusBarItem.remoteBackground": "#0078D4",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#121314",
|
||||
"tab.activeBorder": "#121314",
|
||||
"tab.activeBorderTop": "#3994BC",
|
||||
"tab.activeForeground": "#bfbfbf",
|
||||
"tab.border": "#2A2B2CFF",
|
||||
"tab.inactiveBackground": "#191A1B",
|
||||
"tab.inactiveForeground": "#8C8C8C",
|
||||
"terminal.background": "#191A1B",
|
||||
"terminal.foreground": "#CCCCCC",
|
||||
"terminalCursor.foreground": "#bfbfbf",
|
||||
"titleBar.activeBackground": "#191A1B",
|
||||
"titleBar.activeForeground": "#8C8C8C",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#8b949e",
|
||||
keyword: "#c9d1d9",
|
||||
function: "#79c0ff",
|
||||
string: "#a5d6ff",
|
||||
number: "#79c0ff",
|
||||
variable: "#c9d1d9",
|
||||
parameter: "#ffa657",
|
||||
operator: "#ff7b72",
|
||||
punctuation: "#ffa657",
|
||||
className: "#7ee787",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "dark-plus",
|
||||
label: "Dark+",
|
||||
sourceFile: "dark_plus.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"editor.background": "#1E1E1E",
|
||||
"editor.foreground": "#D4D4D4",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#ccc3",
|
||||
"sideBarTitle.foreground": "#BBBBBB",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#6A9955",
|
||||
keyword: "#d7ba7d",
|
||||
function: "#DCDCAA",
|
||||
string: "#d16969",
|
||||
number: "#b5cea8",
|
||||
variable: "#4FC1FF",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#d7ba7d",
|
||||
punctuation: "#CE9178",
|
||||
className: "#4EC9B0",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "dark-modern",
|
||||
label: "Dark Modern",
|
||||
sourceFile: "dark_modern.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"activityBar.activeBorder": "#0078D4",
|
||||
"activityBar.background": "#181818",
|
||||
"activityBar.border": "#2B2B2B",
|
||||
"activityBar.foreground": "#D7D7D7",
|
||||
"activityBar.inactiveForeground": "#868686",
|
||||
"editor.background": "#1F1F1F",
|
||||
"editor.foreground": "#CCCCCC",
|
||||
"editorGroup.border": "#FFFFFF17",
|
||||
"editorGroupHeader.tabsBackground": "#181818",
|
||||
"editorGroupHeader.tabsBorder": "#2B2B2B",
|
||||
"editorLineNumber.activeForeground": "#CCCCCC",
|
||||
"editorLineNumber.foreground": "#6E7681",
|
||||
foreground: "#CCCCCC",
|
||||
"icon.foreground": "#CCCCCC",
|
||||
"panel.background": "#181818",
|
||||
"panel.border": "#2B2B2B",
|
||||
"sideBar.background": "#181818",
|
||||
"sideBar.border": "#2B2B2B",
|
||||
"sideBar.foreground": "#CCCCCC",
|
||||
"sideBarSectionHeader.background": "#181818",
|
||||
"sideBarSectionHeader.border": "#2B2B2B",
|
||||
"sideBarSectionHeader.foreground": "#CCCCCC",
|
||||
"sideBarTitle.foreground": "#CCCCCC",
|
||||
"statusBar.background": "#181818",
|
||||
"statusBar.border": "#2B2B2B",
|
||||
"statusBar.foreground": "#CCCCCC",
|
||||
"statusBarItem.remoteBackground": "#0078D4",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#1F1F1F",
|
||||
"tab.activeBorder": "#1F1F1F",
|
||||
"tab.activeBorderTop": "#0078D4",
|
||||
"tab.activeForeground": "#FFFFFF",
|
||||
"tab.border": "#2B2B2B",
|
||||
"tab.inactiveBackground": "#181818",
|
||||
"tab.inactiveForeground": "#9D9D9D",
|
||||
"terminal.foreground": "#CCCCCC",
|
||||
"titleBar.activeBackground": "#181818",
|
||||
"titleBar.activeForeground": "#CCCCCC",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#6A9955",
|
||||
keyword: "#d7ba7d",
|
||||
function: "#DCDCAA",
|
||||
string: "#d16969",
|
||||
number: "#b5cea8",
|
||||
variable: "#4FC1FF",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#d7ba7d",
|
||||
punctuation: "#CE9178",
|
||||
className: "#4EC9B0",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "light-plus",
|
||||
label: "Light+",
|
||||
sourceFile: "light_plus.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#000000",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#61616130",
|
||||
"sideBarTitle.foreground": "#6F6F6F",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#008000",
|
||||
keyword: "#EE0000",
|
||||
function: "#795E26",
|
||||
string: "#811f3f",
|
||||
number: "#098658",
|
||||
variable: "#0070C1",
|
||||
parameter: "#001080",
|
||||
operator: "#EE0000",
|
||||
punctuation: "#d16969",
|
||||
className: "#267f99",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "light-modern",
|
||||
label: "Light Modern",
|
||||
sourceFile: "light_modern.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"activityBar.activeBorder": "#005FB8",
|
||||
"activityBar.background": "#F8F8F8",
|
||||
"activityBar.border": "#E5E5E5",
|
||||
"activityBar.foreground": "#1F1F1F",
|
||||
"activityBar.inactiveForeground": "#616161",
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#3B3B3B",
|
||||
"editorGroup.border": "#E5E5E5",
|
||||
"editorGroupHeader.tabsBackground": "#F8F8F8",
|
||||
"editorGroupHeader.tabsBorder": "#E5E5E5",
|
||||
"editorLineNumber.activeForeground": "#171184",
|
||||
"editorLineNumber.foreground": "#6E7681",
|
||||
foreground: "#3B3B3B",
|
||||
"icon.foreground": "#3B3B3B",
|
||||
"panel.background": "#F8F8F8",
|
||||
"panel.border": "#E5E5E5",
|
||||
"sideBar.background": "#F8F8F8",
|
||||
"sideBar.border": "#E5E5E5",
|
||||
"sideBar.foreground": "#3B3B3B",
|
||||
"sideBarSectionHeader.background": "#F8F8F8",
|
||||
"sideBarSectionHeader.border": "#E5E5E5",
|
||||
"sideBarSectionHeader.foreground": "#3B3B3B",
|
||||
"sideBarTitle.foreground": "#3B3B3B",
|
||||
"statusBar.background": "#F8F8F8",
|
||||
"statusBar.border": "#E5E5E5",
|
||||
"statusBar.foreground": "#3B3B3B",
|
||||
"statusBarItem.remoteBackground": "#005FB8",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#FFFFFF",
|
||||
"tab.activeBorder": "#F8F8F8",
|
||||
"tab.activeBorderTop": "#005FB8",
|
||||
"tab.activeForeground": "#3B3B3B",
|
||||
"tab.border": "#E5E5E5",
|
||||
"tab.inactiveBackground": "#F8F8F8",
|
||||
"tab.inactiveForeground": "#868686",
|
||||
"terminal.foreground": "#3B3B3B",
|
||||
"terminalCursor.foreground": "#005FB8",
|
||||
"titleBar.activeBackground": "#F8F8F8",
|
||||
"titleBar.activeForeground": "#1E1E1E",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#008000",
|
||||
keyword: "#EE0000",
|
||||
function: "#795E26",
|
||||
string: "#811f3f",
|
||||
number: "#098658",
|
||||
variable: "#0070C1",
|
||||
parameter: "#001080",
|
||||
operator: "#EE0000",
|
||||
punctuation: "#d16969",
|
||||
className: "#267f99",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "visual-studio-dark",
|
||||
label: "Visual Studio Dark",
|
||||
sourceFile: "dark_vs.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"editor.background": "#1E1E1E",
|
||||
"editor.foreground": "#D4D4D4",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#ccc3",
|
||||
"sideBarTitle.foreground": "#BBBBBB",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#6A9955",
|
||||
keyword: "#d4d4d4",
|
||||
function: "#9cdcfe",
|
||||
string: "#d16969",
|
||||
number: "#b5cea8",
|
||||
variable: "#569cd6",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#569cd6",
|
||||
punctuation: "#569cd6",
|
||||
className: "#9cdcfe",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "visual-studio-light",
|
||||
label: "Visual Studio Light",
|
||||
sourceFile: "light_vs.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#000000",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#61616130",
|
||||
"sideBarTitle.foreground": "#6F6F6F",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#008000",
|
||||
keyword: "#000000",
|
||||
function: "#0451a5",
|
||||
string: "#811f3f",
|
||||
number: "#098658",
|
||||
variable: "#0000ff",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#0000ff",
|
||||
punctuation: "#800000",
|
||||
className: "#0451a5",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "high-contrast",
|
||||
label: "Default High Contrast",
|
||||
sourceFile: "hc_black.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"editor.background": "#000000",
|
||||
"editor.foreground": "#FFFFFF",
|
||||
"editor.selectionBackground": "#FFFFFF",
|
||||
"sideBarTitle.foreground": "#FFFFFF",
|
||||
"statusBarItem.remoteBackground": "#00000000",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#7ca668",
|
||||
keyword: "#C586C0",
|
||||
function: "#DCDCAA",
|
||||
string: "#d16969",
|
||||
number: "#b5cea8",
|
||||
variable: "#9CDCFE",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#569cd6",
|
||||
punctuation: "#4EC9B0",
|
||||
className: "#4EC9B0",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "high-contrast-light",
|
||||
label: "Default High Contrast Light",
|
||||
sourceFile: "hc_light.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"statusBarItem.remoteBackground": "#FFFFFF",
|
||||
"statusBarItem.remoteForeground": "#000000",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#515151",
|
||||
keyword: "#EE0000",
|
||||
function: "#5e2cbc",
|
||||
string: "#811F3F",
|
||||
number: "#096d48",
|
||||
variable: "#02715D",
|
||||
parameter: "#001080",
|
||||
operator: "#EE0000",
|
||||
punctuation: "#D16969",
|
||||
className: "#185E73",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "solarized-light",
|
||||
label: "Solarized Light",
|
||||
sourceFile: "solarized-light-color-theme.json",
|
||||
uiTheme: "vs",
|
||||
colors: {
|
||||
"activityBar.background": "#DDD6C1",
|
||||
"activityBar.foreground": "#584c27",
|
||||
"editor.background": "#FDF6E3",
|
||||
"editor.foreground": "#657B83",
|
||||
"editor.lineHighlightBackground": "#EEE8D5",
|
||||
"editor.selectionBackground": "#EEE8D5",
|
||||
"editorGroup.border": "#DDD6C1",
|
||||
"editorGroupHeader.tabsBackground": "#D9D2C2",
|
||||
"editorLineNumber.activeForeground": "#567983",
|
||||
"panel.border": "#DDD6C1",
|
||||
"sideBar.background": "#EEE8D5",
|
||||
"sideBarTitle.foreground": "#586E75",
|
||||
"statusBar.background": "#EEE8D5",
|
||||
"statusBar.foreground": "#586E75",
|
||||
"statusBarItem.remoteBackground": "#AC9D57",
|
||||
"tab.activeBackground": "#FDF6E3",
|
||||
"tab.border": "#DDD6C1",
|
||||
"tab.inactiveBackground": "#D3CBB7",
|
||||
"tab.inactiveForeground": "#586E75",
|
||||
"terminal.background": "#FDF6E3",
|
||||
"titleBar.activeBackground": "#EEE8D5",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#93A1A1",
|
||||
keyword: "#CB4B16",
|
||||
function: "#268BD2",
|
||||
string: "#DC322F",
|
||||
number: "#D33682",
|
||||
variable: "#268BD2",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#859900",
|
||||
punctuation: "#DC322F",
|
||||
className: "#CB4B16",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "monokai",
|
||||
label: "Monokai",
|
||||
sourceFile: "monokai-color-theme.json",
|
||||
uiTheme: "vs-dark",
|
||||
colors: {
|
||||
"activityBar.background": "#272822",
|
||||
"activityBar.foreground": "#f8f8f2",
|
||||
"editor.background": "#272822",
|
||||
"editor.foreground": "#f8f8f2",
|
||||
"editor.lineHighlightBackground": "#3e3d32",
|
||||
"editor.selectionBackground": "#878b9180",
|
||||
"editorGroup.border": "#34352f",
|
||||
"editorGroupHeader.tabsBackground": "#1e1f1c",
|
||||
"editorLineNumber.activeForeground": "#c2c2bf",
|
||||
"editorLineNumber.foreground": "#90908a",
|
||||
"panel.border": "#414339",
|
||||
"sideBar.background": "#1e1f1c",
|
||||
"sideBarSectionHeader.background": "#272822",
|
||||
"statusBar.background": "#414339",
|
||||
"statusBarItem.remoteBackground": "#AC6218",
|
||||
"tab.border": "#1e1f1c",
|
||||
"tab.inactiveBackground": "#34352f",
|
||||
"tab.inactiveForeground": "#ccccc7",
|
||||
"titleBar.activeBackground": "#1e1f1c",
|
||||
},
|
||||
tokens: {
|
||||
comment: "#88846f",
|
||||
keyword: "#66D9EF",
|
||||
function: "#66D9EF",
|
||||
string: "#AE81FF",
|
||||
number: "#AE81FFA0",
|
||||
variable: "#FD971F",
|
||||
parameter: "#FD971F",
|
||||
operator: "#F92672",
|
||||
punctuation: "#A6E22E",
|
||||
className: "#66D9EF",
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,664 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "2026 Dark",
|
||||
"include": "./dark_modern.json",
|
||||
"type": "dark",
|
||||
"colors": {
|
||||
"foreground": "#bfbfbf",
|
||||
"disabledForeground": "#555555",
|
||||
"errorForeground": "#f48771",
|
||||
"descriptionForeground": "#8C8C8C",
|
||||
"icon.foreground": "#8C8C8C",
|
||||
"focusBorder": "#3994BCB3",
|
||||
"textBlockQuote.background": "#242526",
|
||||
"textBlockQuote.border": "#2A2B2CFF",
|
||||
"textCodeBlock.background": "#242526",
|
||||
"textLink.foreground": "#48A0C7",
|
||||
"textLink.activeForeground": "#53A5CA",
|
||||
"textPreformat.background": "#262626",
|
||||
"textPreformat.foreground": "#8C8C8C",
|
||||
"textSeparator.foreground": "#2a2a2aFF",
|
||||
"button.background": "#297AA0",
|
||||
"button.foreground": "#FFFFFF",
|
||||
"button.hoverBackground": "#2B7DA3",
|
||||
"button.border": "#333536FF",
|
||||
"button.secondaryHoverBackground": "#FFFFFF10",
|
||||
"checkbox.background": "#242526",
|
||||
"checkbox.border": "#333536",
|
||||
"checkbox.foreground": "#8C8C8C",
|
||||
"dropdown.background": "#191A1B",
|
||||
"dropdown.border": "#333536",
|
||||
"dropdown.foreground": "#bfbfbf",
|
||||
"dropdown.listBackground": "#191A1B",
|
||||
"input.background": "#191A1B",
|
||||
"input.border": "#333536FF",
|
||||
"input.foreground": "#bfbfbf",
|
||||
"input.placeholderForeground": "#555555",
|
||||
"inputOption.activeBackground": "#3994BC33",
|
||||
"inputOption.activeForeground": "#bfbfbf",
|
||||
"inputOption.activeBorder": "#2A2B2CFF",
|
||||
"inputValidation.infoBackground": "#1E3A47",
|
||||
"inputValidation.infoBorder": "#3994BC",
|
||||
"inputValidation.infoForeground": "#bfbfbf",
|
||||
"inputValidation.warningBackground": "#352A05",
|
||||
"inputValidation.warningBorder": "#B89500",
|
||||
"inputValidation.warningForeground": "#bfbfbf",
|
||||
"inputValidation.errorBackground": "#3A1D1D",
|
||||
"inputValidation.errorBorder": "#BE1100",
|
||||
"inputValidation.errorForeground": "#bfbfbf",
|
||||
"scrollbar.shadow": "#191B1D4D",
|
||||
"scrollbarSlider.background": "#83848533",
|
||||
"scrollbarSlider.hoverBackground": "#83848566",
|
||||
"scrollbarSlider.activeBackground": "#83848599",
|
||||
"badge.background": "#3994BCF0",
|
||||
"badge.foreground": "#FFFFFF",
|
||||
"progressBar.background": "#878889",
|
||||
"list.activeSelectionBackground": "#3994BC26",
|
||||
"list.activeSelectionForeground": "#ededed",
|
||||
"list.inactiveSelectionBackground": "#2C2D2E",
|
||||
"list.inactiveSelectionForeground": "#ededed",
|
||||
"list.hoverBackground": "#FFFFFF0D",
|
||||
"list.hoverForeground": "#bfbfbf",
|
||||
"list.dropBackground": "#3994BC1A",
|
||||
"toolbar.hoverBackground": "#FFFFFF18",
|
||||
"list.focusBackground": "#3994BC26",
|
||||
"list.focusForeground": "#bfbfbf",
|
||||
"list.focusOutline": "#3994BCB3",
|
||||
"list.highlightForeground": "#48A0C7",
|
||||
"list.invalidItemForeground": "#444444",
|
||||
"list.errorForeground": "#f48771",
|
||||
"list.warningForeground": "#e5ba7d",
|
||||
"activityBar.background": "#191A1B",
|
||||
"activityBar.foreground": "#bfbfbf",
|
||||
"activityBar.inactiveForeground": "#8C8C8C",
|
||||
"activityBar.border": "#2A2B2CFF",
|
||||
"activityBar.activeBorder": "#bfbfbf",
|
||||
"activityBar.activeFocusBorder": "#3994BCB3",
|
||||
"activityBarBadge.background": "#3994BC",
|
||||
"activityBarBadge.foreground": "#FFFFFF",
|
||||
"activityBarTop.activeBorder": "#bfbfbf",
|
||||
"sideBar.background": "#191A1B",
|
||||
"sideBar.foreground": "#bfbfbf",
|
||||
"sideBar.border": "#2A2B2CFF",
|
||||
"sideBarTitle.foreground": "#bfbfbf",
|
||||
"sideBarSectionHeader.background": "#191A1B",
|
||||
"sideBarSectionHeader.foreground": "#bfbfbf",
|
||||
"sideBarSectionHeader.border": "#2A2B2CFF",
|
||||
"titleBar.activeBackground": "#191A1B",
|
||||
"titleBar.activeForeground": "#8C8C8C",
|
||||
"titleBar.inactiveBackground": "#191A1B",
|
||||
"titleBar.inactiveForeground": "#8C8C8C",
|
||||
"titleBar.border": "#2A2B2CFF",
|
||||
"menubar.selectionBackground": "#242526",
|
||||
"menubar.selectionForeground": "#bfbfbf",
|
||||
"menu.background": "#202122",
|
||||
"menu.foreground": "#bfbfbf",
|
||||
"menu.selectionBackground": "#3994BC26",
|
||||
"menu.selectionForeground": "#bfbfbf",
|
||||
"menu.separatorBackground": "#2A2B2C",
|
||||
"menu.border": "#2A2B2CFF",
|
||||
"commandCenter.foreground": "#bfbfbf",
|
||||
"commandCenter.activeForeground": "#bfbfbf",
|
||||
"commandCenter.background": "#191A1B",
|
||||
"commandCenter.activeBackground": "#FFFFFF0F",
|
||||
"commandCenter.border": "#2E3031",
|
||||
"editor.background": "#121314",
|
||||
"editor.foreground": "#BBBEBF",
|
||||
"editorStickyScroll.background": "#121314",
|
||||
"editorStickyScrollHover.background": "#202122",
|
||||
"editorStickyScroll.border": "#2A2B2CFF",
|
||||
"editorLineNumber.foreground": "#858889",
|
||||
"editorLineNumber.activeForeground": "#BBBEBF",
|
||||
"editorCursor.foreground": "#BBBEBF",
|
||||
"editor.selectionBackground": "#276782dd",
|
||||
"editor.inactiveSelectionBackground": "#27678260",
|
||||
"editor.selectionHighlightBackground": "#27678260",
|
||||
"editor.wordHighlightBackground": "#27678250",
|
||||
"editor.wordHighlightStrongBackground": "#27678280",
|
||||
"editor.findMatchBackground": "#27678290",
|
||||
"editor.findMatchHighlightBackground": "#27678280",
|
||||
"editor.findRangeHighlightBackground": "#242526",
|
||||
"editor.hoverHighlightBackground": "#242526",
|
||||
"editor.lineHighlightBackground": "#242526",
|
||||
"editor.rangeHighlightBackground": "#242526",
|
||||
"editorLink.activeForeground": "#3a94bc",
|
||||
"editorWhitespace.foreground": "#8C8C8C4D",
|
||||
"editorIndentGuide.background": "#8384854D",
|
||||
"editorIndentGuide.activeBackground": "#838485",
|
||||
"editorRuler.foreground": "#848484",
|
||||
"editorCodeLens.foreground": "#8C8C8C",
|
||||
"editorBracketMatch.background": "#3994BC55",
|
||||
"editorBracketMatch.border": "#2A2B2CFF",
|
||||
"editorWidget.background": "#202122",
|
||||
"editorWidget.border": "#2A2B2CFF",
|
||||
"editorWidget.foreground": "#bfbfbf",
|
||||
"editorSuggestWidget.background": "#202122",
|
||||
"editorSuggestWidget.border": "#2A2B2CFF",
|
||||
"editorSuggestWidget.foreground": "#bfbfbf",
|
||||
"editorSuggestWidget.highlightForeground": "#bfbfbf",
|
||||
"editorSuggestWidget.selectedBackground": "#3994BC26",
|
||||
"editorHoverWidget.background": "#202122",
|
||||
"editorHoverWidget.border": "#2A2B2CFF",
|
||||
"widget.border": "#2A2B2CFF",
|
||||
"peekView.border": "#2A2B2CFF",
|
||||
"peekViewEditor.background": "#191A1B",
|
||||
"peekViewEditor.matchHighlightBackground": "#3994BC33",
|
||||
"peekViewResult.background": "#191A1B",
|
||||
"peekViewResult.fileForeground": "#bfbfbf",
|
||||
"peekViewResult.lineForeground": "#8C8C8C",
|
||||
"peekViewResult.matchHighlightBackground": "#3994BC33",
|
||||
"peekViewResult.selectionBackground": "#3994BC26",
|
||||
"peekViewResult.selectionForeground": "#bfbfbf",
|
||||
"peekViewTitle.background": "#242526",
|
||||
"peekViewTitleDescription.foreground": "#8C8C8C",
|
||||
"peekViewTitleLabel.foreground": "#bfbfbf",
|
||||
"editorGutter.background": "#121314",
|
||||
"editorGutter.addedBackground": "#72C892",
|
||||
"editorGutter.deletedBackground": "#F28772",
|
||||
"diffEditor.insertedLineBackground": "#347d3926",
|
||||
"diffEditor.insertedTextBackground": "#57ab5a4d",
|
||||
"diffEditor.removedLineBackground": "#c93c3726",
|
||||
"diffEditor.removedTextBackground": "#f470674d",
|
||||
"editorOverviewRuler.border": "#2A2B2CFF",
|
||||
"editorOverviewRuler.findMatchForeground": "#3a94bc99",
|
||||
"editorOverviewRuler.modifiedForeground": "#6ab890",
|
||||
"editorOverviewRuler.addedForeground": "#73c991",
|
||||
"editorOverviewRuler.deletedForeground": "#f48771",
|
||||
"editorOverviewRuler.errorForeground": "#f48771",
|
||||
"editorOverviewRuler.warningForeground": "#e5ba7d",
|
||||
"panel.background": "#191A1B",
|
||||
"panel.border": "#2A2B2CFF",
|
||||
"panelTitle.activeBorder": "#3994BC",
|
||||
"panelTitle.activeForeground": "#bfbfbf",
|
||||
"panelTitle.inactiveForeground": "#8C8C8C",
|
||||
"statusBar.background": "#191A1B",
|
||||
"statusBar.foreground": "#8C8C8C",
|
||||
"statusBar.border": "#2A2B2CFF",
|
||||
"statusBar.focusBorder": "#3994BCB3",
|
||||
"statusBar.debuggingBackground": "#3994BC",
|
||||
"statusBar.debuggingForeground": "#FFFFFF",
|
||||
"statusBar.noFolderBackground": "#191A1B",
|
||||
"statusBar.noFolderForeground": "#8C8C8C",
|
||||
"statusBarItem.activeBackground": "#4B4C4D",
|
||||
"statusBarItem.hoverBackground": "#262728",
|
||||
"statusBarItem.focusBorder": "#3994BCB3",
|
||||
"statusBarItem.prominentBackground": "#3994BC",
|
||||
"statusBarItem.prominentForeground": "#FFFFFF",
|
||||
"statusBarItem.prominentHoverBackground": "#3994BC",
|
||||
"tab.activeBackground": "#121314",
|
||||
"tab.activeForeground": "#bfbfbf",
|
||||
"tab.inactiveBackground": "#191A1B",
|
||||
"tab.inactiveForeground": "#8C8C8C",
|
||||
"tab.border": "#2A2B2CFF",
|
||||
"tab.lastPinnedBorder": "#2A2B2CFF",
|
||||
"tab.activeBorderTop": "#3994BC",
|
||||
"tab.hoverBackground": "#121314",
|
||||
"tab.hoverForeground": "#bfbfbf",
|
||||
"tab.unfocusedActiveBackground": "#121314",
|
||||
"tab.unfocusedActiveForeground": "#8C8C8C",
|
||||
"tab.unfocusedInactiveBackground": "#191A1B",
|
||||
"tab.unfocusedInactiveForeground": "#444444",
|
||||
"editorGroupHeader.tabsBackground": "#191A1B",
|
||||
"tab.activeBorder": "#121314",
|
||||
"editorGroupHeader.tabsBorder": "#2A2B2CFF",
|
||||
"breadcrumb.foreground": "#8C8C8C",
|
||||
"breadcrumb.background": "#121314",
|
||||
"breadcrumb.focusForeground": "#bfbfbf",
|
||||
"breadcrumb.activeSelectionForeground": "#bfbfbf",
|
||||
"breadcrumbPicker.background": "#202122",
|
||||
"notificationCenter.border": "#2A2B2CFF",
|
||||
"notificationCenterHeader.foreground": "#bfbfbf",
|
||||
"notificationCenterHeader.background": "#242526",
|
||||
"notificationToast.border": "#2A2B2CFF",
|
||||
"notifications.foreground": "#bfbfbf",
|
||||
"notifications.background": "#202122",
|
||||
"notifications.border": "#2A2B2CFF",
|
||||
"notificationLink.foreground": "#3a94bc",
|
||||
"notificationsWarningIcon.foreground": "#CCA700",
|
||||
"notificationsErrorIcon.foreground": "#f48771",
|
||||
"notificationsInfoIcon.foreground": "#3a94bc",
|
||||
"activityWarningBadge.foreground": "#202020",
|
||||
"activityWarningBadge.background": "#CCA700",
|
||||
"activityErrorBadge.foreground": "#FFFFFF",
|
||||
"activityErrorBadge.background": "#f48771",
|
||||
"extensionButton.prominentBackground": "#297AA0",
|
||||
"extensionButton.prominentForeground": "#FFFFFF",
|
||||
"extensionButton.prominentHoverBackground": "#2B7DA3",
|
||||
"pickerGroup.border": "#2A2B2CFF",
|
||||
"pickerGroup.foreground": "#bfbfbf",
|
||||
"quickInput.background": "#202122",
|
||||
"quickInput.foreground": "#bfbfbf",
|
||||
"quickInputList.focusBackground": "#297AA0",
|
||||
"quickInputList.focusForeground": "#FFFFFF",
|
||||
"quickInputList.focusIconForeground": "#FFFFFF",
|
||||
"quickInputList.focusHighlightForeground": "#FFFFFF",
|
||||
"quickInputList.hoverBackground": "#262728",
|
||||
"terminal.selectionBackground": "#3994BC33",
|
||||
"terminal.background": "#191A1B",
|
||||
"terminal.border": "#2A2B2CFF",
|
||||
"terminal.tab.activeBorder": "#3994BC00",
|
||||
"terminalCursor.foreground": "#bfbfbf",
|
||||
"terminalCursor.background": "#191A1B",
|
||||
"gitDecoration.addedResourceForeground": "#73c991",
|
||||
"gitDecoration.modifiedResourceForeground": "#e5ba7d",
|
||||
"gitDecoration.deletedResourceForeground": "#f48771",
|
||||
"gitDecoration.untrackedResourceForeground": "#73c991",
|
||||
"gitDecoration.ignoredResourceForeground": "#8C8C8C",
|
||||
"gitDecoration.conflictingResourceForeground": "#f48771",
|
||||
"gitDecoration.stageModifiedResourceForeground": "#e5ba7d",
|
||||
"gitDecoration.stageDeletedResourceForeground": "#f48771",
|
||||
"quickInputTitle.background": "#202122",
|
||||
"commandCenter.activeBorder": "#333536",
|
||||
"quickInput.border": "#333536",
|
||||
"gauge.foreground": "#59a4f9",
|
||||
"gauge.background": "#58A4F94D",
|
||||
"gauge.border": "#2A2C2EFF",
|
||||
"gauge.warningForeground": "#e5ba7d",
|
||||
"gauge.warningBackground": "#E3B97E4D",
|
||||
"gauge.errorForeground": "#f48771",
|
||||
"gauge.errorBackground": "#F287724D",
|
||||
"chat.requestBubbleBackground": "#ffffff13",
|
||||
"chat.requestBubbleHoverBackground": "#ffffff22",
|
||||
"chat.inputWorkingBorderColor1": "#297AA0",
|
||||
"chat.inputWorkingBorderColor2": "#1C546F",
|
||||
"chat.inputWorkingBorderColor3": "#5BA8CC",
|
||||
"editorCommentsWidget.rangeBackground": "#488FAE26",
|
||||
"editorCommentsWidget.rangeActiveBackground": "#488FAE46",
|
||||
"charts.foreground": "#CCCCCC",
|
||||
"charts.lines": "#C8CACC80",
|
||||
"charts.blue": "#57A3F8",
|
||||
"charts.red": "#EF8773",
|
||||
"charts.yellow": "#E0B97F",
|
||||
"charts.orange": "#CD861A",
|
||||
"charts.green": "#86CF86",
|
||||
"charts.purple": "#AD80D7",
|
||||
"inlineChat.border": "#00000000",
|
||||
"minimapSlider.background": "#83848533",
|
||||
"minimapSlider.hoverBackground": "#83848566",
|
||||
"minimapSlider.activeBackground": "#83848599",
|
||||
|
||||
"agents.background": "#121314",
|
||||
"agentsPanel.background": "#191A1B",
|
||||
"agentsPanel.foreground": "#bfbfbf",
|
||||
"agentsPanel.border": "#2A2B2CFF",
|
||||
"agentsGradient.tintColor": "#297AA0",
|
||||
"agentsChatInput.background": "#202122",
|
||||
"agentsChatInput.foreground": "#bfbfbf",
|
||||
"agentsChatInput.border": "#333536",
|
||||
"agentsChatInput.focusBorder": "#3994BCB3",
|
||||
"agentsChatInput.placeholderForeground": "#555555",
|
||||
"agentsNewSessionButton.background": "#00000000",
|
||||
"agentsNewSessionButton.foreground": "#bfbfbf",
|
||||
"agentsNewSessionButton.border": "#333536",
|
||||
"agentsNewSessionButton.hoverBackground": "#FFFFFF18",
|
||||
"agentsBadge.background": "#3994BC",
|
||||
"agentsBadge.foreground": "#FFFFFF",
|
||||
"agentsUnreadBadge.background": "#3994BC",
|
||||
"agentsUnreadBadge.foreground": "#FFFFFF"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": ["comment", "punctuation.definition.comment", "string.comment"],
|
||||
"settings": {
|
||||
"foreground": "#8b949e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.other.placeholder", "constant.character"],
|
||||
"settings": {
|
||||
"foreground": "#ff7b72"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant",
|
||||
"entity.name.constant",
|
||||
"variable.other.constant",
|
||||
"variable.other.enummember",
|
||||
"variable.language",
|
||||
"entity"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
|
||||
"settings": {
|
||||
"foreground": "#ffa657"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"variable.parameter.function",
|
||||
"meta.jsx.children",
|
||||
"meta.block",
|
||||
"meta.tag.attributes",
|
||||
"entity.name.constant",
|
||||
"meta.object.member",
|
||||
"meta.embedded.expression"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#c9d1d9"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.function",
|
||||
"settings": {
|
||||
"foreground": "#d2a8ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name.tag", "support.class.component"],
|
||||
"settings": {
|
||||
"foreground": "#7ee787"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#ff7b72"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage", "storage.type"],
|
||||
"settings": {
|
||||
"foreground": "#ff7b72"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
|
||||
"settings": {
|
||||
"foreground": "#c9d1d9"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["string", "string punctuation.section.embedded source"],
|
||||
"settings": {
|
||||
"foreground": "#a5d6ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.property-name",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "variable",
|
||||
"settings": {
|
||||
"foreground": "#ffa657"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "variable.other",
|
||||
"settings": {
|
||||
"foreground": "#c9d1d9"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.broken",
|
||||
"settings": {
|
||||
"foreground": "#ffa198",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.deprecated",
|
||||
"settings": {
|
||||
"foreground": "#ffa198",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.illegal",
|
||||
"settings": {
|
||||
"foreground": "#ffa198",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.unimplemented",
|
||||
"settings": {
|
||||
"foreground": "#ffa198",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "carriage-return",
|
||||
"settings": {
|
||||
"foreground": "#f0f6fc",
|
||||
"background": "#8b1111",
|
||||
"fontStyle": "italic underline",
|
||||
"content": "^M"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "message.error",
|
||||
"settings": {
|
||||
"foreground": "#ffa198"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string variable",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["source.regexp", "string.regexp"],
|
||||
"settings": {
|
||||
"foreground": "#a5d6ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"string.regexp.character-class",
|
||||
"string.regexp constant.character.escape",
|
||||
"string.regexp source.ruby.embedded",
|
||||
"string.regexp string.regexp.arbitrary-repitition"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#a5d6ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp constant.character.escape",
|
||||
"settings": {
|
||||
"foreground": "#7ee787",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.constant",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.variable",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.type.property-name.json",
|
||||
"settings": {
|
||||
"foreground": "#7ee787"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.module-reference",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "punctuation.definition.list.begin.markdown",
|
||||
"settings": {
|
||||
"foreground": "#ffa657"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.heading", "markup.heading entity.name"],
|
||||
"settings": {
|
||||
"foreground": "#79c0ff",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.quote",
|
||||
"settings": {
|
||||
"foreground": "#7ee787"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"foreground": "#c9d1d9",
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"foreground": "#c9d1d9",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.underline"],
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.strikethrough"],
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
|
||||
"settings": {
|
||||
"foreground": "#ffa198",
|
||||
"background": "#490202"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["punctuation.section.embedded"],
|
||||
"settings": {
|
||||
"foreground": "#ff7b72"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
|
||||
"settings": {
|
||||
"foreground": "#7ee787",
|
||||
"background": "#04260f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.changed", "punctuation.definition.changed"],
|
||||
"settings": {
|
||||
"foreground": "#ffa657",
|
||||
"background": "#5a1e02"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.ignored", "markup.untracked"],
|
||||
"settings": {
|
||||
"foreground": "#0d1117",
|
||||
"background": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.range",
|
||||
"settings": {
|
||||
"foreground": "#d2a8ff",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.separator",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.output",
|
||||
"settings": {
|
||||
"foreground": "#79c0ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"brackethighlighter.tag",
|
||||
"brackethighlighter.curly",
|
||||
"brackethighlighter.round",
|
||||
"brackethighlighter.square",
|
||||
"brackethighlighter.angle",
|
||||
"brackethighlighter.quote"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#8b949e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "brackethighlighter.unmatched",
|
||||
"settings": {
|
||||
"foreground": "#ffa198"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.other.reference.link", "string.other.link"],
|
||||
"settings": {
|
||||
"foreground": "#a5d6ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.info-token",
|
||||
"settings": {
|
||||
"foreground": "#6796E6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.warn-token",
|
||||
"settings": {
|
||||
"foreground": "#CD9731"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.error-token",
|
||||
"settings": {
|
||||
"foreground": "#F44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.debug-token",
|
||||
"settings": {
|
||||
"foreground": "#B267E6"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true
|
||||
}
|
||||
@@ -0,0 +1,646 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "2026 Light",
|
||||
"include": "./light_modern.json",
|
||||
"type": "light",
|
||||
"colors": {
|
||||
"foreground": "#202020",
|
||||
"disabledForeground": "#BBBBBB",
|
||||
"errorForeground": "#ad0707",
|
||||
"descriptionForeground": "#606060",
|
||||
"icon.foreground": "#606060",
|
||||
"focusBorder": "#0069CCFF",
|
||||
"textBlockQuote.background": "#EAEAEA",
|
||||
"textBlockQuote.border": "#F0F1F2FF",
|
||||
"textCodeBlock.background": "#EAEAEA",
|
||||
"textLink.foreground": "#0069CC",
|
||||
"textLink.activeForeground": "#0069CC",
|
||||
"textPreformat.foreground": "#606060",
|
||||
"textPreformat.background": "#ECECEC",
|
||||
"textSeparator.foreground": "#EEEEEEFF",
|
||||
"button.background": "#0069CC",
|
||||
"button.foreground": "#FFFFFF",
|
||||
"button.hoverBackground": "#0063C1",
|
||||
"button.border": "#EEEEF1",
|
||||
"button.secondaryBackground": "#EAEAEA",
|
||||
"button.secondaryForeground": "#202020",
|
||||
"button.secondaryHoverBackground": "#F2F3F4",
|
||||
"checkbox.background": "#EAEAEA",
|
||||
"checkbox.border": "#D8D8D8",
|
||||
"checkbox.foreground": "#606060",
|
||||
"dropdown.background": "#FFFFFF",
|
||||
"dropdown.border": "#D8D8D8",
|
||||
"dropdown.foreground": "#202020",
|
||||
"dropdown.listBackground": "#FFFFFF",
|
||||
"input.background": "#FFFFFF",
|
||||
"input.border": "#D8D8D866",
|
||||
"input.foreground": "#202020",
|
||||
"input.placeholderForeground": "#999999",
|
||||
"inputOption.activeBackground": "#0069CC26",
|
||||
"inputOption.activeForeground": "#202020",
|
||||
"inputOption.activeBorder": "#F0F1F2FF",
|
||||
"inputValidation.infoBackground": "#E6F2FA",
|
||||
"inputValidation.infoBorder": "#0069CC",
|
||||
"inputValidation.infoForeground": "#202020",
|
||||
"inputValidation.warningBackground": "#FDF6E3",
|
||||
"inputValidation.warningBorder": "#B69500",
|
||||
"inputValidation.warningForeground": "#202020",
|
||||
"inputValidation.errorBackground": "#FDEDED",
|
||||
"inputValidation.errorBorder": "#ad0707",
|
||||
"inputValidation.errorForeground": "#202020",
|
||||
"scrollbar.shadow": "#00000000",
|
||||
"widget.shadow": "#00000000",
|
||||
"widget.border": "#E2E2E5",
|
||||
"editorStickyScroll.shadow": "#00000000",
|
||||
"editorStickyScrollHover.background": "#F0F0F3",
|
||||
"editorStickyScroll.border": "#F0F1F2FF",
|
||||
"sideBarStickyScroll.shadow": "#00000000",
|
||||
"panelStickyScroll.shadow": "#00000000",
|
||||
"listFilterWidget.shadow": "#00000000",
|
||||
"scrollbarSlider.background": "#99999926",
|
||||
"scrollbarSlider.hoverBackground": "#99999940",
|
||||
"scrollbarSlider.activeBackground": "#99999955",
|
||||
"badge.background": "#0069CC",
|
||||
"badge.foreground": "#FFFFFF",
|
||||
"progressBar.background": "#0069CC",
|
||||
"list.activeSelectionBackground": "#0069CC1A",
|
||||
"list.activeSelectionForeground": "#202020",
|
||||
"list.inactiveSelectionBackground": "#DADADA99",
|
||||
"list.inactiveSelectionForeground": "#202020",
|
||||
"list.hoverBackground": "#DADADA4f",
|
||||
"list.hoverForeground": "#202020",
|
||||
"list.dropBackground": "#0069CC15",
|
||||
"list.focusBackground": "#0069CC1A",
|
||||
"list.focusForeground": "#202020",
|
||||
"list.focusOutline": "#0069CCFF",
|
||||
"list.highlightForeground": "#0069CC",
|
||||
"list.invalidItemForeground": "#BBBBBB",
|
||||
"list.errorForeground": "#ad0707",
|
||||
"list.warningForeground": "#667309",
|
||||
"activityBar.background": "#FAFAFD",
|
||||
"activityBar.foreground": "#202020",
|
||||
"activityBar.inactiveForeground": "#606060",
|
||||
"activityBar.border": "#F0F1F2FF",
|
||||
"activityBar.activeBorder": "#000000",
|
||||
"activityBar.activeFocusBorder": "#0069CCFF",
|
||||
"activityBarBadge.background": "#0069CC",
|
||||
"activityBarBadge.foreground": "#FFFFFF",
|
||||
"activityBarTop.activeBorder": "#000000",
|
||||
"sideBar.background": "#FAFAFD",
|
||||
"sideBar.foreground": "#202020",
|
||||
"sideBar.border": "#F0F1F2FF",
|
||||
"sideBarTitle.foreground": "#202020",
|
||||
"sideBarSectionHeader.background": "#FAFAFD",
|
||||
"sideBarSectionHeader.foreground": "#202020",
|
||||
"sideBarSectionHeader.border": "#F0F1F2FF",
|
||||
"titleBar.activeBackground": "#FAFAFD",
|
||||
"titleBar.activeForeground": "#606060",
|
||||
"titleBar.inactiveBackground": "#FAFAFD",
|
||||
"titleBar.inactiveForeground": "#606060",
|
||||
"titleBar.border": "#F0F1F2FF",
|
||||
"menubar.selectionBackground": "#EAEAEA",
|
||||
"menubar.selectionForeground": "#202020",
|
||||
"menu.background": "#FAFAFD",
|
||||
"menu.foreground": "#202020",
|
||||
"menu.selectionBackground": "#0069CC1A",
|
||||
"menu.selectionForeground": "#202020",
|
||||
"menu.separatorBackground": "#EEEEF1",
|
||||
"menu.border": "#E4E5E6FF",
|
||||
"commandCenter.foreground": "#202020",
|
||||
"commandCenter.activeForeground": "#202020",
|
||||
"commandCenter.background": "#FFFFFF",
|
||||
"commandCenter.activeBackground": "#DADADA4f",
|
||||
"commandCenter.border": "#D8D8D8AA",
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#202020",
|
||||
"editorLineNumber.foreground": "#606060",
|
||||
"editorLineNumber.activeForeground": "#202020",
|
||||
"editorCursor.foreground": "#202020",
|
||||
"editor.selectionBackground": "#0069CC40",
|
||||
"editor.inactiveSelectionBackground": "#0069CC1A",
|
||||
"editor.selectionHighlightBackground": "#0069CC15",
|
||||
"editor.wordHighlightBackground": "#0069CC26",
|
||||
"editor.wordHighlightStrongBackground": "#0069CC26",
|
||||
"editor.findMatchBackground": "#0069CC40",
|
||||
"editor.findMatchHighlightBackground": "#0069CC1A",
|
||||
"editor.findRangeHighlightBackground": "#EAEAEA",
|
||||
"editor.hoverHighlightBackground": "#EAEAEA",
|
||||
"editor.lineHighlightBackground": "#EAEAEA40",
|
||||
"editor.rangeHighlightBackground": "#EAEAEA",
|
||||
"editorLink.activeForeground": "#0069CC",
|
||||
"editorWhitespace.foreground": "#60606040",
|
||||
"editorIndentGuide.background": "#F7F7F740",
|
||||
"editorIndentGuide.activeBackground": "#EEEEEE",
|
||||
"editorRuler.foreground": "#F7F7F7",
|
||||
"editorCodeLens.foreground": "#606060",
|
||||
"editorBracketMatch.background": "#0069CC40",
|
||||
"editorBracketMatch.border": "#F0F1F2FF",
|
||||
"editorWidget.background": "#FAFAFD",
|
||||
"editorWidget.border": "#E4E5E6FF",
|
||||
"editorWidget.foreground": "#202020",
|
||||
"editorSuggestWidget.background": "#FAFAFD",
|
||||
"editorSuggestWidget.border": "#E4E5E6FF",
|
||||
"editorSuggestWidget.foreground": "#202020",
|
||||
"editorSuggestWidget.highlightForeground": "#0069CC",
|
||||
"editorSuggestWidget.selectedBackground": "#0069CC26",
|
||||
"editorSuggestWidget.selectedForeground": "#202020",
|
||||
"editorSuggestWidget.selectedIconForeground": "#202020",
|
||||
"editorHoverWidget.background": "#FAFAFD",
|
||||
"editorHoverWidget.border": "#E4E5E6FF",
|
||||
"peekView.border": "#0069CC",
|
||||
"peekViewEditor.background": "#FAFAFD",
|
||||
"peekViewEditor.matchHighlightBackground": "#0069CC33",
|
||||
"peekViewResult.background": "#FAFAFD",
|
||||
"peekViewResult.fileForeground": "#202020",
|
||||
"peekViewResult.lineForeground": "#606060",
|
||||
"peekViewResult.matchHighlightBackground": "#0069CC33",
|
||||
"peekViewResult.selectionBackground": "#0069CC26",
|
||||
"peekViewResult.selectionForeground": "#202020",
|
||||
"peekViewTitle.background": "#FAFAFD",
|
||||
"peekViewTitleDescription.foreground": "#606060",
|
||||
"peekViewTitleLabel.foreground": "#202020",
|
||||
"editorGutter.addedBackground": "#587c0c",
|
||||
"editorGutter.deletedBackground": "#ad0707",
|
||||
"diffEditor.insertedTextBackground": "#587c0c26",
|
||||
"diffEditor.removedTextBackground": "#ad070726",
|
||||
"editorOverviewRuler.border": "#F0F1F2FF",
|
||||
"editorOverviewRuler.findMatchForeground": "#0069CC99",
|
||||
"editorOverviewRuler.modifiedForeground": "#0069CC",
|
||||
"editorOverviewRuler.addedForeground": "#587c0c",
|
||||
"editorOverviewRuler.deletedForeground": "#ad0707",
|
||||
"editorOverviewRuler.errorForeground": "#ad0707",
|
||||
"editorOverviewRuler.warningForeground": "#667309",
|
||||
"editorGutter.background": "#FFFFFF",
|
||||
"panel.background": "#FAFAFD",
|
||||
"panel.border": "#F0F1F2FF",
|
||||
"panelTitle.activeBorder": "#000000",
|
||||
"panelTitle.activeForeground": "#202020",
|
||||
"panelTitle.inactiveForeground": "#606060",
|
||||
"statusBar.background": "#FAFAFD",
|
||||
"statusBar.foreground": "#606060",
|
||||
"statusBar.border": "#F0F1F2FF",
|
||||
"statusBar.focusBorder": "#0069CCFF",
|
||||
"statusBar.debuggingBackground": "#0069CC",
|
||||
"statusBar.debuggingForeground": "#FFFFFF",
|
||||
"statusBar.noFolderBackground": "#F0F0F3",
|
||||
"statusBar.noFolderForeground": "#606060",
|
||||
"statusBarItem.activeBackground": "#EEEEEE",
|
||||
"statusBarItem.hoverBackground": "#DADADA4f",
|
||||
"statusBarItem.focusBorder": "#0069CCFF",
|
||||
"statusBarItem.prominentBackground": "#0069CCDD",
|
||||
"statusBarItem.prominentForeground": "#FFFFFF",
|
||||
"statusBarItem.prominentHoverBackground": "#0069CC",
|
||||
"toolbar.hoverBackground": "#00000010",
|
||||
"tab.activeBackground": "#FFFFFF",
|
||||
"tab.activeForeground": "#202020",
|
||||
"tab.inactiveBackground": "#FAFAFD",
|
||||
"tab.inactiveForeground": "#606060",
|
||||
"tab.border": "#F0F1F2FF",
|
||||
"tab.lastPinnedBorder": "#F0F1F2FF",
|
||||
"tab.activeBorderTop": "#000000",
|
||||
"tab.hoverBackground": "#FFFFFF",
|
||||
"tab.hoverForeground": "#202020",
|
||||
"tab.unfocusedActiveBackground": "#FAFAFD",
|
||||
"tab.unfocusedActiveForeground": "#606060",
|
||||
"tab.unfocusedInactiveBackground": "#FAFAFD",
|
||||
"tab.unfocusedInactiveForeground": "#BBBBBB",
|
||||
"editorGroupHeader.tabsBackground": "#FAFAFD",
|
||||
"tab.activeBorder": "#FFFFFF",
|
||||
"editorGroupHeader.tabsBorder": "#F0F1F2FF",
|
||||
"breadcrumb.foreground": "#606060",
|
||||
"breadcrumb.background": "#FFFFFF",
|
||||
"breadcrumb.focusForeground": "#202020",
|
||||
"breadcrumb.activeSelectionForeground": "#202020",
|
||||
"breadcrumbPicker.background": "#FAFAFD",
|
||||
"notificationCenter.border": "#F0F1F2FF",
|
||||
"notificationCenterHeader.foreground": "#202020",
|
||||
"notificationCenterHeader.background": "#FAFAFD",
|
||||
"notificationToast.border": "#F0F1F2FF",
|
||||
"notifications.foreground": "#202020",
|
||||
"notifications.background": "#FAFAFD",
|
||||
"notifications.border": "#F0F1F2FF",
|
||||
"notificationLink.foreground": "#0069CC",
|
||||
"notificationsWarningIcon.foreground": "#B69500",
|
||||
"notificationsErrorIcon.foreground": "#ad0707",
|
||||
"notificationsInfoIcon.foreground": "#0069CC",
|
||||
"activityWarningBadge.foreground": "#202020",
|
||||
"activityWarningBadge.background": "#F2C94C",
|
||||
"activityErrorBadge.foreground": "#FFFFFF",
|
||||
"activityErrorBadge.background": "#ad0707",
|
||||
"extensionButton.prominentBackground": "#0069CC",
|
||||
"extensionButton.prominentForeground": "#FFFFFF",
|
||||
"extensionButton.prominentHoverBackground": "#0064CC",
|
||||
"pickerGroup.border": "#EEEEF1",
|
||||
"pickerGroup.foreground": "#202020",
|
||||
"quickInput.background": "#FAFAFD",
|
||||
"quickInput.foreground": "#202020",
|
||||
"quickInputList.focusBackground": "#0069CC",
|
||||
"quickInputList.focusForeground": "#FFFFFF",
|
||||
"quickInputList.focusIconForeground": "#FFFFFF",
|
||||
"quickInputList.focusHighlightForeground": "#FFFFFF",
|
||||
"quickInputList.hoverBackground": "#EDF0F5",
|
||||
"terminal.selectionBackground": "#0069CC26",
|
||||
"terminalCursor.foreground": "#202020",
|
||||
"terminalCursor.background": "#FFFFFF",
|
||||
"gitDecoration.addedResourceForeground": "#587c0c",
|
||||
"gitDecoration.modifiedResourceForeground": "#667309",
|
||||
"gitDecoration.deletedResourceForeground": "#ad0707",
|
||||
"gitDecoration.untrackedResourceForeground": "#587c0c",
|
||||
"gitDecoration.ignoredResourceForeground": "#8E8E90",
|
||||
"gitDecoration.conflictingResourceForeground": "#ad0707",
|
||||
"gitDecoration.stageModifiedResourceForeground": "#667309",
|
||||
"gitDecoration.stageDeletedResourceForeground": "#ad0707",
|
||||
"commandCenter.activeBorder": "#D8D8D8",
|
||||
"quickInput.border": "#D8D8D8",
|
||||
"gauge.foreground": "#0069CC",
|
||||
"gauge.background": "#0069CC40",
|
||||
"gauge.border": "#F0F1F2FF",
|
||||
"gauge.warningForeground": "#B69500",
|
||||
"gauge.warningBackground": "#B6950040",
|
||||
"gauge.errorForeground": "#ad0707",
|
||||
"gauge.errorBackground": "#ad070740",
|
||||
"statusBarItem.prominentHoverForeground": "#FFFFFF",
|
||||
"quickInputTitle.background": "#FAFAFD",
|
||||
"chat.requestBubbleBackground": "#EEF4FB",
|
||||
"chat.requestBubbleHoverBackground": "#E6EDFA",
|
||||
"chat.thinkingShimmer": "#999999",
|
||||
"chat.inputWorkingBorderColor1": "#0069CC",
|
||||
"chat.inputWorkingBorderColor2": "#004A99",
|
||||
"chat.inputWorkingBorderColor3": "#3399E6",
|
||||
"editorCommentsWidget.rangeBackground": "#EEF4FB",
|
||||
"editorCommentsWidget.rangeActiveBackground": "#E6EDFA",
|
||||
"charts.foreground": "#202020",
|
||||
"charts.lines": "#20202066",
|
||||
"charts.blue": "#1A5CFF",
|
||||
"charts.red": "#ad0707",
|
||||
"charts.yellow": "#667309",
|
||||
"charts.orange": "#d18616",
|
||||
"charts.green": "#388A34",
|
||||
"charts.purple": "#652D90",
|
||||
"agentStatusIndicator.background": "#FFFFFF",
|
||||
"inlineChat.border": "#00000000",
|
||||
"minimapSlider.background": "#99999926",
|
||||
"minimapSlider.hoverBackground": "#99999940",
|
||||
"minimapSlider.activeBackground": "#99999955",
|
||||
|
||||
"agents.background": "#FAFAFD",
|
||||
"agentsPanel.background": "#FFFFFF",
|
||||
"agentsPanel.foreground": "#202020",
|
||||
"agentsPanel.border": "#E4E5E6FF",
|
||||
"agentsGradient.tintColor": "#0069CC",
|
||||
"agentsChatInput.background": "#F7F7FA",
|
||||
"agentsChatInput.foreground": "#202020",
|
||||
"agentsChatInput.border": "#D8D8D8",
|
||||
"agentsChatInput.focusBorder": "#0069CCFF",
|
||||
"agentsChatInput.placeholderForeground": "#999999",
|
||||
"agentsNewSessionButton.background": "#00000000",
|
||||
"agentsNewSessionButton.foreground": "#202020",
|
||||
"agentsNewSessionButton.border": "#D8D8D8",
|
||||
"agentsNewSessionButton.hoverBackground": "#00000010",
|
||||
"agentsBadge.background": "#0069CC",
|
||||
"agentsBadge.foreground": "#FFFFFF",
|
||||
"agentsUnreadBadge.background": "#0069CC",
|
||||
"agentsUnreadBadge.foreground": "#FFFFFF"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": ["comment", "punctuation.definition.comment", "string.comment"],
|
||||
"settings": {
|
||||
"foreground": "#6e7781"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.other.placeholder", "constant.character"],
|
||||
"settings": {
|
||||
"foreground": "#cf222e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant",
|
||||
"entity.name.constant",
|
||||
"variable.other.constant",
|
||||
"variable.other.enummember",
|
||||
"variable.language",
|
||||
"entity"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
|
||||
"settings": {
|
||||
"foreground": "#953800"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"variable.parameter.function",
|
||||
"meta.jsx.children",
|
||||
"meta.block",
|
||||
"meta.tag.attributes",
|
||||
"entity.name.constant",
|
||||
"meta.object.member",
|
||||
"meta.embedded.expression"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#1f2328"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.function",
|
||||
"settings": {
|
||||
"foreground": "#8250df"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name.tag", "support.class.component"],
|
||||
"settings": {
|
||||
"foreground": "#116329"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#cf222e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage", "storage.type"],
|
||||
"settings": {
|
||||
"foreground": "#cf222e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
|
||||
"settings": {
|
||||
"foreground": "#1f2328"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["string", "string punctuation.section.embedded source"],
|
||||
"settings": {
|
||||
"foreground": "#0a3069"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.property-name",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "variable",
|
||||
"settings": {
|
||||
"foreground": "#953800"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "variable.other",
|
||||
"settings": {
|
||||
"foreground": "#1f2328"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.broken",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.deprecated",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.illegal",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid.unimplemented",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "carriage-return",
|
||||
"settings": {
|
||||
"fontStyle": "italic underline",
|
||||
"background": "#cf222e",
|
||||
"foreground": "#f6f8fa",
|
||||
"content": "^M"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "message.error",
|
||||
"settings": {
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string variable",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["source.regexp", "string.regexp"],
|
||||
"settings": {
|
||||
"foreground": "#0a3069"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"string.regexp.character-class",
|
||||
"string.regexp constant.character.escape",
|
||||
"string.regexp source.ruby.embedded",
|
||||
"string.regexp string.regexp.arbitrary-repitition"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0a3069"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp constant.character.escape",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#116329"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.constant",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.variable",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.type.property-name.json",
|
||||
"settings": {
|
||||
"foreground": "#116329"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.module-reference",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "punctuation.definition.list.begin.markdown",
|
||||
"settings": {
|
||||
"foreground": "#953800"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.heading", "markup.heading entity.name"],
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.quote",
|
||||
"settings": {
|
||||
"foreground": "#116329"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#1f2328"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#1f2328"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.underline"],
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.strikethrough"],
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
|
||||
"settings": {
|
||||
"background": "#ffebe9",
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["punctuation.section.embedded"],
|
||||
"settings": {
|
||||
"foreground": "#cf222e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
|
||||
"settings": {
|
||||
"background": "#dafbe1",
|
||||
"foreground": "#116329"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.changed", "punctuation.definition.changed"],
|
||||
"settings": {
|
||||
"background": "#ffd8b5",
|
||||
"foreground": "#953800"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["markup.ignored", "markup.untracked"],
|
||||
"settings": {
|
||||
"foreground": "#eaeef2",
|
||||
"background": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.range",
|
||||
"settings": {
|
||||
"foreground": "#8250df",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.separator",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.output",
|
||||
"settings": {
|
||||
"foreground": "#0550ae"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"brackethighlighter.tag",
|
||||
"brackethighlighter.curly",
|
||||
"brackethighlighter.round",
|
||||
"brackethighlighter.square",
|
||||
"brackethighlighter.angle",
|
||||
"brackethighlighter.quote"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#57606a"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "brackethighlighter.unmatched",
|
||||
"settings": {
|
||||
"foreground": "#82071e"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.other.reference.link", "string.other.link"],
|
||||
"settings": {
|
||||
"foreground": "#0a3069"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2015 - present Microsoft Corporation
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
---
|
||||
|
||||
These theme JSON files are vendored from:
|
||||
https://github.com/microsoft/vscode
|
||||
|
||||
Source paths:
|
||||
extensions/theme-defaults/themes/dark_modern.json
|
||||
extensions/theme-defaults/themes/dark_plus.json
|
||||
extensions/theme-defaults/themes/dark_vs.json
|
||||
extensions/theme-defaults/themes/hc_black.json
|
||||
extensions/theme-defaults/themes/hc_light.json
|
||||
extensions/theme-defaults/themes/light_modern.json
|
||||
extensions/theme-defaults/themes/light_plus.json
|
||||
extensions/theme-defaults/themes/light_vs.json
|
||||
extensions/theme-defaults/themes/2026-dark.json
|
||||
extensions/theme-defaults/themes/2026-light.json
|
||||
extensions/theme-monokai/themes/monokai-color-theme.json
|
||||
extensions/theme-solarized-light/themes/solarized-light-color-theme.json
|
||||
@@ -0,0 +1,133 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Dark Modern",
|
||||
"include": "./dark_plus.json",
|
||||
"colors": {
|
||||
"activityBar.activeBorder": "#0078D4",
|
||||
"activityBar.background": "#181818",
|
||||
"activityBar.border": "#2B2B2B",
|
||||
"activityBar.foreground": "#D7D7D7",
|
||||
"activityBar.inactiveForeground": "#868686",
|
||||
"activityBarBadge.background": "#0078D4",
|
||||
"activityBarBadge.foreground": "#FFFFFF",
|
||||
"badge.background": "#616161",
|
||||
"badge.foreground": "#F8F8F8",
|
||||
"button.background": "#0078D4",
|
||||
"button.border": "#ffffff1a",
|
||||
"button.foreground": "#FFFFFF",
|
||||
"button.hoverBackground": "#026EC1",
|
||||
"button.secondaryBackground": "#00000000",
|
||||
"button.secondaryForeground": "#CCCCCC",
|
||||
"button.secondaryHoverBackground": "#2B2B2B",
|
||||
"chat.slashCommandBackground": "#26477866",
|
||||
"chat.slashCommandForeground": "#85B6FF",
|
||||
"chat.editedFileForeground": "#E2C08D",
|
||||
"checkbox.background": "#313131",
|
||||
"checkbox.border": "#3C3C3C",
|
||||
"debugToolBar.background": "#181818",
|
||||
"descriptionForeground": "#9D9D9D",
|
||||
"dropdown.background": "#313131",
|
||||
"dropdown.border": "#3C3C3C",
|
||||
"dropdown.foreground": "#CCCCCC",
|
||||
"dropdown.listBackground": "#1F1F1F",
|
||||
"editor.background": "#1F1F1F",
|
||||
"editor.findMatchBackground": "#9E6A03",
|
||||
"editor.foreground": "#CCCCCC",
|
||||
"editorGroup.border": "#FFFFFF17",
|
||||
"editorGroupHeader.tabsBackground": "#181818",
|
||||
"editorGroupHeader.tabsBorder": "#2B2B2B",
|
||||
"editorGutter.addedBackground": "#2EA043",
|
||||
"editorGutter.deletedBackground": "#F85149",
|
||||
"editorGutter.modifiedBackground": "#0078D4",
|
||||
"editorLineNumber.activeForeground": "#CCCCCC",
|
||||
"editorLineNumber.foreground": "#6E7681",
|
||||
"editorOverviewRuler.border": "#010409",
|
||||
"editorWidget.background": "#202020",
|
||||
"errorForeground": "#F85149",
|
||||
"focusBorder": "#0078D4",
|
||||
"foreground": "#CCCCCC",
|
||||
"icon.foreground": "#CCCCCC",
|
||||
"input.background": "#313131",
|
||||
"input.border": "#3C3C3C",
|
||||
"input.foreground": "#CCCCCC",
|
||||
"input.placeholderForeground": "#989898",
|
||||
"inputOption.activeBackground": "#2489DB82",
|
||||
"inputOption.activeBorder": "#2488DB",
|
||||
"keybindingLabel.foreground": "#CCCCCC",
|
||||
"menu.background": "#1F1F1F",
|
||||
"menu.selectionBackground": "#0078d4",
|
||||
"notificationCenterHeader.background": "#1F1F1F",
|
||||
"notificationCenterHeader.foreground": "#CCCCCC",
|
||||
"notifications.background": "#1F1F1F",
|
||||
"notifications.border": "#2B2B2B",
|
||||
"notifications.foreground": "#CCCCCC",
|
||||
"panel.background": "#181818",
|
||||
"panel.border": "#2B2B2B",
|
||||
"panelInput.border": "#2B2B2B",
|
||||
"panelTitle.activeBorder": "#0078D4",
|
||||
"panelTitle.activeForeground": "#CCCCCC",
|
||||
"panelTitle.inactiveForeground": "#9D9D9D",
|
||||
"peekViewEditor.background": "#1F1F1F",
|
||||
"peekViewEditor.matchHighlightBackground": "#BB800966",
|
||||
"peekViewResult.background": "#1F1F1F",
|
||||
"peekViewResult.matchHighlightBackground": "#BB800966",
|
||||
"pickerGroup.border": "#3C3C3C",
|
||||
"progressBar.background": "#0078D4",
|
||||
"quickInput.background": "#222222",
|
||||
"quickInput.foreground": "#CCCCCC",
|
||||
"settings.dropdownBackground": "#313131",
|
||||
"settings.dropdownBorder": "#3C3C3C",
|
||||
"settings.headerForeground": "#FFFFFF",
|
||||
"settings.modifiedItemIndicator": "#BB800966",
|
||||
"sideBar.background": "#181818",
|
||||
"sideBar.border": "#2B2B2B",
|
||||
"sideBar.foreground": "#CCCCCC",
|
||||
"sideBarSectionHeader.background": "#181818",
|
||||
"sideBarSectionHeader.border": "#2B2B2B",
|
||||
"sideBarSectionHeader.foreground": "#CCCCCC",
|
||||
"sideBarTitle.foreground": "#CCCCCC",
|
||||
"statusBar.background": "#181818",
|
||||
"statusBar.border": "#2B2B2B",
|
||||
"statusBarItem.hoverBackground": "#F1F1F133",
|
||||
"statusBarItem.hoverForeground": "#FFFFFF",
|
||||
"statusBar.debuggingBackground": "#0078D4",
|
||||
"statusBar.debuggingForeground": "#FFFFFF",
|
||||
"statusBar.focusBorder": "#0078D4",
|
||||
"statusBar.foreground": "#CCCCCC",
|
||||
"statusBar.noFolderBackground": "#1F1F1F",
|
||||
"statusBarItem.focusBorder": "#0078D4",
|
||||
"statusBarItem.prominentBackground": "#6E768166",
|
||||
"statusBarItem.remoteBackground": "#0078D4",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#1F1F1F",
|
||||
"tab.activeBorder": "#1F1F1F",
|
||||
"tab.activeBorderTop": "#0078D4",
|
||||
"tab.activeForeground": "#FFFFFF",
|
||||
"tab.selectedBorderTop": "#6caddf",
|
||||
"tab.border": "#2B2B2B",
|
||||
"tab.hoverBackground": "#1F1F1F",
|
||||
"tab.inactiveBackground": "#181818",
|
||||
"tab.inactiveForeground": "#9D9D9D",
|
||||
"tab.unfocusedActiveBorder": "#1F1F1F",
|
||||
"tab.unfocusedActiveBorderTop": "#2B2B2B",
|
||||
"tab.unfocusedHoverBackground": "#1F1F1F",
|
||||
"terminal.foreground": "#CCCCCC",
|
||||
"terminal.tab.activeBorder": "#0078D4",
|
||||
"textBlockQuote.background": "#2B2B2B",
|
||||
"textBlockQuote.border": "#616161",
|
||||
"textCodeBlock.background": "#2B2B2B",
|
||||
"textLink.activeForeground": "#4daafc",
|
||||
"textLink.foreground": "#4daafc",
|
||||
"textPreformat.foreground": "#D0D0D0",
|
||||
"textPreformat.background": "#3C3C3C",
|
||||
"textSeparator.foreground": "#21262D",
|
||||
"titleBar.activeBackground": "#181818",
|
||||
"titleBar.activeForeground": "#CCCCCC",
|
||||
"titleBar.border": "#2B2B2B",
|
||||
"titleBar.inactiveBackground": "#1F1F1F",
|
||||
"titleBar.inactiveForeground": "#9D9D9D",
|
||||
"welcomePage.tileBackground": "#2B2B2B",
|
||||
"welcomePage.progress.foreground": "#0078D4",
|
||||
"widget.border": "#313131"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Dark+",
|
||||
"include": "./dark_vs.json",
|
||||
"tokenColors": [
|
||||
{
|
||||
"name": "Function declarations",
|
||||
"scope": [
|
||||
"entity.name.function",
|
||||
"support.function",
|
||||
"support.constant.handlebars",
|
||||
"source.powershell variable.other.member",
|
||||
"entity.name.operator.custom-literal" // See https://en.cppreference.com/w/cpp/language/user_literal
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#DCDCAA"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references",
|
||||
"scope": [
|
||||
"support.class",
|
||||
"support.type",
|
||||
"entity.name.type",
|
||||
"entity.name.namespace",
|
||||
"entity.other.attribute",
|
||||
"entity.name.scope-resolution",
|
||||
"entity.name.class",
|
||||
"storage.type.numeric.go",
|
||||
"storage.type.byte.go",
|
||||
"storage.type.boolean.go",
|
||||
"storage.type.string.go",
|
||||
"storage.type.uintptr.go",
|
||||
"storage.type.error.go",
|
||||
"storage.type.rune.go",
|
||||
"storage.type.cs",
|
||||
"storage.type.generic.cs",
|
||||
"storage.type.modifier.cs",
|
||||
"storage.type.variable.cs",
|
||||
"storage.type.annotation.java",
|
||||
"storage.type.generic.java",
|
||||
"storage.type.java",
|
||||
"storage.type.object.array.java",
|
||||
"storage.type.primitive.array.java",
|
||||
"storage.type.primitive.java",
|
||||
"storage.type.token.java",
|
||||
"storage.type.groovy",
|
||||
"storage.type.annotation.groovy",
|
||||
"storage.type.parameters.groovy",
|
||||
"storage.type.generic.groovy",
|
||||
"storage.type.object.array.groovy",
|
||||
"storage.type.primitive.array.groovy",
|
||||
"storage.type.primitive.groovy"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#4EC9B0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references, TS grammar specific",
|
||||
"scope": [
|
||||
"meta.type.cast.expr",
|
||||
"meta.type.new.expr",
|
||||
"support.constant.math",
|
||||
"support.constant.dom",
|
||||
"support.constant.json",
|
||||
"entity.other.inherited-class",
|
||||
"punctuation.separator.namespace.ruby"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#4EC9B0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Control flow / Special keywords",
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"source.cpp keyword.operator.new",
|
||||
"keyword.operator.delete",
|
||||
"keyword.other.using",
|
||||
"keyword.other.directive.using",
|
||||
"keyword.other.operator",
|
||||
"entity.name.operator"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#C586C0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable and parameter name",
|
||||
"scope": [
|
||||
"variable",
|
||||
"meta.definition.variable.name",
|
||||
"support.variable",
|
||||
"entity.name.variable",
|
||||
"constant.other.placeholder" // placeholders in strings
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#9CDCFE"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Constants and enums",
|
||||
"scope": ["variable.other.constant", "variable.other.enummember"],
|
||||
"settings": {
|
||||
"foreground": "#4FC1FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Object keys, TS grammar specific",
|
||||
"scope": ["meta.object-literal.key"],
|
||||
"settings": {
|
||||
"foreground": "#9CDCFE"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "CSS property value",
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#CE9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Regular expression groups",
|
||||
"scope": [
|
||||
"punctuation.definition.group.regexp",
|
||||
"punctuation.definition.group.assertion.regexp",
|
||||
"punctuation.definition.character-class.regexp",
|
||||
"punctuation.character.set.begin.regexp",
|
||||
"punctuation.character.set.end.regexp",
|
||||
"keyword.operator.negation.regexp",
|
||||
"support.other.parenthesis.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#CE9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.character.character-class.regexp",
|
||||
"constant.other.character-class.set.regexp",
|
||||
"constant.other.character-class.regexp",
|
||||
"constant.character.set.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d16969"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
|
||||
"settings": {
|
||||
"foreground": "#DCDCAA"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator.quantifier.regexp",
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.character", "constant.other.option"],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.character.escape",
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.label",
|
||||
"settings": {
|
||||
"foreground": "#C8C8C8"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticTokenColors": {
|
||||
"newOperator": "#C586C0",
|
||||
"stringLiteral": "#ce9178",
|
||||
"customLiteral": "#DCDCAA",
|
||||
"numberLiteral": "#b5cea8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,395 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Dark (Visual Studio)",
|
||||
"colors": {
|
||||
"checkbox.border": "#6B6B6B",
|
||||
"editor.background": "#1E1E1E",
|
||||
"editor.foreground": "#D4D4D4",
|
||||
"editor.inactiveSelectionBackground": "#3A3D41",
|
||||
"editorIndentGuide.background1": "#404040",
|
||||
"editorIndentGuide.activeBackground1": "#707070",
|
||||
"editor.selectionHighlightBackground": "#ADD6FF26",
|
||||
"list.dropBackground": "#383B3D",
|
||||
"activityBarBadge.background": "#007ACC",
|
||||
"sideBarTitle.foreground": "#BBBBBB",
|
||||
"input.placeholderForeground": "#A6A6A6",
|
||||
"menu.background": "#252526",
|
||||
"menu.foreground": "#CCCCCC",
|
||||
"menu.separatorBackground": "#454545",
|
||||
"menu.border": "#454545",
|
||||
"menu.selectionBackground": "#0078d4",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"ports.iconRunningProcessForeground": "#369432",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#ccc3",
|
||||
"tab.selectedBackground": "#222222",
|
||||
"tab.selectedForeground": "#ffffffa0",
|
||||
"tab.lastPinnedBorder": "#ccc3",
|
||||
"list.activeSelectionIconForeground": "#FFF",
|
||||
"terminal.inactiveSelectionBackground": "#3A3D41",
|
||||
"widget.border": "#303031",
|
||||
"actionBar.toggledBackground": "#383a49"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": [
|
||||
"meta.embedded",
|
||||
"source.groovy.embedded",
|
||||
"string meta.image.inline.markdown",
|
||||
"variable.legacy.builtin.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#D4D4D4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "emphasis",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "strong",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "header",
|
||||
"settings": {
|
||||
"foreground": "#000080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#6A9955"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.language",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.numeric",
|
||||
"variable.other.enummember",
|
||||
"keyword.operator.plus.exponent",
|
||||
"keyword.operator.minus.exponent"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.regexp",
|
||||
"settings": {
|
||||
"foreground": "#646695"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name.tag.css", "entity.name.tag.less"],
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"entity.other.attribute-name.class.css",
|
||||
"source.css entity.other.attribute-name.class",
|
||||
"entity.other.attribute-name.id.css",
|
||||
"entity.other.attribute-name.parent-selector.css",
|
||||
"entity.other.attribute-name.parent.less",
|
||||
"source.css entity.other.attribute-name.pseudo-class",
|
||||
"entity.other.attribute-name.pseudo-element.css",
|
||||
"source.css.less entity.other.attribute-name.id",
|
||||
"entity.other.attribute-name.scss"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"foreground": "#f44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.underline",
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#C586C0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "punctuation.definition.quote.begin.markdown",
|
||||
"settings": {
|
||||
"foreground": "#6A9955"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "punctuation.definition.list.begin.markdown",
|
||||
"settings": {
|
||||
"foreground": "#6796e6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "brackets of XML/HTML tags",
|
||||
"scope": "punctuation.definition.tag",
|
||||
"settings": {
|
||||
"foreground": "#808080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.string",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.numeric",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.structure.dictionary.key.python",
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage.type",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage.modifier", "keyword.operator.noexcept"],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["string", "meta.embedded.assembly"],
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.tag",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.value",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp",
|
||||
"settings": {
|
||||
"foreground": "#d16969"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "String interpolation",
|
||||
"scope": [
|
||||
"punctuation.definition.template-expression.begin",
|
||||
"punctuation.definition.template-expression.end",
|
||||
"punctuation.section.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Reset JavaScript string interpolation expression",
|
||||
"scope": ["meta.template.expression"],
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.type.vendored.property-name",
|
||||
"support.type.property-name",
|
||||
"source.css variable",
|
||||
"source.coffee.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.control",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator",
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"keyword.operator.new",
|
||||
"keyword.operator.expression",
|
||||
"keyword.operator.cast",
|
||||
"keyword.operator.sizeof",
|
||||
"keyword.operator.alignof",
|
||||
"keyword.operator.typeid",
|
||||
"keyword.operator.alignas",
|
||||
"keyword.operator.instanceof",
|
||||
"keyword.operator.logical.python",
|
||||
"keyword.operator.wordlike"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.other.unit",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.function.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.sha.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "coloring of the Java import and package identifiers",
|
||||
"scope": [
|
||||
"storage.modifier.import.java",
|
||||
"variable.language.wildcard.java",
|
||||
"storage.modifier.package.java"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "this.self",
|
||||
"scope": "variable.language",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true,
|
||||
"semanticTokenColors": {
|
||||
"newOperator": "#d4d4d4",
|
||||
"stringLiteral": "#ce9178",
|
||||
"customLiteral": "#D4D4D4",
|
||||
"numberLiteral": "#b5cea8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,456 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Dark High Contrast",
|
||||
"colors": {
|
||||
"editor.background": "#000000",
|
||||
"editor.foreground": "#FFFFFF",
|
||||
"editorIndentGuide.background1": "#FFFFFF",
|
||||
"editorIndentGuide.activeBackground1": "#FFFFFF",
|
||||
"sideBarTitle.foreground": "#FFFFFF",
|
||||
"selection.background": "#008000",
|
||||
"editor.selectionBackground": "#FFFFFF",
|
||||
"statusBarItem.remoteBackground": "#00000000",
|
||||
"ports.iconRunningProcessForeground": "#FFFFFF",
|
||||
"editorWhitespace.foreground": "#7c7c7c",
|
||||
"actionBar.toggledBackground": "#383a49"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": [
|
||||
"meta.embedded",
|
||||
"source.groovy.embedded",
|
||||
"string meta.image.inline.markdown",
|
||||
"variable.legacy.builtin.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "emphasis",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "strong",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#000080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#7ca668"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.language",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.numeric",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.regexp",
|
||||
"settings": {
|
||||
"foreground": "#b46695"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.character",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["entity.name.tag.css", "entity.name.tag.less"],
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"entity.other.attribute-name.class.css",
|
||||
"source.css entity.other.attribute-name.class",
|
||||
"entity.other.attribute-name.id.css",
|
||||
"entity.other.attribute-name.parent-selector.css",
|
||||
"entity.other.attribute-name.parent.less",
|
||||
"source.css entity.other.attribute-name.pseudo-class",
|
||||
"entity.other.attribute-name.pseudo-element.css",
|
||||
"source.css.less entity.other.attribute-name.id",
|
||||
"entity.other.attribute-name.scss"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d7ba7d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"foreground": "#f44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.underline",
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#6796e6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "brackets of XML/HTML tags",
|
||||
"scope": ["punctuation.definition.tag"],
|
||||
"settings": {
|
||||
"foreground": "#808080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.string",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.numeric",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.structure.dictionary.key.python",
|
||||
"settings": {
|
||||
"foreground": "#9cdcfe"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage.type",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage.modifier",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.tag",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.value",
|
||||
"settings": {
|
||||
"foreground": "#ce9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp",
|
||||
"settings": {
|
||||
"foreground": "#d16969"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "String interpolation",
|
||||
"scope": [
|
||||
"punctuation.definition.template-expression.begin",
|
||||
"punctuation.definition.template-expression.end",
|
||||
"punctuation.section.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Reset JavaScript string interpolation expression",
|
||||
"scope": ["meta.template.expression"],
|
||||
"settings": {
|
||||
"foreground": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.type.vendored.property-name",
|
||||
"support.type.property-name",
|
||||
"source.css variable",
|
||||
"source.coffee.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.control",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator",
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"keyword.operator.new",
|
||||
"keyword.operator.expression",
|
||||
"keyword.operator.cast",
|
||||
"keyword.operator.sizeof",
|
||||
"keyword.operator.logical.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.other.unit",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.function.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.sha.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#b5cea8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "coloring of the Java import and package identifiers",
|
||||
"scope": [
|
||||
"storage.modifier.import.java",
|
||||
"variable.language.wildcard.java",
|
||||
"storage.modifier.package.java"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d4d4d4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "coloring of the TS this",
|
||||
"scope": "variable.language.this",
|
||||
"settings": {
|
||||
"foreground": "#569cd6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Function declarations",
|
||||
"scope": [
|
||||
"entity.name.function",
|
||||
"support.function",
|
||||
"support.constant.handlebars",
|
||||
"source.powershell variable.other.member"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#DCDCAA"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references",
|
||||
"scope": [
|
||||
"support.class",
|
||||
"support.type",
|
||||
"entity.name.type",
|
||||
"entity.name.namespace",
|
||||
"entity.name.scope-resolution",
|
||||
"entity.name.class",
|
||||
"storage.type.cs",
|
||||
"storage.type.generic.cs",
|
||||
"storage.type.modifier.cs",
|
||||
"storage.type.variable.cs",
|
||||
"storage.type.annotation.java",
|
||||
"storage.type.generic.java",
|
||||
"storage.type.java",
|
||||
"storage.type.object.array.java",
|
||||
"storage.type.primitive.array.java",
|
||||
"storage.type.primitive.java",
|
||||
"storage.type.token.java",
|
||||
"storage.type.groovy",
|
||||
"storage.type.annotation.groovy",
|
||||
"storage.type.parameters.groovy",
|
||||
"storage.type.generic.groovy",
|
||||
"storage.type.object.array.groovy",
|
||||
"storage.type.primitive.array.groovy",
|
||||
"storage.type.primitive.groovy"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#4EC9B0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references, TS grammar specific",
|
||||
"scope": [
|
||||
"meta.type.cast.expr",
|
||||
"meta.type.new.expr",
|
||||
"support.constant.math",
|
||||
"support.constant.dom",
|
||||
"support.constant.json",
|
||||
"entity.other.inherited-class",
|
||||
"punctuation.separator.namespace.ruby"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#4EC9B0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Control flow / Special keywords",
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"source.cpp keyword.operator.new",
|
||||
"source.cpp keyword.operator.delete",
|
||||
"keyword.other.using",
|
||||
"keyword.other.directive.using",
|
||||
"keyword.other.operator"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#C586C0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable and parameter name",
|
||||
"scope": ["variable", "meta.definition.variable.name", "support.variable"],
|
||||
"settings": {
|
||||
"foreground": "#9CDCFE"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Object keys, TS grammar specific",
|
||||
"scope": ["meta.object-literal.key"],
|
||||
"settings": {
|
||||
"foreground": "#9CDCFE"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "CSS property value",
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#CE9178"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "HC Search Editor context line override",
|
||||
"scope": "meta.resultLinePrefix.contextLinePrefix.search",
|
||||
"settings": {
|
||||
"foreground": "#CBEDCB"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true,
|
||||
"semanticTokenColors": {
|
||||
"newOperator": "#FFFFFF",
|
||||
"stringLiteral": "#ce9178",
|
||||
"customLiteral": "#DCDCAA",
|
||||
"numberLiteral": "#b5cea8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,570 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Light High Contrast",
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": ["meta.embedded", "source.groovy.embedded", "variable.legacy.builtin.python"],
|
||||
"settings": {
|
||||
"foreground": "#292929"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "emphasis",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "strong",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#062F4A"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#515151"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.language",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.numeric",
|
||||
"variable.other.enummember",
|
||||
"keyword.operator.plus.exponent",
|
||||
"keyword.operator.minus.exponent"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#096d48"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.regexp",
|
||||
"settings": {
|
||||
"foreground": "#811F3F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.selector",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"foreground": "#264F78"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"entity.other.attribute-name.class.css",
|
||||
"source.css entity.other.attribute-name.class",
|
||||
"entity.other.attribute-name.id.css",
|
||||
"entity.other.attribute-name.parent-selector.css",
|
||||
"entity.other.attribute-name.parent.less",
|
||||
"source.css entity.other.attribute-name.pseudo-class",
|
||||
"entity.other.attribute-name.pseudo-element.css",
|
||||
"source.css.less entity.other.attribute-name.id",
|
||||
"entity.other.attribute-name.scss"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"foreground": "#B5200D"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.underline",
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"foreground": "#000080",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#800080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#096d48"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"foreground": "#5A5A5A"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"punctuation.definition.quote.begin.markdown",
|
||||
"punctuation.definition.list.begin.markdown"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "punctuation.definition.tag",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.string",
|
||||
"settings": {
|
||||
"foreground": "#b5200d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.numeric",
|
||||
"settings": {
|
||||
"foreground": "#096d48"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.structure.dictionary.key.python",
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage.type",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage.modifier", "keyword.operator.noexcept"],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["string", "meta.embedded.assembly"],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"string.comment.buffered.block.pug",
|
||||
"string.quoted.pug",
|
||||
"string.interpolated.pug",
|
||||
"string.unquoted.plain.in.yaml",
|
||||
"string.unquoted.plain.out.yaml",
|
||||
"string.unquoted.block.yaml",
|
||||
"string.quoted.single.yaml",
|
||||
"string.quoted.double.xml",
|
||||
"string.quoted.single.xml",
|
||||
"string.unquoted.cdata.xml",
|
||||
"string.quoted.double.html",
|
||||
"string.quoted.single.html",
|
||||
"string.unquoted.html",
|
||||
"string.quoted.single.handlebars",
|
||||
"string.quoted.double.handlebars"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp",
|
||||
"settings": {
|
||||
"foreground": "#811F3F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"punctuation.definition.template-expression.begin",
|
||||
"punctuation.definition.template-expression.end",
|
||||
"punctuation.section.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["meta.template.expression"],
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.type.vendored.property-name",
|
||||
"support.type.property-name",
|
||||
"source.css variable",
|
||||
"source.coffee.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#264F78"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["support.type.property-name.json"],
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.control",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"keyword.operator.new",
|
||||
"keyword.operator.expression",
|
||||
"keyword.operator.cast",
|
||||
"keyword.operator.sizeof",
|
||||
"keyword.operator.alignof",
|
||||
"keyword.operator.typeid",
|
||||
"keyword.operator.alignas",
|
||||
"keyword.operator.instanceof",
|
||||
"keyword.operator.logical.python",
|
||||
"keyword.operator.wordlike"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.other.unit",
|
||||
"settings": {
|
||||
"foreground": "#096d48"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.function.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.sha.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#096d48"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"storage.modifier.import.java",
|
||||
"variable.language.wildcard.java",
|
||||
"storage.modifier.package.java"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "variable.language",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"entity.name.function",
|
||||
"support.function",
|
||||
"support.constant.handlebars",
|
||||
"source.powershell variable.other.member",
|
||||
"entity.name.operator.custom-literal"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#5e2cbc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.class",
|
||||
"support.type",
|
||||
"entity.name.type",
|
||||
"entity.name.namespace",
|
||||
"entity.other.attribute",
|
||||
"entity.name.scope-resolution",
|
||||
"entity.name.class",
|
||||
"storage.type.numeric.go",
|
||||
"storage.type.byte.go",
|
||||
"storage.type.boolean.go",
|
||||
"storage.type.string.go",
|
||||
"storage.type.uintptr.go",
|
||||
"storage.type.error.go",
|
||||
"storage.type.rune.go",
|
||||
"storage.type.cs",
|
||||
"storage.type.generic.cs",
|
||||
"storage.type.modifier.cs",
|
||||
"storage.type.variable.cs",
|
||||
"storage.type.annotation.java",
|
||||
"storage.type.generic.java",
|
||||
"storage.type.java",
|
||||
"storage.type.object.array.java",
|
||||
"storage.type.primitive.array.java",
|
||||
"storage.type.primitive.java",
|
||||
"storage.type.token.java",
|
||||
"storage.type.groovy",
|
||||
"storage.type.annotation.groovy",
|
||||
"storage.type.parameters.groovy",
|
||||
"storage.type.generic.groovy",
|
||||
"storage.type.object.array.groovy",
|
||||
"storage.type.primitive.array.groovy",
|
||||
"storage.type.primitive.groovy"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#185E73"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"meta.type.cast.expr",
|
||||
"meta.type.new.expr",
|
||||
"support.constant.math",
|
||||
"support.constant.dom",
|
||||
"support.constant.json",
|
||||
"entity.other.inherited-class",
|
||||
"punctuation.separator.namespace.ruby"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#185E73"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"source.cpp keyword.operator.new",
|
||||
"source.cpp keyword.operator.delete",
|
||||
"keyword.other.using",
|
||||
"keyword.other.directive.using",
|
||||
"keyword.other.operator",
|
||||
"entity.name.operator"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#b5200d"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"variable",
|
||||
"meta.definition.variable.name",
|
||||
"support.variable",
|
||||
"entity.name.variable",
|
||||
"constant.other.placeholder"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#001080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["variable.other.constant", "variable.other.enummember"],
|
||||
"settings": {
|
||||
"foreground": "#02715D"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["meta.object-literal.key"],
|
||||
"settings": {
|
||||
"foreground": "#001080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451A5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"punctuation.definition.group.regexp",
|
||||
"punctuation.definition.group.assertion.regexp",
|
||||
"punctuation.definition.character-class.regexp",
|
||||
"punctuation.character.set.begin.regexp",
|
||||
"punctuation.character.set.end.regexp",
|
||||
"keyword.operator.negation.regexp",
|
||||
"support.other.parenthesis.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#D16969"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.character.character-class.regexp",
|
||||
"constant.other.character-class.set.regexp",
|
||||
"constant.other.character-class.regexp",
|
||||
"constant.character.set.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#811F3F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator.quantifier.regexp",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
|
||||
"settings": {
|
||||
"foreground": "#EE0000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.character",
|
||||
"settings": {
|
||||
"foreground": "#0F4A85"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.character.escape",
|
||||
"settings": {
|
||||
"foreground": "#EE0000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.label",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.info-token",
|
||||
"settings": {
|
||||
"foreground": "#316BCD"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.warn-token",
|
||||
"settings": {
|
||||
"foreground": "#CD9731"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.error-token",
|
||||
"settings": {
|
||||
"foreground": "#CD3131"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.debug-token",
|
||||
"settings": {
|
||||
"foreground": "#800080"
|
||||
}
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"actionBar.toggledBackground": "#dddddd",
|
||||
"statusBarItem.remoteBackground": "#FFFFFF",
|
||||
"statusBarItem.remoteForeground": "#000000"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Light Modern",
|
||||
"include": "./light_plus.json",
|
||||
"colors": {
|
||||
"activityBar.activeBorder": "#005FB8",
|
||||
"activityBar.background": "#F8F8F8",
|
||||
"activityBar.border": "#E5E5E5",
|
||||
"activityBar.foreground": "#1F1F1F",
|
||||
"activityBar.inactiveForeground": "#616161",
|
||||
"activityBarBadge.background": "#005FB8",
|
||||
"activityBarBadge.foreground": "#FFFFFF",
|
||||
"badge.background": "#CCCCCC",
|
||||
"badge.foreground": "#3B3B3B",
|
||||
"button.background": "#005FB8",
|
||||
"button.border": "#0000001a",
|
||||
"button.foreground": "#FFFFFF",
|
||||
"button.hoverBackground": "#0258A8",
|
||||
"button.secondaryBackground": "#E5E5E5",
|
||||
"button.secondaryForeground": "#3B3B3B",
|
||||
"button.secondaryHoverBackground": "#CCCCCC",
|
||||
"chat.slashCommandBackground": "#ADCEFF7A",
|
||||
"chat.slashCommandForeground": "#26569E",
|
||||
"chat.editedFileForeground": "#895503",
|
||||
"checkbox.background": "#F8F8F8",
|
||||
"checkbox.border": "#CECECE",
|
||||
"descriptionForeground": "#3B3B3B",
|
||||
"dropdown.background": "#FFFFFF",
|
||||
"dropdown.border": "#CECECE",
|
||||
"dropdown.foreground": "#3B3B3B",
|
||||
"dropdown.listBackground": "#FFFFFF",
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#3B3B3B",
|
||||
"editor.inactiveSelectionBackground": "#E5EBF1",
|
||||
"editor.selectionHighlightBackground": "#ADD6FF80",
|
||||
"editorGroup.border": "#E5E5E5",
|
||||
"editorGroupHeader.tabsBackground": "#F8F8F8",
|
||||
"editorGroupHeader.tabsBorder": "#E5E5E5",
|
||||
"editorGutter.addedBackground": "#2EA043",
|
||||
"editorGutter.deletedBackground": "#F85149",
|
||||
"editorGutter.modifiedBackground": "#005FB8",
|
||||
"editorIndentGuide.background1": "#D3D3D3",
|
||||
"editorLineNumber.activeForeground": "#171184",
|
||||
"editorLineNumber.foreground": "#6E7681",
|
||||
"editorOverviewRuler.border": "#E5E5E5",
|
||||
"editorSuggestWidget.background": "#F8F8F8",
|
||||
"editorWidget.background": "#F8F8F8",
|
||||
"errorForeground": "#F85149",
|
||||
"focusBorder": "#005FB8",
|
||||
"foreground": "#3B3B3B",
|
||||
"icon.foreground": "#3B3B3B",
|
||||
"input.background": "#FFFFFF",
|
||||
"input.border": "#CECECE",
|
||||
"input.foreground": "#3B3B3B",
|
||||
"input.placeholderForeground": "#767676",
|
||||
"inputOption.activeBackground": "#BED6ED",
|
||||
"inputOption.activeBorder": "#005FB8",
|
||||
"inputOption.activeForeground": "#000000",
|
||||
"keybindingLabel.foreground": "#3B3B3B",
|
||||
"list.activeSelectionBackground": "#E8E8E8",
|
||||
"list.activeSelectionForeground": "#000000",
|
||||
"list.activeSelectionIconForeground": "#000000",
|
||||
"list.hoverBackground": "#F2F2F2",
|
||||
"list.focusAndSelectionOutline": "#005FB8",
|
||||
"menu.border": "#CECECE",
|
||||
"menu.selectionBackground": "#005FB8",
|
||||
"menu.selectionForeground": "#ffffff",
|
||||
"notebook.cellBorderColor": "#E5E5E5",
|
||||
"notebook.selectedCellBackground": "#C8DDF150",
|
||||
"notificationCenterHeader.background": "#FFFFFF",
|
||||
"notificationCenterHeader.foreground": "#3B3B3B",
|
||||
"notifications.background": "#FFFFFF",
|
||||
"notifications.border": "#E5E5E5",
|
||||
"notifications.foreground": "#3B3B3B",
|
||||
"panel.background": "#F8F8F8",
|
||||
"panel.border": "#E5E5E5",
|
||||
"panelInput.border": "#E5E5E5",
|
||||
"panelTitle.activeBorder": "#005FB8",
|
||||
"panelTitle.activeForeground": "#3B3B3B",
|
||||
"panelTitle.inactiveForeground": "#3B3B3B",
|
||||
"peekViewEditor.matchHighlightBackground": "#BB800966",
|
||||
"peekViewResult.background": "#FFFFFF",
|
||||
"peekViewResult.matchHighlightBackground": "#BB800966",
|
||||
"pickerGroup.border": "#E5E5E5",
|
||||
"pickerGroup.foreground": "#8B949E",
|
||||
"ports.iconRunningProcessForeground": "#369432",
|
||||
"progressBar.background": "#005FB8",
|
||||
"quickInput.background": "#F8F8F8",
|
||||
"quickInput.foreground": "#3B3B3B",
|
||||
"searchEditor.textInputBorder": "#CECECE",
|
||||
"settings.dropdownBackground": "#FFFFFF",
|
||||
"settings.dropdownBorder": "#CECECE",
|
||||
"settings.headerForeground": "#1F1F1F",
|
||||
"settings.modifiedItemIndicator": "#BB800966",
|
||||
"settings.numberInputBorder": "#CECECE",
|
||||
"settings.textInputBorder": "#CECECE",
|
||||
"sideBar.background": "#F8F8F8",
|
||||
"sideBar.border": "#E5E5E5",
|
||||
"sideBar.foreground": "#3B3B3B",
|
||||
"sideBarSectionHeader.background": "#F8F8F8",
|
||||
"sideBarSectionHeader.border": "#E5E5E5",
|
||||
"sideBarSectionHeader.foreground": "#3B3B3B",
|
||||
"sideBarTitle.foreground": "#3B3B3B",
|
||||
"statusBar.background": "#F8F8F8",
|
||||
"statusBar.foreground": "#3B3B3B",
|
||||
"statusBar.border": "#E5E5E5",
|
||||
"statusBarItem.hoverBackground": "#1F1F1F11",
|
||||
"statusBarItem.hoverForeground": "#000000",
|
||||
"statusBarItem.compactHoverBackground": "#CCCCCC",
|
||||
"statusBar.debuggingBackground": "#FD716C",
|
||||
"statusBar.debuggingForeground": "#000000",
|
||||
"statusBar.focusBorder": "#005FB8",
|
||||
"statusBar.noFolderBackground": "#F8F8F8",
|
||||
"statusBarItem.errorBackground": "#C72E0F",
|
||||
"statusBarItem.focusBorder": "#005FB8",
|
||||
"statusBarItem.prominentBackground": "#6E768166",
|
||||
"statusBarItem.remoteBackground": "#005FB8",
|
||||
"statusBarItem.remoteForeground": "#FFFFFF",
|
||||
"tab.activeBackground": "#FFFFFF",
|
||||
"tab.activeBorder": "#F8F8F8",
|
||||
"tab.activeBorderTop": "#005FB8",
|
||||
"tab.activeForeground": "#3B3B3B",
|
||||
"tab.selectedBorderTop": "#68a3da",
|
||||
"tab.border": "#E5E5E5",
|
||||
"tab.hoverBackground": "#FFFFFF",
|
||||
"tab.inactiveBackground": "#F8F8F8",
|
||||
"tab.inactiveForeground": "#868686",
|
||||
"tab.lastPinnedBorder": "#D4D4D4",
|
||||
"tab.unfocusedActiveBorder": "#F8F8F8",
|
||||
"tab.unfocusedActiveBorderTop": "#E5E5E5",
|
||||
"tab.unfocusedHoverBackground": "#F8F8F8",
|
||||
"terminalCursor.foreground": "#005FB8",
|
||||
"terminal.foreground": "#3B3B3B",
|
||||
"terminal.inactiveSelectionBackground": "#E5EBF1",
|
||||
"terminal.tab.activeBorder": "#005FB8",
|
||||
"textBlockQuote.background": "#F8F8F8",
|
||||
"textBlockQuote.border": "#E5E5E5",
|
||||
"textCodeBlock.background": "#F8F8F8",
|
||||
"textLink.activeForeground": "#005FB8",
|
||||
"textLink.foreground": "#005FB8",
|
||||
"textPreformat.foreground": "#3B3B3B",
|
||||
"textPreformat.background": "#0000001F",
|
||||
"textSeparator.foreground": "#21262D",
|
||||
"titleBar.activeBackground": "#F8F8F8",
|
||||
"titleBar.activeForeground": "#1E1E1E",
|
||||
"titleBar.border": "#E5E5E5",
|
||||
"titleBar.inactiveBackground": "#F8F8F8",
|
||||
"titleBar.inactiveForeground": "#8B949E",
|
||||
"welcomePage.tileBackground": "#F3F3F3",
|
||||
"widget.border": "#E5E5E5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Light+",
|
||||
"include": "./light_vs.json",
|
||||
"tokenColors": [
|
||||
// adds rules to the light vs rules
|
||||
{
|
||||
"name": "Function declarations",
|
||||
"scope": [
|
||||
"entity.name.function",
|
||||
"support.function",
|
||||
"support.constant.handlebars",
|
||||
"source.powershell variable.other.member",
|
||||
"entity.name.operator.custom-literal" // See https://en.cppreference.com/w/cpp/language/user_literal
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#795E26"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references",
|
||||
"scope": [
|
||||
"support.class",
|
||||
"support.type",
|
||||
"entity.name.type",
|
||||
"entity.name.namespace",
|
||||
"entity.other.attribute",
|
||||
"entity.name.scope-resolution",
|
||||
"entity.name.class",
|
||||
"storage.type.numeric.go",
|
||||
"storage.type.byte.go",
|
||||
"storage.type.boolean.go",
|
||||
"storage.type.string.go",
|
||||
"storage.type.uintptr.go",
|
||||
"storage.type.error.go",
|
||||
"storage.type.rune.go",
|
||||
"storage.type.cs",
|
||||
"storage.type.generic.cs",
|
||||
"storage.type.modifier.cs",
|
||||
"storage.type.variable.cs",
|
||||
"storage.type.annotation.java",
|
||||
"storage.type.generic.java",
|
||||
"storage.type.java",
|
||||
"storage.type.object.array.java",
|
||||
"storage.type.primitive.array.java",
|
||||
"storage.type.primitive.java",
|
||||
"storage.type.token.java",
|
||||
"storage.type.groovy",
|
||||
"storage.type.annotation.groovy",
|
||||
"storage.type.parameters.groovy",
|
||||
"storage.type.generic.groovy",
|
||||
"storage.type.object.array.groovy",
|
||||
"storage.type.primitive.array.groovy",
|
||||
"storage.type.primitive.groovy"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#267f99"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Types declaration and references, TS grammar specific",
|
||||
"scope": [
|
||||
"meta.type.cast.expr",
|
||||
"meta.type.new.expr",
|
||||
"support.constant.math",
|
||||
"support.constant.dom",
|
||||
"support.constant.json",
|
||||
"entity.other.inherited-class",
|
||||
"punctuation.separator.namespace.ruby"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#267f99"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Control flow / Special keywords",
|
||||
"scope": [
|
||||
"keyword.control",
|
||||
"source.cpp keyword.operator.new",
|
||||
"source.cpp keyword.operator.delete",
|
||||
"keyword.other.using",
|
||||
"keyword.other.directive.using",
|
||||
"keyword.other.operator",
|
||||
"entity.name.operator"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#AF00DB"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable and parameter name",
|
||||
"scope": [
|
||||
"variable",
|
||||
"meta.definition.variable.name",
|
||||
"support.variable",
|
||||
"entity.name.variable",
|
||||
"constant.other.placeholder" // placeholders in strings
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#001080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Constants and enums",
|
||||
"scope": ["variable.other.constant", "variable.other.enummember"],
|
||||
"settings": {
|
||||
"foreground": "#0070C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Object keys, TS grammar specific",
|
||||
"scope": ["meta.object-literal.key"],
|
||||
"settings": {
|
||||
"foreground": "#001080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "CSS property value",
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Regular expression groups",
|
||||
"scope": [
|
||||
"punctuation.definition.group.regexp",
|
||||
"punctuation.definition.group.assertion.regexp",
|
||||
"punctuation.definition.character-class.regexp",
|
||||
"punctuation.character.set.begin.regexp",
|
||||
"punctuation.character.set.end.regexp",
|
||||
"keyword.operator.negation.regexp",
|
||||
"support.other.parenthesis.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#d16969"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.character.character-class.regexp",
|
||||
"constant.other.character-class.set.regexp",
|
||||
"constant.other.character-class.regexp",
|
||||
"constant.character.set.regexp"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#811f3f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator.quantifier.regexp",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
|
||||
"settings": {
|
||||
"foreground": "#EE0000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["constant.character", "constant.other.option"],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.character.escape",
|
||||
"settings": {
|
||||
"foreground": "#EE0000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.label",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true,
|
||||
"semanticTokenColors": {
|
||||
"newOperator": "#AF00DB",
|
||||
"stringLiteral": "#a31515",
|
||||
"customLiteral": "#795E26",
|
||||
"numberLiteral": "#098658"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,424 @@
|
||||
{
|
||||
"$schema": "vscode://schemas/color-theme",
|
||||
"name": "Light (Visual Studio)",
|
||||
"colors": {
|
||||
"checkbox.border": "#919191",
|
||||
"editor.background": "#FFFFFF",
|
||||
"editor.foreground": "#000000",
|
||||
"editor.inactiveSelectionBackground": "#E5EBF1",
|
||||
"editorIndentGuide.background1": "#D3D3D3",
|
||||
"editorIndentGuide.activeBackground1": "#939393",
|
||||
"editor.selectionHighlightBackground": "#ADD6FF80",
|
||||
"editorSuggestWidget.background": "#F3F3F3",
|
||||
"activityBarBadge.background": "#007ACC",
|
||||
"sideBarTitle.foreground": "#6F6F6F",
|
||||
"list.hoverBackground": "#E8E8E8",
|
||||
"menu.border": "#D4D4D4",
|
||||
"input.placeholderForeground": "#767676",
|
||||
"searchEditor.textInputBorder": "#CECECE",
|
||||
"settings.textInputBorder": "#CECECE",
|
||||
"settings.numberInputBorder": "#CECECE",
|
||||
"statusBarItem.remoteForeground": "#FFF",
|
||||
"statusBarItem.remoteBackground": "#16825D",
|
||||
"ports.iconRunningProcessForeground": "#369432",
|
||||
"sideBarSectionHeader.background": "#0000",
|
||||
"sideBarSectionHeader.border": "#61616130",
|
||||
"tab.selectedForeground": "#333333b3",
|
||||
"tab.selectedBackground": "#ffffffa5",
|
||||
"tab.lastPinnedBorder": "#61616130",
|
||||
"notebook.cellBorderColor": "#E8E8E8",
|
||||
"notebook.selectedCellBackground": "#c8ddf150",
|
||||
"statusBarItem.errorBackground": "#c72e0f",
|
||||
"list.activeSelectionIconForeground": "#FFF",
|
||||
"list.focusAndSelectionOutline": "#90C2F9",
|
||||
"terminal.inactiveSelectionBackground": "#E5EBF1",
|
||||
"widget.border": "#d4d4d4",
|
||||
"actionBar.toggledBackground": "#dddddd",
|
||||
"diffEditor.unchangedRegionBackground": "#f8f8f8",
|
||||
"agentsNewSessionButton.border": "#D8D8D8",
|
||||
"agentsChatInput.border": "#D8D8D8"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"scope": [
|
||||
"meta.embedded",
|
||||
"source.groovy.embedded",
|
||||
"string meta.image.inline.markdown",
|
||||
"variable.legacy.builtin.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "emphasis",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "strong",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#000080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#008000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.language",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"constant.numeric",
|
||||
"variable.other.enummember",
|
||||
"keyword.operator.plus.exponent",
|
||||
"keyword.operator.minus.exponent"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#098658"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.regexp",
|
||||
"settings": {
|
||||
"foreground": "#811f3f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "css tags in selectors, xml tags",
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.selector",
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"foreground": "#e50000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"entity.other.attribute-name.class.css",
|
||||
"source.css entity.other.attribute-name.class",
|
||||
"entity.other.attribute-name.id.css",
|
||||
"entity.other.attribute-name.parent-selector.css",
|
||||
"entity.other.attribute-name.parent.less",
|
||||
"source.css entity.other.attribute-name.pseudo-class",
|
||||
"entity.other.attribute-name.pseudo-element.css",
|
||||
"source.css.less entity.other.attribute-name.id",
|
||||
"entity.other.attribute-name.scss"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"foreground": "#cd3131"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.underline",
|
||||
"settings": {
|
||||
"fontStyle": "underline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#000080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#800080"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#098658"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"foreground": "#a31515"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"punctuation.definition.quote.begin.markdown",
|
||||
"punctuation.definition.list.begin.markdown"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "brackets of XML/HTML tags",
|
||||
"scope": "punctuation.definition.tag",
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.string",
|
||||
"settings": {
|
||||
"foreground": "#a31515"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.preprocessor.numeric",
|
||||
"settings": {
|
||||
"foreground": "#098658"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "meta.structure.dictionary.key.python",
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "storage.type",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["storage.modifier", "keyword.operator.noexcept"],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["string", "meta.embedded.assembly"],
|
||||
"settings": {
|
||||
"foreground": "#a31515"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"string.comment.buffered.block.pug",
|
||||
"string.quoted.pug",
|
||||
"string.interpolated.pug",
|
||||
"string.unquoted.plain.in.yaml",
|
||||
"string.unquoted.plain.out.yaml",
|
||||
"string.unquoted.block.yaml",
|
||||
"string.quoted.single.yaml",
|
||||
"string.quoted.double.xml",
|
||||
"string.quoted.single.xml",
|
||||
"string.unquoted.cdata.xml",
|
||||
"string.quoted.double.html",
|
||||
"string.quoted.single.html",
|
||||
"string.unquoted.html",
|
||||
"string.quoted.single.handlebars",
|
||||
"string.quoted.double.handlebars"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "string.regexp",
|
||||
"settings": {
|
||||
"foreground": "#811f3f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "String interpolation",
|
||||
"scope": [
|
||||
"punctuation.definition.template-expression.begin",
|
||||
"punctuation.definition.template-expression.end",
|
||||
"punctuation.section.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Reset JavaScript string interpolation expression",
|
||||
"scope": ["meta.template.expression"],
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.constant.property-value",
|
||||
"support.constant.font-name",
|
||||
"support.constant.media-type",
|
||||
"support.constant.media",
|
||||
"constant.other.color.rgb-value",
|
||||
"constant.other.rgb-value",
|
||||
"support.constant.color"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"support.type.vendored.property-name",
|
||||
"support.type.property-name",
|
||||
"source.css variable",
|
||||
"source.coffee.embedded"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#e50000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["support.type.property-name.json"],
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.control",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.operator",
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"keyword.operator.new",
|
||||
"keyword.operator.expression",
|
||||
"keyword.operator.cast",
|
||||
"keyword.operator.sizeof",
|
||||
"keyword.operator.alignof",
|
||||
"keyword.operator.typeid",
|
||||
"keyword.operator.alignas",
|
||||
"keyword.operator.instanceof",
|
||||
"keyword.operator.logical.python",
|
||||
"keyword.operator.wordlike"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "keyword.other.unit",
|
||||
"settings": {
|
||||
"foreground": "#098658"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
|
||||
"settings": {
|
||||
"foreground": "#800000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "support.function.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#0451a5"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.sha.git-rebase",
|
||||
"settings": {
|
||||
"foreground": "#098658"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "coloring of the Java import and package identifiers",
|
||||
"scope": [
|
||||
"storage.modifier.import.java",
|
||||
"variable.language.wildcard.java",
|
||||
"storage.modifier.package.java"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#000000"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "this.self",
|
||||
"scope": "variable.language",
|
||||
"settings": {
|
||||
"foreground": "#0000ff"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true,
|
||||
"semanticTokenColors": {
|
||||
"newOperator": "#0000ff",
|
||||
"stringLiteral": "#a31515",
|
||||
"customLiteral": "#000000",
|
||||
"numberLiteral": "#098658"
|
||||
}
|
||||
}
|
||||
+482
@@ -0,0 +1,482 @@
|
||||
// This theme's colors are based on the original Monokai:
|
||||
// #1e1f1c (tab well, borders)
|
||||
// #272822 (editor background)
|
||||
// #414339 (selection)
|
||||
// #75715e (focus)
|
||||
// #f8f8f2 (editor foreground)
|
||||
{
|
||||
"type": "dark",
|
||||
"colors": {
|
||||
"dropdown.background": "#414339",
|
||||
"list.activeSelectionBackground": "#75715E",
|
||||
"quickInputList.focusBackground": "#414339",
|
||||
"dropdown.listBackground": "#1e1f1c",
|
||||
"list.inactiveSelectionBackground": "#414339",
|
||||
"list.hoverBackground": "#3e3d32",
|
||||
"list.dropBackground": "#414339",
|
||||
"list.highlightForeground": "#f8f8f2",
|
||||
"button.background": "#75715E",
|
||||
"editor.background": "#272822",
|
||||
"editor.foreground": "#f8f8f2",
|
||||
"selection.background": "#878b9180",
|
||||
"editor.selectionHighlightBackground": "#575b6180",
|
||||
"editor.selectionBackground": "#878b9180",
|
||||
"minimap.selectionHighlight": "#878b9180",
|
||||
"editor.wordHighlightBackground": "#4a4a7680",
|
||||
"editor.wordHighlightStrongBackground": "#6a6a9680",
|
||||
"editor.lineHighlightBackground": "#3e3d32",
|
||||
"editorLineNumber.activeForeground": "#c2c2bf",
|
||||
"editorCursor.foreground": "#f8f8f0",
|
||||
"editorWhitespace.foreground": "#464741",
|
||||
"editorIndentGuide.background": "#464741",
|
||||
"editorIndentGuide.activeBackground": "#767771",
|
||||
"editorGroupHeader.tabsBackground": "#1e1f1c",
|
||||
"editorGroup.dropBackground": "#41433980",
|
||||
"tab.inactiveBackground": "#34352f",
|
||||
"tab.border": "#1e1f1c",
|
||||
"tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused
|
||||
"tab.lastPinnedBorder": "#414339",
|
||||
"widget.shadow": "#00000098",
|
||||
"progressBar.background": "#75715E",
|
||||
"badge.background": "#75715E",
|
||||
"badge.foreground": "#f8f8f2",
|
||||
"editorLineNumber.foreground": "#90908a",
|
||||
"panelTitle.activeForeground": "#f8f8f2",
|
||||
"panelTitle.activeBorder": "#75715E",
|
||||
"panelTitle.inactiveForeground": "#75715E",
|
||||
"panel.border": "#414339",
|
||||
"settings.focusedRowBackground": "#4143395A",
|
||||
"titleBar.activeBackground": "#1e1f1c",
|
||||
"statusBar.background": "#414339",
|
||||
"statusBar.noFolderBackground": "#414339",
|
||||
"statusBar.debuggingBackground": "#75715E",
|
||||
"statusBarItem.remoteBackground": "#AC6218",
|
||||
"ports.iconRunningProcessForeground": "#ccccc7",
|
||||
"activityBar.background": "#272822",
|
||||
"activityBar.foreground": "#f8f8f2",
|
||||
"sideBar.background": "#1e1f1c",
|
||||
"sideBarSectionHeader.background": "#272822",
|
||||
"menu.background": "#1e1f1c",
|
||||
"menu.foreground": "#cccccc",
|
||||
"pickerGroup.foreground": "#75715E",
|
||||
"input.background": "#414339",
|
||||
"inputOption.activeBorder": "#75715E",
|
||||
"focusBorder": "#99947c",
|
||||
"editorWidget.background": "#1e1f1c",
|
||||
"debugToolBar.background": "#1e1f1c",
|
||||
"diffEditor.insertedTextBackground": "#4b661680", // middle of #272822 and #a6e22e
|
||||
"diffEditor.removedTextBackground": "#90274A70", // middle of #272822 and #f92672
|
||||
"inputValidation.errorBackground": "#90274A", // middle of #272822 and #f92672
|
||||
"inputValidation.errorBorder": "#f92672",
|
||||
"inputValidation.warningBackground": "#848528", // middle of #272822 and #e2e22e
|
||||
"inputValidation.warningBorder": "#e2e22e",
|
||||
"inputValidation.infoBackground": "#546190", // middle of #272822 and #819aff
|
||||
"inputValidation.infoBorder": "#819aff",
|
||||
"editorHoverWidget.background": "#414339",
|
||||
"editorHoverWidget.border": "#75715E",
|
||||
"editorSuggestWidget.background": "#272822",
|
||||
"editorSuggestWidget.border": "#75715E",
|
||||
"editorGroup.border": "#34352f",
|
||||
"peekView.border": "#75715E",
|
||||
"peekViewEditor.background": "#272822",
|
||||
"peekViewResult.background": "#1e1f1c",
|
||||
"peekViewTitle.background": "#1e1f1c",
|
||||
"peekViewResult.selectionBackground": "#414339",
|
||||
"peekViewResult.matchHighlightBackground": "#75715E",
|
||||
"peekViewEditor.matchHighlightBackground": "#75715E",
|
||||
"terminal.ansiBlack": "#333333",
|
||||
"terminal.ansiRed": "#C4265E", // the bright color with ~75% transparent on the background
|
||||
"terminal.ansiGreen": "#86B42B",
|
||||
"terminal.ansiYellow": "#B3B42B",
|
||||
"terminal.ansiBlue": "#6A7EC8",
|
||||
"terminal.ansiMagenta": "#8C6BC8",
|
||||
"terminal.ansiCyan": "#56ADBC",
|
||||
"terminal.ansiWhite": "#e3e3dd",
|
||||
"terminal.ansiBrightBlack": "#666666",
|
||||
"terminal.ansiBrightRed": "#f92672",
|
||||
"terminal.ansiBrightGreen": "#A6E22E",
|
||||
"terminal.ansiBrightYellow": "#e2e22e", // hue shifted #A6E22E
|
||||
"terminal.ansiBrightBlue": "#819aff", // hue shifted #AE81FF
|
||||
"terminal.ansiBrightMagenta": "#AE81FF",
|
||||
"terminal.ansiBrightCyan": "#66D9EF",
|
||||
"terminal.ansiBrightWhite": "#f8f8f2"
|
||||
},
|
||||
"tokenColors": [
|
||||
{
|
||||
"settings": {
|
||||
"foreground": "#F8F8F2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"meta.embedded",
|
||||
"source.groovy.embedded",
|
||||
"string meta.image.inline.markdown",
|
||||
"variable.legacy.builtin.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#F8F8F2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Comment",
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"foreground": "#88846f"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "String",
|
||||
"scope": "string",
|
||||
"settings": {
|
||||
"foreground": "#E6DB74"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Template Definition",
|
||||
"scope": ["punctuation.definition.template-expression", "punctuation.section.embedded"],
|
||||
"settings": {
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Reset JavaScript string interpolation expression",
|
||||
"scope": ["meta.template.expression"],
|
||||
"settings": {
|
||||
"foreground": "#F8F8F2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Number",
|
||||
"scope": "constant.numeric",
|
||||
"settings": {
|
||||
"foreground": "#AE81FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Built-in constant",
|
||||
"scope": "constant.language",
|
||||
"settings": {
|
||||
"foreground": "#AE81FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "User-defined constant",
|
||||
"scope": "constant.character, constant.other",
|
||||
"settings": {
|
||||
"foreground": "#AE81FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable",
|
||||
"scope": "variable",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#F8F8F2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Keyword",
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Storage",
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Storage type",
|
||||
"scope": "storage.type",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#66D9EF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Class name",
|
||||
"scope": "entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution",
|
||||
"settings": {
|
||||
"fontStyle": "underline",
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Inherited class",
|
||||
"scope": ["entity.other.inherited-class", "punctuation.separator.namespace.ruby"],
|
||||
"settings": {
|
||||
"fontStyle": "italic underline",
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Function name",
|
||||
"scope": "entity.name.function",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Function argument",
|
||||
"scope": "variable.parameter",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#FD971F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Tag name",
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Tag attribute",
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library function",
|
||||
"scope": "support.function",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#66D9EF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library constant",
|
||||
"scope": "support.constant",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#66D9EF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library class/type",
|
||||
"scope": "support.type, support.class",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#66D9EF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library variable",
|
||||
"scope": "support.other.variable",
|
||||
"settings": {
|
||||
"fontStyle": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Invalid",
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#F44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Invalid deprecated",
|
||||
"scope": "invalid.deprecated",
|
||||
"settings": {
|
||||
"foreground": "#F44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "JSON String",
|
||||
"scope": "meta.structure.dictionary.json string.quoted.double.json",
|
||||
"settings": {
|
||||
"foreground": "#CFCFC2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff.header",
|
||||
"scope": "meta.diff, meta.diff.header",
|
||||
"settings": {
|
||||
"foreground": "#75715E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff.deleted",
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff.inserted",
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff.changed",
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"foreground": "#E6DB74"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "constant.numeric.line-number.find-in-files - match",
|
||||
"settings": {
|
||||
"foreground": "#AE81FFA0"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "entity.name.filename.find-in-files",
|
||||
"settings": {
|
||||
"foreground": "#E6DB74"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Quote",
|
||||
"scope": "markup.quote",
|
||||
"settings": {
|
||||
"foreground": "#F92672"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Lists",
|
||||
"scope": "markup.list",
|
||||
"settings": {
|
||||
"foreground": "#E6DB74"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Styling",
|
||||
"scope": "markup.bold, markup.italic",
|
||||
"settings": {
|
||||
"foreground": "#66D9EF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Inline",
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#FD971F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Headings",
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Setext Header",
|
||||
"scope": "markup.heading.setext",
|
||||
"settings": {
|
||||
"foreground": "#A6E22E",
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Headings",
|
||||
"scope": "markup.heading.markdown",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Quote",
|
||||
"scope": "markup.quote.markdown",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#75715E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Bold",
|
||||
"scope": "markup.bold.markdown",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Link Title/Description",
|
||||
"scope": "string.other.link.title.markdown,string.other.link.description.markdown",
|
||||
"settings": {
|
||||
"foreground": "#AE81FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Underline Link/Image",
|
||||
"scope": "markup.underline.link.markdown,markup.underline.link.image.markdown",
|
||||
"settings": {
|
||||
"foreground": "#E6DB74"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Emphasis",
|
||||
"scope": "markup.italic.markdown",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown Punctuation Definition Link",
|
||||
"scope": "markup.list.unnumbered.markdown, markup.list.numbered.markdown",
|
||||
"settings": {
|
||||
"foreground": "#f8f8f2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markdown List Punctuation",
|
||||
"scope": ["punctuation.definition.list.begin.markdown"],
|
||||
"settings": {
|
||||
"foreground": "#A6E22E"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.info-token",
|
||||
"settings": {
|
||||
"foreground": "#6796e6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.warn-token",
|
||||
"settings": {
|
||||
"foreground": "#cd9731"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.error-token",
|
||||
"settings": {
|
||||
"foreground": "#f44747"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "token.debug-token",
|
||||
"settings": {
|
||||
"foreground": "#b267e6"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "this.self",
|
||||
"scope": "variable.language",
|
||||
"settings": {
|
||||
"foreground": "#FD971F"
|
||||
}
|
||||
}
|
||||
],
|
||||
"semanticHighlighting": true
|
||||
}
|
||||
+473
@@ -0,0 +1,473 @@
|
||||
{
|
||||
"name": "Solarized (light)",
|
||||
"tokenColors": [
|
||||
{
|
||||
"settings": {
|
||||
"foreground": "#657B83"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": [
|
||||
"meta.embedded",
|
||||
"source.groovy.embedded",
|
||||
"string meta.image.inline.markdown",
|
||||
"variable.legacy.builtin.python"
|
||||
],
|
||||
"settings": {
|
||||
"foreground": "#657B83"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Comment",
|
||||
"scope": "comment",
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#93A1A1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "String",
|
||||
"scope": "string",
|
||||
"settings": {
|
||||
"foreground": "#2AA198"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Regexp",
|
||||
"scope": "string.regexp",
|
||||
"settings": {
|
||||
"foreground": "#DC322F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Number",
|
||||
"scope": "constant.numeric",
|
||||
"settings": {
|
||||
"foreground": "#D33682"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable",
|
||||
"scope": ["variable.language", "variable.other"],
|
||||
"settings": {
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Keyword",
|
||||
"scope": "keyword",
|
||||
"settings": {
|
||||
"foreground": "#859900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Storage",
|
||||
"scope": "storage",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#586E75"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Class name",
|
||||
"scope": [
|
||||
"entity.name.class",
|
||||
"entity.name.type",
|
||||
"entity.name.namespace",
|
||||
"entity.name.scope-resolution"
|
||||
],
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#CB4B16"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Function name",
|
||||
"scope": "entity.name.function",
|
||||
"settings": {
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Variable start",
|
||||
"scope": "punctuation.definition.variable",
|
||||
"settings": {
|
||||
"foreground": "#859900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Embedded code markers",
|
||||
"scope": ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
|
||||
"settings": {
|
||||
"foreground": "#DC322F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Built-in constant",
|
||||
"scope": ["constant.language", "meta.preprocessor"],
|
||||
"settings": {
|
||||
"foreground": "#B58900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Support.construct",
|
||||
"scope": ["support.function.construct", "keyword.other.new"],
|
||||
"settings": {
|
||||
"foreground": "#CB4B16"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "User-defined constant",
|
||||
"scope": ["constant.character", "constant.other"],
|
||||
"settings": {
|
||||
"foreground": "#CB4B16"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Inherited class",
|
||||
"scope": ["entity.other.inherited-class", "punctuation.separator.namespace.ruby"],
|
||||
"settings": {
|
||||
"foreground": "#6C71C4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Function argument",
|
||||
"scope": "variable.parameter",
|
||||
"settings": {}
|
||||
},
|
||||
{
|
||||
"name": "Tag name",
|
||||
"scope": "entity.name.tag",
|
||||
"settings": {
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Tag start/end",
|
||||
"scope": "punctuation.definition.tag",
|
||||
"settings": {
|
||||
"foreground": "#93A1A1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Tag attribute",
|
||||
"scope": "entity.other.attribute-name",
|
||||
"settings": {
|
||||
"foreground": "#93A1A1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library function",
|
||||
"scope": "support.function",
|
||||
"settings": {
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Continuation",
|
||||
"scope": "punctuation.separator.continuation",
|
||||
"settings": {
|
||||
"foreground": "#DC322F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library constant",
|
||||
"scope": ["support.constant", "support.variable"],
|
||||
"settings": {}
|
||||
},
|
||||
{
|
||||
"name": "Library class/type",
|
||||
"scope": ["support.type", "support.class"],
|
||||
"settings": {
|
||||
"foreground": "#859900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library Exception",
|
||||
"scope": "support.type.exception",
|
||||
"settings": {
|
||||
"foreground": "#CB4B16"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Library variable",
|
||||
"scope": "support.other.variable",
|
||||
"settings": {}
|
||||
},
|
||||
{
|
||||
"name": "Invalid",
|
||||
"scope": "invalid",
|
||||
"settings": {
|
||||
"foreground": "#DC322F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff: header",
|
||||
"scope": ["meta.diff", "meta.diff.header"],
|
||||
"settings": {
|
||||
"fontStyle": "italic",
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff: deleted",
|
||||
"scope": "markup.deleted",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#DC322F"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff: changed",
|
||||
"scope": "markup.changed",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#CB4B16"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "diff: inserted",
|
||||
"scope": "markup.inserted",
|
||||
"settings": {
|
||||
"foreground": "#859900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Quote",
|
||||
"scope": "markup.quote",
|
||||
"settings": {
|
||||
"foreground": "#859900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Lists",
|
||||
"scope": "markup.list",
|
||||
"settings": {
|
||||
"foreground": "#B58900"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Styling",
|
||||
"scope": ["markup.bold", "markup.italic"],
|
||||
"settings": {
|
||||
"foreground": "#D33682"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup: Strong",
|
||||
"scope": "markup.bold",
|
||||
"settings": {
|
||||
"fontStyle": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup: Emphasis",
|
||||
"scope": "markup.italic",
|
||||
"settings": {
|
||||
"fontStyle": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
"scope": "markup.strikethrough",
|
||||
"settings": {
|
||||
"fontStyle": "strikethrough"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Inline",
|
||||
"scope": "markup.inline.raw",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#2AA198"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Headings",
|
||||
"scope": "markup.heading",
|
||||
"settings": {
|
||||
"fontStyle": "bold",
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Markup Setext Header",
|
||||
"scope": "markup.heading.setext",
|
||||
"settings": {
|
||||
"fontStyle": "",
|
||||
"foreground": "#268BD2"
|
||||
}
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
// Base
|
||||
// "foreground": "",
|
||||
"focusBorder": "#b49471",
|
||||
// "contrastActiveBorder": "",
|
||||
// "contrastBorder": "",
|
||||
// "widget.shadow": "",
|
||||
"input.background": "#DDD6C1",
|
||||
// "input.border": "",
|
||||
"input.foreground": "#586E75",
|
||||
"input.placeholderForeground": "#586E75AA",
|
||||
"inputOption.activeBorder": "#D3AF86",
|
||||
// "inputValidation.infoBorder": "",
|
||||
// "inputValidation.infoBackground": "",
|
||||
// "inputValidation.warningBackground": "",
|
||||
// "inputValidation.warningBorder": "",
|
||||
// "inputValidation.errorBackground": "",
|
||||
// "inputValidation.errorBorder": "",
|
||||
"badge.background": "#B58900AA",
|
||||
"progressBar.background": "#B58900",
|
||||
"dropdown.background": "#EEE8D5",
|
||||
// "dropdown.foreground": "",
|
||||
"dropdown.border": "#D3AF86",
|
||||
"button.background": "#AC9D57",
|
||||
// "button.foreground": "",
|
||||
"selection.background": "#878b9180",
|
||||
"list.activeSelectionBackground": "#DFCA88",
|
||||
"list.activeSelectionForeground": "#6C6C6C",
|
||||
"quickInputList.focusBackground": "#DFCA8866",
|
||||
"list.hoverBackground": "#DFCA8844",
|
||||
"list.inactiveSelectionBackground": "#D1CBB8",
|
||||
"list.highlightForeground": "#B58900",
|
||||
// "scrollbar.shadow": "",
|
||||
// "scrollbarSlider.activeBackground": "",
|
||||
// "scrollbarSlider.background": "",
|
||||
// "scrollbarSlider.hoverBackground": "",
|
||||
// Editor
|
||||
"editor.background": "#FDF6E3",
|
||||
"editor.foreground": "#657B83",
|
||||
"notebook.cellEditorBackground": "#F7F0E0",
|
||||
"editorWidget.background": "#EEE8D5",
|
||||
"editorCursor.foreground": "#657B83",
|
||||
"editorWhitespace.foreground": "#586E7580",
|
||||
"editor.lineHighlightBackground": "#EEE8D5",
|
||||
"editor.selectionBackground": "#EEE8D5",
|
||||
"minimap.selectionHighlight": "#EEE8D5",
|
||||
"editorIndentGuide.background": "#586E7580",
|
||||
"editorIndentGuide.activeBackground": "#081E2580",
|
||||
"editorHoverWidget.background": "#CCC4B0",
|
||||
"editorLineNumber.activeForeground": "#567983",
|
||||
// "editorHoverWidget.border": "",
|
||||
// "editorLineNumber.foreground": "",
|
||||
// "editorMarkerNavigation.background": "",
|
||||
// "editorMarkerNavigationError.background": "",
|
||||
// "editorMarkerNavigationWarning.background": "",
|
||||
// "editorLink.activeForeground": "",
|
||||
// "editor.findMatchBackground": "",
|
||||
// "editor.findMatchHighlightBackground": "",
|
||||
// "editor.findRangeHighlightBackground": "",
|
||||
// "editor.hoverHighlightBackground": "",
|
||||
// "editor.inactiveSelectionBackground": "",
|
||||
// "editor.lineHighlightBorder": "",
|
||||
// "editor.rangeHighlightBackground": "",
|
||||
// "editor.selectionHighlightBackground": "",
|
||||
// "editor.wordHighlightBackground": "",
|
||||
// "editor.wordHighlightStrongBackground": "",
|
||||
// Editor: Suggest Widget
|
||||
// "editorSuggestWidget.background": "",
|
||||
// "editorSuggestWidget.border": "",
|
||||
// "editorSuggestWidget.foreground": "",
|
||||
// "editorSuggestWidget.highlightForeground": "",
|
||||
// "editorSuggestWidget.selectedBackground": "",
|
||||
// Editor: Peek View
|
||||
"peekViewResult.background": "#EEE8D5",
|
||||
// "peekViewResult.lineForeground": "",
|
||||
// "peekViewResult.selectionBackground": "",
|
||||
// "peekViewResult.selectionForeground": "",
|
||||
"peekViewEditor.background": "#FFFBF2",
|
||||
"peekViewTitle.background": "#EEE8D5",
|
||||
"peekView.border": "#B58900",
|
||||
"peekViewEditor.matchHighlightBackground": "#7744AA40",
|
||||
// "peekViewResult.fileForeground": "",
|
||||
// "peekViewResult.matchHighlightBackground": "",
|
||||
// "peekViewTitleLabel.foreground": "",
|
||||
// "peekViewTitleDescription.foreground": "",
|
||||
// Editor: Diff
|
||||
// "diffEditor.insertedTextBackground": "",
|
||||
// "diffEditor.insertedTextBorder": "",
|
||||
// "diffEditor.removedTextBackground": "",
|
||||
// "diffEditor.removedTextBorder": "",
|
||||
// Workbench: Title
|
||||
"titleBar.activeBackground": "#EEE8D5",
|
||||
// "titleBar.activeForeground": "",
|
||||
// "titleBar.inactiveBackground": "",
|
||||
// "titleBar.inactiveForeground": "",
|
||||
// Workbench: Editors
|
||||
// "editorGroupHeader.noTabsBackground": "",
|
||||
"editorGroup.border": "#DDD6C1",
|
||||
"editorGroup.dropBackground": "#DDD6C1AA",
|
||||
"editorGroupHeader.tabsBackground": "#D9D2C2",
|
||||
// Workbench: Tabs
|
||||
"tab.border": "#DDD6C1",
|
||||
"tab.activeBackground": "#FDF6E3",
|
||||
"tab.inactiveForeground": "#586E75",
|
||||
"tab.inactiveBackground": "#D3CBB7",
|
||||
"tab.activeModifiedBorder": "#cb4b16",
|
||||
// "tab.activeBackground": "",
|
||||
// "tab.activeForeground": "",
|
||||
// "tab.inactiveForeground": "",
|
||||
"tab.lastPinnedBorder": "#FDF6E3",
|
||||
// Workbench: Activity Bar
|
||||
"activityBar.background": "#DDD6C1",
|
||||
"activityBar.foreground": "#584c27",
|
||||
"activityBarBadge.background": "#B58900",
|
||||
// "activityBarBadge.foreground": "",
|
||||
// Workbench: Panel
|
||||
// "panel.background": "",
|
||||
"panel.border": "#DDD6C1",
|
||||
// "panelTitle.activeBorder": "",
|
||||
// "panelTitle.activeForeground": "",
|
||||
// "panelTitle.inactiveForeground": "",
|
||||
// Workbench: Side Bar
|
||||
"sideBar.background": "#EEE8D5",
|
||||
"sideBarTitle.foreground": "#586E75",
|
||||
// "sideBarSectionHeader.background": "",
|
||||
// Workbench: Status Bar
|
||||
"statusBar.foreground": "#586E75",
|
||||
"statusBar.background": "#EEE8D5",
|
||||
"statusBar.debuggingBackground": "#EEE8D5",
|
||||
"statusBar.noFolderBackground": "#EEE8D5",
|
||||
// "statusBar.foreground": "",
|
||||
"statusBarItem.remoteBackground": "#AC9D57",
|
||||
"ports.iconRunningProcessForeground": "#2AA19899",
|
||||
"statusBarItem.prominentBackground": "#DDD6C1",
|
||||
"statusBarItem.prominentHoverBackground": "#DDD6C199",
|
||||
// "statusBarItem.activeBackground": "",
|
||||
// "statusBarItem.hoverBackground": "",
|
||||
// Workbench: Debug
|
||||
"debugToolBar.background": "#DDD6C1",
|
||||
"debugExceptionWidget.background": "#DDD6C1",
|
||||
"debugExceptionWidget.border": "#AB395B",
|
||||
// Workbench: Quick Open
|
||||
"pickerGroup.border": "#2AA19899",
|
||||
"pickerGroup.foreground": "#2AA19899",
|
||||
// Extensions
|
||||
"extensionButton.prominentBackground": "#b58900",
|
||||
"extensionButton.prominentHoverBackground": "#584c27aa",
|
||||
// Workbench: Terminal
|
||||
// Colors sourced from the official palette http://ethanschoonover.com/solarized
|
||||
"terminal.ansiBlack": "#073642",
|
||||
"terminal.ansiRed": "#dc322f",
|
||||
"terminal.ansiGreen": "#859900",
|
||||
"terminal.ansiYellow": "#b58900",
|
||||
"terminal.ansiBlue": "#268bd2",
|
||||
"terminal.ansiMagenta": "#d33682",
|
||||
"terminal.ansiCyan": "#2aa198",
|
||||
"terminal.ansiWhite": "#eee8d5",
|
||||
"terminal.ansiBrightBlack": "#002b36",
|
||||
"terminal.ansiBrightRed": "#cb4b16",
|
||||
"terminal.ansiBrightGreen": "#586e75",
|
||||
"terminal.ansiBrightYellow": "#657b83",
|
||||
"terminal.ansiBrightBlue": "#839496",
|
||||
"terminal.ansiBrightMagenta": "#6c71c4",
|
||||
"terminal.ansiBrightCyan": "#93a1a1",
|
||||
"terminal.ansiBrightWhite": "#fdf6e3",
|
||||
// Set terminal background explicitly, otherwise selection becomes invisible when the
|
||||
// terminal is in the side bar
|
||||
"terminal.background": "#FDF6E3",
|
||||
// Interactive Playground
|
||||
"walkThrough.embeddedEditorBackground": "#00000014"
|
||||
},
|
||||
"semanticHighlighting": true
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>VS Code Theme Sequence</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#vscode-theme-sequence {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="vscode-theme-sequence"
|
||||
data-composition-id="vscode-theme-sequence"
|
||||
data-start="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-light-2026"
|
||||
data-composition-id="vscode-light-2026"
|
||||
data-composition-src="compositions/light-2026.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-dark-2026"
|
||||
data-composition-id="vscode-dark-2026"
|
||||
data-composition-src="compositions/dark-2026.html"
|
||||
data-start="11"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-dark-plus"
|
||||
data-composition-id="vscode-dark-plus"
|
||||
data-composition-src="compositions/dark-plus.html"
|
||||
data-start="22"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-dark-modern"
|
||||
data-composition-id="vscode-dark-modern"
|
||||
data-composition-src="compositions/dark-modern.html"
|
||||
data-start="33"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-light-plus"
|
||||
data-composition-id="vscode-light-plus"
|
||||
data-composition-src="compositions/light-plus.html"
|
||||
data-start="44"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-light-modern"
|
||||
data-composition-id="vscode-light-modern"
|
||||
data-composition-src="compositions/light-modern.html"
|
||||
data-start="55"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-visual-studio-dark"
|
||||
data-composition-id="vscode-visual-studio-dark"
|
||||
data-composition-src="compositions/visual-studio-dark.html"
|
||||
data-start="66"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-visual-studio-light"
|
||||
data-composition-id="vscode-visual-studio-light"
|
||||
data-composition-src="compositions/visual-studio-light.html"
|
||||
data-start="77"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-high-contrast"
|
||||
data-composition-id="vscode-high-contrast"
|
||||
data-composition-src="compositions/high-contrast.html"
|
||||
data-start="88"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-high-contrast-light"
|
||||
data-composition-id="vscode-high-contrast-light"
|
||||
data-composition-src="compositions/high-contrast-light.html"
|
||||
data-start="99"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-solarized-light"
|
||||
data-composition-id="vscode-solarized-light"
|
||||
data-composition-src="compositions/solarized-light.html"
|
||||
data-start="110"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<div
|
||||
id="clip-monokai"
|
||||
data-composition-id="vscode-monokai"
|
||||
data-composition-src="compositions/monokai.html"
|
||||
data-start="121"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["vscode-theme-sequence"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "vscode-theme-visualizer",
|
||||
"type": "hyperframes:example",
|
||||
"title": "VS Code Theme Visualizer",
|
||||
"description": "Faithful VS Code workbench recreation with per-character typing animation across 12 built-in themes. Activity bar, sidebar, tabs, editor, terminal, and status bar — all driven by official theme JSON files.",
|
||||
"tags": ["code", "developer", "showcase", "vscode", "themes"],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 132,
|
||||
"files": [
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/dark-2026.html",
|
||||
"target": "compositions/dark-2026.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/dark-modern.html",
|
||||
"target": "compositions/dark-modern.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/dark-plus.html",
|
||||
"target": "compositions/dark-plus.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/high-contrast-light.html",
|
||||
"target": "compositions/high-contrast-light.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/high-contrast.html",
|
||||
"target": "compositions/high-contrast.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/light-2026.html",
|
||||
"target": "compositions/light-2026.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/light-modern.html",
|
||||
"target": "compositions/light-modern.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/light-plus.html",
|
||||
"target": "compositions/light-plus.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/monokai.html",
|
||||
"target": "compositions/monokai.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/solarized-light.html",
|
||||
"target": "compositions/solarized-light.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/visual-studio-dark.html",
|
||||
"target": "compositions/visual-studio-dark.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/visual-studio-light.html",
|
||||
"target": "compositions/visual-studio-light.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "assets/background.jpeg",
|
||||
"target": "assets/background.jpeg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/vscode-sequence.css",
|
||||
"target": "assets/vscode-sequence.css",
|
||||
"type": "hyperframes:style"
|
||||
},
|
||||
{
|
||||
"path": "assets/vscode-sequence-runtime.js",
|
||||
"target": "assets/vscode-sequence-runtime.js",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/vscode-theme-registry.js",
|
||||
"target": "assets/vscode-theme-registry.js",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "scripts/build-compositions.mjs",
|
||||
"target": "scripts/build-compositions.mjs",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "scripts/build-theme-registry.mjs",
|
||||
"target": "scripts/build-theme-registry.mjs",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "DESIGN.md",
|
||||
"target": "DESIGN.md",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Dark 2026 Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-dark-2026 {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-dark-2026"
|
||||
data-composition-id="render-dark-2026"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-dark-2026"
|
||||
data-composition-id="vscode-dark-2026"
|
||||
data-composition-src="../compositions/dark-2026.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-dark-2026"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Dark Modern Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-dark-modern {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-dark-modern"
|
||||
data-composition-id="render-dark-modern"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-dark-modern"
|
||||
data-composition-id="vscode-dark-modern"
|
||||
data-composition-src="../compositions/dark-modern.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-dark-modern"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Dark+ Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-dark-plus {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-dark-plus"
|
||||
data-composition-id="render-dark-plus"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-dark-plus"
|
||||
data-composition-id="vscode-dark-plus"
|
||||
data-composition-src="../compositions/dark-plus.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-dark-plus"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Default High Contrast Light Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-high-contrast-light {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-high-contrast-light"
|
||||
data-composition-id="render-high-contrast-light"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-high-contrast-light"
|
||||
data-composition-id="vscode-high-contrast-light"
|
||||
data-composition-src="../compositions/high-contrast-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-high-contrast-light"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Default High Contrast Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-high-contrast {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-high-contrast"
|
||||
data-composition-id="render-high-contrast"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-high-contrast"
|
||||
data-composition-id="vscode-high-contrast"
|
||||
data-composition-src="../compositions/high-contrast.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-high-contrast"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Light 2026 Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-light-2026 {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-light-2026"
|
||||
data-composition-id="render-light-2026"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-light-2026"
|
||||
data-composition-id="vscode-light-2026"
|
||||
data-composition-src="../compositions/light-2026.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-light-2026"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Light Modern Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-light-modern {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-light-modern"
|
||||
data-composition-id="render-light-modern"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-light-modern"
|
||||
data-composition-id="vscode-light-modern"
|
||||
data-composition-src="../compositions/light-modern.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-light-modern"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Light+ Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-light-plus {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-light-plus"
|
||||
data-composition-id="render-light-plus"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-light-plus"
|
||||
data-composition-id="vscode-light-plus"
|
||||
data-composition-src="../compositions/light-plus.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-light-plus"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Monokai Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-monokai {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-monokai"
|
||||
data-composition-id="render-monokai"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-monokai"
|
||||
data-composition-id="vscode-monokai"
|
||||
data-composition-src="../compositions/monokai.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-monokai"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Solarized Light Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-solarized-light {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-solarized-light"
|
||||
data-composition-id="render-solarized-light"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-solarized-light"
|
||||
data-composition-id="vscode-solarized-light"
|
||||
data-composition-src="../compositions/solarized-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-solarized-light"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Visual Studio Dark Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-visual-studio-dark {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-visual-studio-dark"
|
||||
data-composition-id="render-visual-studio-dark"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-visual-studio-dark"
|
||||
data-composition-id="vscode-visual-studio-dark"
|
||||
data-composition-src="../compositions/visual-studio-dark.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-visual-studio-dark"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Visual Studio Light Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-visual-studio-light {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="render-visual-studio-light"
|
||||
data-composition-id="render-visual-studio-light"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div
|
||||
id="clip-visual-studio-light"
|
||||
data-composition-id="vscode-visual-studio-light"
|
||||
data-composition-src="../compositions/visual-studio-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-visual-studio-light"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,932 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const projectRoot = path.resolve(__dirname, "..");
|
||||
const repoRoot = path.resolve(projectRoot, "../../..");
|
||||
const assetsDir = path.join(projectRoot, "assets");
|
||||
const compositionsDir = path.join(projectRoot, "compositions");
|
||||
const renderEntriesDir = path.join(projectRoot, "render-entries");
|
||||
const blocksDir = path.join(repoRoot, "registry", "blocks");
|
||||
|
||||
fs.mkdirSync(compositionsDir, { recursive: true });
|
||||
fs.mkdirSync(renderEntriesDir, { recursive: true });
|
||||
|
||||
const registrySource = fs.readFileSync(path.join(assetsDir, "vscode-theme-registry.js"), "utf8");
|
||||
const registryBody = registrySource
|
||||
.replace(/^.*window\.VSCODE_THEME_REGISTRY\s*=\s*/s, "")
|
||||
.replace(/;\s*$/, "");
|
||||
const registry = new Function("return (" + registryBody + ")")();
|
||||
const clipDuration = 11;
|
||||
|
||||
const css = String.raw`* {
|
||||
box-sizing: border-box;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.vscode-theme-scene {
|
||||
--activity-bg: #181818;
|
||||
--activity-fg: #d7d7d7;
|
||||
--activity-muted: #868686;
|
||||
--activity-active: #0078d4;
|
||||
--sidebar-bg: #181818;
|
||||
--sidebar-fg: #cccccc;
|
||||
--sidebar-border: #2b2b2b;
|
||||
--tab-bg: #181818;
|
||||
--tab-active-bg: #1f1f1f;
|
||||
--tab-active-fg: #ffffff;
|
||||
--tab-inactive-fg: #9d9d9d;
|
||||
--tab-border: #2b2b2b;
|
||||
--editor-bg: #1f1f1f;
|
||||
--editor-fg: #cccccc;
|
||||
--editor-line: rgba(255, 255, 255, 0.04);
|
||||
--gutter-fg: #6e7681;
|
||||
--gutter-active-fg: #cccccc;
|
||||
--panel-bg: #181818;
|
||||
--panel-border: #2b2b2b;
|
||||
--status-bg: #181818;
|
||||
--status-fg: #cccccc;
|
||||
--status-border: #2b2b2b;
|
||||
--title-bg: #181818;
|
||||
--title-fg: #cccccc;
|
||||
--token-comment: #6a9955;
|
||||
--token-keyword: #c586c0;
|
||||
--token-function: #dcdcaa;
|
||||
--token-string: #ce9178;
|
||||
--token-number: #b5cea8;
|
||||
--token-variable: #9cdcfe;
|
||||
--token-parameter: #9cdcfe;
|
||||
--token-operator: #d4d4d4;
|
||||
--token-punctuation: #d4d4d4;
|
||||
--token-class-name: #4ec9b0;
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
|
||||
url("../assets/background.jpeg") center / cover no-repeat;
|
||||
color: var(--editor-fg);
|
||||
}
|
||||
|
||||
.scene-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 54px 70px 92px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
perspective: 2200px;
|
||||
perspective-origin: 56% 52%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
min-height: 66px;
|
||||
text-shadow:
|
||||
0 2px 12px rgba(0, 0, 0, 0.42),
|
||||
0 14px 34px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.kicker {
|
||||
margin: 0 0 7px;
|
||||
color: var(--gutter-fg);
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.48),
|
||||
0 10px 26px rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: var(--editor-fg);
|
||||
font-size: 44px;
|
||||
line-height: 1;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.source-note {
|
||||
width: 510px;
|
||||
color: var(--gutter-fg);
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
text-align: right;
|
||||
text-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.46),
|
||||
0 12px 30px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.workbench {
|
||||
height: 824px;
|
||||
display: grid;
|
||||
grid-template-columns: 54px 290px 1fr;
|
||||
grid-template-rows: 36px 1fr 26px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--sidebar-border);
|
||||
border-radius: 8px;
|
||||
background: var(--editor-bg);
|
||||
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
|
||||
transform: translateZ(0);
|
||||
transform-origin: 82% 50%;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 210px;
|
||||
align-items: center;
|
||||
background: var(--title-bg);
|
||||
color: var(--title-fg);
|
||||
border-bottom: 1px solid var(--tab-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.traffic {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.traffic span {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.traffic span:nth-child(1) { background: #ff5f57; }
|
||||
.traffic span:nth-child(2) { background: #ffbd2e; }
|
||||
.traffic span:nth-child(3) { background: #28c840; }
|
||||
|
||||
.window-title {
|
||||
justify-self: center;
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
.command-center {
|
||||
justify-self: end;
|
||||
width: 176px;
|
||||
height: 22px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
|
||||
border-radius: 5px;
|
||||
color: color-mix(in srgb, var(--title-fg), transparent 18%);
|
||||
}
|
||||
|
||||
.activity {
|
||||
grid-row: 2 / 3;
|
||||
background: var(--activity-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--activity-muted);
|
||||
}
|
||||
|
||||
.activity-icon.active {
|
||||
color: var(--activity-fg);
|
||||
border-left: 2px solid var(--activity-active);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-row: 2 / 3;
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--sidebar-fg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: var(--sidebar-fg);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px;
|
||||
background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
border-bottom: 1px solid var(--sidebar-border);
|
||||
color: var(--sidebar-fg);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tree {
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.tree-row {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 10px 0 18px;
|
||||
color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tree-row.child {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.tree-row.selected {
|
||||
background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
|
||||
.editor-area {
|
||||
grid-row: 2 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: 36px 30px 1fr 138px;
|
||||
min-width: 0;
|
||||
background: var(--editor-bg);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: var(--tab-bg);
|
||||
border-bottom: 1px solid var(--tab-border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 205px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 13px;
|
||||
border-right: 1px solid var(--tab-border);
|
||||
background: var(--tab-active-bg);
|
||||
color: var(--tab-active-fg);
|
||||
border-top: 2px solid var(--activity-active);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
background: var(--tab-bg);
|
||||
color: var(--tab-inactive-fg);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 18px;
|
||||
color: var(--gutter-fg);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--editor-bg);
|
||||
color: var(--editor-fg);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1.52;
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 28px;
|
||||
background: var(--editor-line);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.code {
|
||||
position: relative;
|
||||
padding: 20px 36px 18px 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
padding-right: 18px;
|
||||
color: var(--gutter-fg);
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line.is-active .line-number {
|
||||
color: var(--gutter-active-fg);
|
||||
}
|
||||
|
||||
.line-code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.char {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tok-comment { color: var(--token-comment); }
|
||||
.tok-keyword { color: var(--token-keyword); }
|
||||
.tok-function { color: var(--token-function); }
|
||||
.tok-string { color: var(--token-string); }
|
||||
.tok-number { color: var(--token-number); }
|
||||
.tok-variable { color: var(--token-variable); }
|
||||
.tok-parameter { color: var(--token-parameter); }
|
||||
.tok-operator { color: var(--token-operator); }
|
||||
.tok-punctuation { color: var(--token-punctuation); }
|
||||
.tok-class-name { color: var(--token-class-name); }
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 22px;
|
||||
background: var(--editor-fg);
|
||||
pointer-events: none;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
display: grid;
|
||||
grid-template-rows: 32px 1fr;
|
||||
background: var(--panel-bg);
|
||||
border-top: 1px solid var(--panel-border);
|
||||
color: var(--editor-fg);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
color: var(--gutter-fg);
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-tabs .active {
|
||||
color: var(--editor-fg);
|
||||
border-bottom: 1px solid var(--activity-active);
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-body {
|
||||
padding: 12px 20px;
|
||||
color: var(--editor-fg);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--token-function);
|
||||
}
|
||||
|
||||
.statusbar {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--status-bg);
|
||||
color: var(--status-fg);
|
||||
border-top: 1px solid var(--status-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-left,
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.remote {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin-left: -12px;
|
||||
background: var(--status-remote-bg, var(--activity-active));
|
||||
color: var(--status-remote-fg, #ffffff);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const runtime = String.raw`(() => {
|
||||
const codeLines = [
|
||||
[{ text: "# A small functional toolkit", token: "comment" }],
|
||||
[{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "pluck_deep", token: "function" }, { text: "(", token: "punctuation" }, { text: "key", token: "parameter" }, { text: "):", token: "punctuation" }],
|
||||
[{ text: " ", token: "plain" }, { text: "return", token: "keyword" }, { text: " ", token: "plain" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "obj", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "reduce", token: "function" }, { text: "(", token: "punctuation" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "k", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "acc", token: "variable" }, { text: "[", token: "punctuation" }, { text: "k", token: "variable" }, { text: "]", token: "punctuation" }, { text: ", ", token: "punctuation" }, { text: "key", token: "variable" }, { text: ".split", token: "function" }, { text: "(", token: "punctuation" }, { text: "'.'", token: "string" }, { text: "), ", token: "punctuation" }, { text: "obj", token: "variable" }, { text: ")", token: "punctuation" }],
|
||||
[],
|
||||
[{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "compose", token: "function" }, { text: "(", token: "punctuation" }, { text: "*", token: "operator" }, { text: "fns", token: "parameter" }, { text: "):", token: "punctuation" }],
|
||||
[{ text: " ", token: "plain" }, { text: "return", token: "keyword" }, { text: " ", token: "plain" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "res", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "reduce", token: "function" }, { text: "(", token: "punctuation" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "fn", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "fn", token: "function" }, { text: "(", token: "punctuation" }, { text: "acc", token: "variable" }, { text: "), ", token: "punctuation" }, { text: "fns", token: "variable" }, { text: ", ", token: "punctuation" }, { text: "res", token: "variable" }, { text: ")", token: "punctuation" }],
|
||||
[],
|
||||
[{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "unfold", token: "function" }, { text: "(", token: "punctuation" }, { text: "f", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "seed", token: "parameter" }, { text: "):", token: "punctuation" }],
|
||||
[{ text: " ", token: "plain" }, { text: "\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"", token: "string" }],
|
||||
[{ text: " acc", token: "variable" }, { text: " = ", token: "operator" }, { text: "[]", token: "punctuation" }],
|
||||
[{ text: " while", token: "keyword" }, { text: " ", token: "plain" }, { text: "True", token: "className" }, { text: ":", token: "punctuation" }],
|
||||
[{ text: " result", token: "variable" }, { text: " = ", token: "operator" }, { text: "f", token: "function" }, { text: "(", token: "punctuation" }, { text: "seed", token: "variable" }, { text: ")", token: "punctuation" }],
|
||||
[{ text: " if", token: "keyword" }, { text: " ", token: "plain" }, { text: "result", token: "variable" }, { text: " is ", token: "keyword" }, { text: "None", token: "className" }, { text: ":", token: "punctuation" }],
|
||||
[{ text: " return", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "variable" }],
|
||||
[{ text: " acc", token: "variable" }, { text: ".append", token: "function" }, { text: "(", token: "punctuation" }, { text: "result", token: "variable" }, { text: "[", token: "punctuation" }, { text: "0", token: "number" }, { text: "])", token: "punctuation" }],
|
||||
[{ text: " seed", token: "variable" }, { text: " = ", token: "operator" }, { text: "result", token: "variable" }, { text: "[", token: "punctuation" }, { text: "1", token: "number" }, { text: "]", token: "punctuation" }],
|
||||
[],
|
||||
];
|
||||
|
||||
const fallback = {
|
||||
"activityBar.background": "#181818",
|
||||
"activityBar.foreground": "#d7d7d7",
|
||||
"activityBar.inactiveForeground": "#868686",
|
||||
"activityBar.activeBorder": "#0078d4",
|
||||
"sideBar.background": "#181818",
|
||||
"sideBar.foreground": "#cccccc",
|
||||
"sideBar.border": "#2b2b2b",
|
||||
"tab.activeBackground": "#1f1f1f",
|
||||
"tab.activeForeground": "#ffffff",
|
||||
"tab.inactiveBackground": "#181818",
|
||||
"tab.inactiveForeground": "#9d9d9d",
|
||||
"tab.border": "#2b2b2b",
|
||||
"editor.background": "#1f1f1f",
|
||||
"editor.foreground": "#cccccc",
|
||||
"editor.lineHighlightBackground": "#ffffff0a",
|
||||
"editorLineNumber.foreground": "#6e7681",
|
||||
"editorLineNumber.activeForeground": "#cccccc",
|
||||
"panel.background": "#181818",
|
||||
"panel.border": "#2b2b2b",
|
||||
"statusBar.background": "#181818",
|
||||
"statusBar.foreground": "#cccccc",
|
||||
"statusBar.border": "#2b2b2b",
|
||||
"titleBar.activeBackground": "#181818",
|
||||
"titleBar.activeForeground": "#cccccc",
|
||||
};
|
||||
|
||||
function color(theme, key) {
|
||||
return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
|
||||
}
|
||||
|
||||
function solarizedGrey(theme) {
|
||||
return theme.colors["tab.inactiveForeground"] || theme.colors["editor.foreground"] || "#586E75";
|
||||
}
|
||||
|
||||
function setVar(root, name, value) {
|
||||
root.style.setProperty(name, value);
|
||||
}
|
||||
|
||||
function applyTheme(root, theme) {
|
||||
const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
|
||||
setVar(root, "--activity-bg", color(theme, "activityBar.background"));
|
||||
setVar(root, "--activity-fg", solarizedUiGrey || color(theme, "activityBar.foreground"));
|
||||
setVar(root, "--activity-muted", solarizedUiGrey || color(theme, "activityBar.inactiveForeground"));
|
||||
setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
|
||||
setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
|
||||
setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
|
||||
setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
|
||||
setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
|
||||
setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
|
||||
setVar(root, "--tab-active-fg", solarizedUiGrey || color(theme, "tab.activeForeground"));
|
||||
setVar(root, "--tab-inactive-fg", solarizedUiGrey || color(theme, "tab.inactiveForeground"));
|
||||
setVar(root, "--tab-border", color(theme, "tab.border"));
|
||||
setVar(root, "--editor-bg", color(theme, "editor.background"));
|
||||
setVar(root, "--editor-fg", color(theme, "editor.foreground"));
|
||||
setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
|
||||
setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
|
||||
setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
|
||||
setVar(root, "--panel-bg", color(theme, "panel.background"));
|
||||
setVar(root, "--panel-border", color(theme, "panel.border"));
|
||||
setVar(root, "--status-bg", color(theme, "statusBar.background"));
|
||||
setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
|
||||
setVar(root, "--status-border", color(theme, "statusBar.border"));
|
||||
setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
|
||||
setVar(root, "--status-remote-fg", solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"));
|
||||
setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
|
||||
setVar(root, "--title-fg", solarizedUiGrey || color(theme, "titleBar.activeForeground"));
|
||||
setVar(root, "--token-comment", theme.tokens.comment);
|
||||
setVar(root, "--token-keyword", theme.tokens.keyword);
|
||||
setVar(root, "--token-function", theme.tokens.function);
|
||||
setVar(root, "--token-string", theme.tokens.string);
|
||||
setVar(root, "--token-number", theme.tokens.number);
|
||||
setVar(root, "--token-variable", theme.tokens.variable);
|
||||
setVar(root, "--token-parameter", theme.tokens.parameter);
|
||||
setVar(root, "--token-operator", theme.tokens.operator);
|
||||
setVar(root, "--token-punctuation", theme.tokens.punctuation);
|
||||
setVar(root, "--token-class-name", theme.tokens.className);
|
||||
}
|
||||
|
||||
function renderCode(root) {
|
||||
const code = root.querySelector(".code");
|
||||
codeLines.forEach((segments, index) => {
|
||||
const line = document.createElement("div");
|
||||
line.className = "line";
|
||||
line.dataset.lineIndex = String(index);
|
||||
|
||||
const lineNumber = document.createElement("span");
|
||||
lineNumber.className = "line-number";
|
||||
lineNumber.textContent = String(index + 1);
|
||||
line.appendChild(lineNumber);
|
||||
|
||||
const lineCode = document.createElement("span");
|
||||
lineCode.className = "line-code";
|
||||
segments.forEach((segment) => {
|
||||
[...segment.text].forEach((char) => {
|
||||
const span = document.createElement("span");
|
||||
span.className = segment.token === "plain" ? "char" : "char tok-" + segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
|
||||
span.dataset.lineIndex = String(index);
|
||||
span.textContent = char;
|
||||
lineCode.appendChild(span);
|
||||
});
|
||||
});
|
||||
line.appendChild(lineCode);
|
||||
code.appendChild(line);
|
||||
});
|
||||
|
||||
const caret = document.createElement("span");
|
||||
caret.className = "caret";
|
||||
root.querySelector(".editor").appendChild(caret);
|
||||
}
|
||||
|
||||
function caretPointForElement(editor, el) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const charBox = el.getBoundingClientRect();
|
||||
return {
|
||||
x: charBox.right - editorBox.left + 2,
|
||||
y: charBox.top - editorBox.top + 3,
|
||||
};
|
||||
}
|
||||
|
||||
function caretPointForLineStart(editor, line) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const lineBox = line.getBoundingClientRect();
|
||||
const codeBox = line.querySelector(".line-code").getBoundingClientRect();
|
||||
return {
|
||||
x: codeBox.left - editorBox.left,
|
||||
y: lineBox.top - editorBox.top + 3,
|
||||
};
|
||||
}
|
||||
|
||||
function lineHighlightY(editor, line) {
|
||||
const editorBox = editor.getBoundingClientRect();
|
||||
const lineBox = line.getBoundingClientRect();
|
||||
return lineBox.top - editorBox.top;
|
||||
}
|
||||
|
||||
function buildTimeline(root, compositionId) {
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const editor = root.querySelector(".editor");
|
||||
const caret = root.querySelector(".caret");
|
||||
const activeLine = root.querySelector(".active-line");
|
||||
const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
|
||||
const lineStartTimes = [];
|
||||
const charSchedule = [];
|
||||
let cursorTime = 0.95;
|
||||
|
||||
lineEls.forEach((line, lineIndex) => {
|
||||
const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
|
||||
lineStartTimes[lineIndex] = cursorTime;
|
||||
lineChars.forEach((char, charIndex) => {
|
||||
charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
|
||||
});
|
||||
cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
|
||||
});
|
||||
|
||||
gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
|
||||
gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
|
||||
|
||||
tl.from(root.querySelector(".header"), { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" }, 0);
|
||||
tl.from(root.querySelector(".workbench"), { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" }, 0.1);
|
||||
tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
|
||||
lineStartTimes.forEach((time, lineIndex) => {
|
||||
const line = lineEls[lineIndex];
|
||||
tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
|
||||
tl.set(caret, caretPointForLineStart(editor, line), time);
|
||||
tl.call(() => {
|
||||
lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
|
||||
}, [], time);
|
||||
});
|
||||
charSchedule.forEach(({ char, time }) => {
|
||||
tl.set(char, { opacity: 1 }, time);
|
||||
tl.set(caret, caretPointForElement(editor, char), time + 0.002);
|
||||
});
|
||||
tl.to(root.querySelector(".caret"), { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" }, 0.95);
|
||||
tl.from(root.querySelector(".terminal"), { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" }, 7.55);
|
||||
tl.from(root.querySelector(".terminal-body").children, { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" }, 8.05);
|
||||
tl.to(root.querySelector(".workbench"), { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" }, 9.35);
|
||||
tl.to(root.querySelector(".workbench"), { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" }, 10.08);
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines[compositionId] = tl;
|
||||
|
||||
const previewTime = new URLSearchParams(window.location.search).get("t");
|
||||
if (previewTime !== null) {
|
||||
tl.time(Number(previewTime));
|
||||
}
|
||||
}
|
||||
|
||||
window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
|
||||
const root =
|
||||
document.querySelector('[data-composition-id="' + compositionId + '"] .vscode-theme-scene') ||
|
||||
document.querySelector('.vscode-theme-scene[data-composition-id="' + compositionId + '"]') ||
|
||||
document.querySelector('[data-composition-id="' + compositionId + '"]');
|
||||
const theme = typeof themeOrId === "string"
|
||||
? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
|
||||
: themeOrId;
|
||||
if (!root || !theme) return;
|
||||
root.querySelector(".theme-label").textContent = theme.label;
|
||||
root.querySelector(".theme-source").textContent = theme.sourceFile;
|
||||
applyTheme(root, theme);
|
||||
renderCode(root);
|
||||
buildTimeline(root, compositionId);
|
||||
};
|
||||
})();
|
||||
`;
|
||||
|
||||
function compositionMarkup(compositionId, theme) {
|
||||
return `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>${theme.label} VS Code Theme Composition</title>
|
||||
</head>
|
||||
<body>
|
||||
<template id="${compositionId}-template">
|
||||
<div class="vscode-theme-scene" data-composition-id="${compositionId}" data-width="1920" data-height="1080">
|
||||
<main class="scene-content">
|
||||
<section class="header">
|
||||
<div>
|
||||
<p class="kicker">Official VS Code built-in theme</p>
|
||||
<h1 class="title"><span class="theme-label">${theme.label}</span></h1>
|
||||
</div>
|
||||
<p class="source-note">
|
||||
Typing \`functional_toolkit.py\` with workbench colors from
|
||||
<span class="theme-source">${theme.sourceFile}</span>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
${workbenchMarkup()}
|
||||
</main>
|
||||
<style>
|
||||
${css}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
${runtime}
|
||||
</script>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["${compositionId}"] = window.__timelines["${compositionId}"] || gsap.timeline({ paused: true });
|
||||
window.createVSCodeThemeComposition("${compositionId}", ${JSON.stringify(theme)});
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
function workbenchMarkup() {
|
||||
return `<section class="workbench">
|
||||
<div class="titlebar">
|
||||
<div class="traffic"><span></span><span></span><span></span></div>
|
||||
<div class="window-title">functional-toolkit - Visual Studio Code</div>
|
||||
<div class="command-center">Search</div>
|
||||
</div>
|
||||
|
||||
<aside class="activity" aria-label="Activity bar">
|
||||
<svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z" /></svg>
|
||||
<svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" /></svg>
|
||||
<svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="M8 18 3 12l5-6m8 12 5-6-5-6" /></svg>
|
||||
<svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6" /></svg>
|
||||
</aside>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-title">Explorer</div>
|
||||
<div class="section-title">⌄ Functional Toolkit</div>
|
||||
<div class="tree">
|
||||
<div class="tree-row">⌄ src</div>
|
||||
<div class="tree-row child selected">◇ functional_toolkit.py</div>
|
||||
<div class="tree-row child">◇ test_toolkit.py</div>
|
||||
<div class="tree-row">◇ pyproject.toml</div>
|
||||
<div class="tree-row">◇ README.md</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="editor-area">
|
||||
<div class="tabs">
|
||||
<div class="tab">◇ functional_toolkit.py</div>
|
||||
<div class="tab inactive">README.md</div>
|
||||
</div>
|
||||
<div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
|
||||
<div class="editor">
|
||||
<div class="active-line"></div>
|
||||
<div class="code"></div>
|
||||
</div>
|
||||
<div class="terminal">
|
||||
<div class="panel-tabs"><span class="active">Terminal</span><span>Problems</span><span>Output</span></div>
|
||||
<div class="terminal-body">
|
||||
<div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
|
||||
<div>collected 3 items</div>
|
||||
<div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="statusbar">
|
||||
<div class="status-left">
|
||||
<span class="remote">main</span>
|
||||
<span>0 errors</span>
|
||||
<span>0 warnings</span>
|
||||
</div>
|
||||
<div class="status-right">
|
||||
<span>Ln 17, Col 1</span>
|
||||
<span>Spaces: 4</span>
|
||||
<span>UTF-8</span>
|
||||
<span>Python 3.12</span>
|
||||
</div>
|
||||
</footer>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function rootIndexMarkup() {
|
||||
const clips = registry
|
||||
.map((theme, index) => {
|
||||
const compositionId = `vscode-${theme.id}`;
|
||||
return ` <div
|
||||
id="clip-${theme.id}"
|
||||
data-composition-id="${compositionId}"
|
||||
data-composition-src="compositions/${theme.id}.html"
|
||||
data-start="${index * clipDuration}"
|
||||
data-duration="${clipDuration}"
|
||||
data-track-index="1"
|
||||
></div>`;
|
||||
})
|
||||
.join("\n");
|
||||
|
||||
return `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>VS Code Theme Sequence</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#vscode-theme-sequence {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vscode-theme-sequence" data-composition-id="vscode-theme-sequence" data-start="0" data-width="1920" data-height="1080">
|
||||
${clips}
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["vscode-theme-sequence"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderEntryMarkup(theme) {
|
||||
const compositionId = `vscode-${theme.id}`;
|
||||
return `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>${theme.label} Render Entry</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
#render-${theme.id} {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="render-${theme.id}" data-composition-id="render-${theme.id}" data-start="0" data-duration="${clipDuration}" data-width="1920" data-height="1080">
|
||||
<div
|
||||
id="clip-${theme.id}"
|
||||
data-composition-id="${compositionId}"
|
||||
data-composition-src="../compositions/${theme.id}.html"
|
||||
data-start="0"
|
||||
data-duration="${clipDuration}"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["render-${theme.id}"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
fs.writeFileSync(path.join(assetsDir, "vscode-sequence.css"), css);
|
||||
fs.writeFileSync(path.join(assetsDir, "vscode-sequence-runtime.js"), runtime);
|
||||
|
||||
for (const theme of registry) {
|
||||
const compositionId = `vscode-${theme.id}`;
|
||||
fs.writeFileSync(
|
||||
path.join(compositionsDir, `${theme.id}.html`),
|
||||
compositionMarkup(compositionId, theme),
|
||||
);
|
||||
fs.writeFileSync(path.join(renderEntriesDir, `${theme.id}.html`), renderEntryMarkup(theme));
|
||||
|
||||
const blockName = `code-snippet-${theme.id}`;
|
||||
const blockDir = path.join(blocksDir, blockName);
|
||||
fs.mkdirSync(blockDir, { recursive: true });
|
||||
fs.writeFileSync(
|
||||
path.join(blockDir, `${blockName}.html`),
|
||||
compositionMarkup(compositionId, theme),
|
||||
);
|
||||
}
|
||||
|
||||
fs.writeFileSync(path.join(projectRoot, "index.html"), rootIndexMarkup());
|
||||
|
||||
console.log(
|
||||
`Wrote ${registry.length} themed compositions, render entries, block HTMLs, and root sequence`,
|
||||
);
|
||||
@@ -0,0 +1,237 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const projectRoot = path.resolve(__dirname, "..");
|
||||
const themeDir = path.join(projectRoot, "assets", "vscode-themes");
|
||||
const outFile = path.join(projectRoot, "assets", "vscode-theme-registry.js");
|
||||
|
||||
const themeEntries = [
|
||||
["light-2026", "Light 2026", "2026-light.json"],
|
||||
["dark-2026", "Dark 2026", "2026-dark.json"],
|
||||
["dark-plus", "Dark+", "dark_plus.json"],
|
||||
["dark-modern", "Dark Modern", "dark_modern.json"],
|
||||
["light-plus", "Light+", "light_plus.json"],
|
||||
["light-modern", "Light Modern", "light_modern.json"],
|
||||
["visual-studio-dark", "Visual Studio Dark", "dark_vs.json"],
|
||||
["visual-studio-light", "Visual Studio Light", "light_vs.json"],
|
||||
["high-contrast", "Default High Contrast", "hc_black.json"],
|
||||
["high-contrast-light", "Default High Contrast Light", "hc_light.json"],
|
||||
["solarized-light", "Solarized Light", "solarized-light-color-theme.json"],
|
||||
["monokai", "Monokai", "monokai-color-theme.json"],
|
||||
];
|
||||
|
||||
const workbenchKeys = [
|
||||
"activityBar.activeBorder",
|
||||
"activityBar.background",
|
||||
"activityBar.border",
|
||||
"activityBar.foreground",
|
||||
"activityBar.inactiveForeground",
|
||||
"editor.background",
|
||||
"editor.foreground",
|
||||
"editor.lineHighlightBackground",
|
||||
"editor.selectionBackground",
|
||||
"editorGroup.border",
|
||||
"editorGroupHeader.tabsBackground",
|
||||
"editorGroupHeader.tabsBorder",
|
||||
"editorLineNumber.activeForeground",
|
||||
"editorLineNumber.foreground",
|
||||
"foreground",
|
||||
"icon.foreground",
|
||||
"panel.background",
|
||||
"panel.border",
|
||||
"sideBar.background",
|
||||
"sideBar.border",
|
||||
"sideBar.foreground",
|
||||
"sideBarSectionHeader.background",
|
||||
"sideBarSectionHeader.border",
|
||||
"sideBarSectionHeader.foreground",
|
||||
"sideBarTitle.foreground",
|
||||
"statusBar.background",
|
||||
"statusBar.border",
|
||||
"statusBar.foreground",
|
||||
"statusBarItem.remoteBackground",
|
||||
"statusBarItem.remoteForeground",
|
||||
"tab.activeBackground",
|
||||
"tab.activeBorder",
|
||||
"tab.activeBorderTop",
|
||||
"tab.activeForeground",
|
||||
"tab.border",
|
||||
"tab.inactiveBackground",
|
||||
"tab.inactiveForeground",
|
||||
"terminal.background",
|
||||
"terminal.foreground",
|
||||
"terminalCursor.foreground",
|
||||
"titleBar.activeBackground",
|
||||
"titleBar.activeForeground",
|
||||
];
|
||||
|
||||
const tokenScopes = {
|
||||
comment: ["comment", "punctuation.definition.comment"],
|
||||
keyword: ["keyword", "storage", "storage.type"],
|
||||
function: ["entity.name.function", "support.function"],
|
||||
string: ["string", "punctuation.definition.string"],
|
||||
number: ["constant.numeric"],
|
||||
variable: ["variable", "variable.other"],
|
||||
parameter: ["variable.parameter", "meta.function.parameters"],
|
||||
operator: ["keyword.operator"],
|
||||
punctuation: ["punctuation", "meta.brace"],
|
||||
className: ["entity.name.type", "support.class", "support.type"],
|
||||
};
|
||||
|
||||
const fallbackColors = {
|
||||
comment: "#6A9955",
|
||||
keyword: "#C586C0",
|
||||
function: "#DCDCAA",
|
||||
string: "#CE9178",
|
||||
number: "#B5CEA8",
|
||||
variable: "#9CDCFE",
|
||||
parameter: "#9CDCFE",
|
||||
operator: "#D4D4D4",
|
||||
punctuation: "#D4D4D4",
|
||||
className: "#4EC9B0",
|
||||
};
|
||||
|
||||
function stripJsonComments(source) {
|
||||
let output = "";
|
||||
let inString = false;
|
||||
let escaped = false;
|
||||
for (let i = 0; i < source.length; i += 1) {
|
||||
const char = source[i];
|
||||
const next = source[i + 1];
|
||||
if (inString) {
|
||||
output += char;
|
||||
escaped = char === "\\" && !escaped;
|
||||
if (char === '"' && !escaped) inString = false;
|
||||
if (char !== "\\") escaped = false;
|
||||
continue;
|
||||
}
|
||||
if (char === '"') {
|
||||
inString = true;
|
||||
output += char;
|
||||
continue;
|
||||
}
|
||||
if (char === "/" && next === "/") {
|
||||
while (i < source.length && source[i] !== "\n") i += 1;
|
||||
output += "\n";
|
||||
continue;
|
||||
}
|
||||
if (char === "/" && next === "*") {
|
||||
i += 2;
|
||||
while (i < source.length && !(source[i] === "*" && source[i + 1] === "/")) i += 1;
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
output += char;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function stripTrailingCommas(source) {
|
||||
let output = "";
|
||||
let inString = false;
|
||||
let escaped = false;
|
||||
for (let i = 0; i < source.length; i += 1) {
|
||||
const char = source[i];
|
||||
if (inString) {
|
||||
output += char;
|
||||
escaped = char === "\\" && !escaped;
|
||||
if (char === '"' && !escaped) inString = false;
|
||||
if (char !== "\\") escaped = false;
|
||||
continue;
|
||||
}
|
||||
if (char === '"') {
|
||||
inString = true;
|
||||
output += char;
|
||||
continue;
|
||||
}
|
||||
if (char === ",") {
|
||||
let j = i + 1;
|
||||
while (/\s/.test(source[j])) j += 1;
|
||||
if (source[j] === "}" || source[j] === "]") continue;
|
||||
}
|
||||
output += char;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
function readTheme(fileName, seen = new Set()) {
|
||||
const filePath = path.join(themeDir, fileName);
|
||||
if (seen.has(filePath)) throw new Error(`Circular theme include: ${fileName}`);
|
||||
seen.add(filePath);
|
||||
|
||||
const raw = fs.readFileSync(filePath, "utf8");
|
||||
const theme = JSON.parse(stripTrailingCommas(stripJsonComments(raw)));
|
||||
let parent = { colors: {}, tokenColors: [], semanticTokenColors: {} };
|
||||
|
||||
if (theme.include) {
|
||||
parent = readTheme(path.basename(theme.include), seen);
|
||||
}
|
||||
|
||||
return {
|
||||
name: theme.name || parent.name,
|
||||
type: theme.type || parent.type,
|
||||
colors: { ...parent.colors, ...(theme.colors || {}) },
|
||||
tokenColors: [...(parent.tokenColors || []), ...(theme.tokenColors || [])],
|
||||
semanticTokenColors: {
|
||||
...(parent.semanticTokenColors || {}),
|
||||
...(theme.semanticTokenColors || {}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function scopeList(scope) {
|
||||
if (!scope) return [];
|
||||
if (Array.isArray(scope)) return scope;
|
||||
return String(scope)
|
||||
.split(",")
|
||||
.map((item) => item.trim());
|
||||
}
|
||||
|
||||
function scopeMatches(actual, wanted) {
|
||||
return actual === wanted || actual.startsWith(`${wanted}.`) || wanted.startsWith(`${actual}.`);
|
||||
}
|
||||
|
||||
function findTokenColor(theme, wantedScopes) {
|
||||
for (let i = theme.tokenColors.length - 1; i >= 0; i -= 1) {
|
||||
const tokenColor = theme.tokenColors[i];
|
||||
const foreground = tokenColor.settings?.foreground;
|
||||
if (!foreground) continue;
|
||||
const scopes = scopeList(tokenColor.scope);
|
||||
if (scopes.some((scope) => wantedScopes.some((wanted) => scopeMatches(scope, wanted)))) {
|
||||
return foreground;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function pickColors(colors) {
|
||||
const picked = {};
|
||||
for (const key of workbenchKeys) {
|
||||
if (colors[key]) picked[key] = colors[key];
|
||||
}
|
||||
return picked;
|
||||
}
|
||||
|
||||
const registry = themeEntries.map(([id, label, file]) => {
|
||||
const theme = readTheme(file);
|
||||
const tokens = {};
|
||||
for (const [tokenName, scopes] of Object.entries(tokenScopes)) {
|
||||
tokens[tokenName] = findTokenColor(theme, scopes) || fallbackColors[tokenName];
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
label,
|
||||
sourceFile: file,
|
||||
uiTheme: file.includes("light") || file.includes("2026-light") ? "vs" : "vs-dark",
|
||||
colors: pickColors(theme.colors),
|
||||
tokens,
|
||||
};
|
||||
});
|
||||
|
||||
const generated = `// Generated by scripts/build-theme-registry.mjs from official VS Code theme JSON.\nwindow.VSCODE_THEME_REGISTRY = ${JSON.stringify(registry, null, 2)};\n`;
|
||||
|
||||
fs.writeFileSync(outFile, generated);
|
||||
console.log(`Wrote ${path.relative(projectRoot, outFile)} with ${registry.length} themes`);
|
||||
+271
@@ -0,0 +1,271 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Warm Grain - Hyperframes</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f0e0; /* Cream background */
|
||||
font-family: "Outfit", sans-serif;
|
||||
}
|
||||
|
||||
#main-composition {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Paper texture and Grain overlay */
|
||||
#grain-overlay-comp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Grain animation */
|
||||
@keyframes grain-noise {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-5%, -5%);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-10%, 5%);
|
||||
}
|
||||
30% {
|
||||
transform: translate(5%, -10%);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-5%, 15%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-10%, 5%);
|
||||
}
|
||||
60% {
|
||||
transform: translate(15%, 0);
|
||||
}
|
||||
70% {
|
||||
transform: translate(0, 10%);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-15%, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate(10%, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.grain-texture {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: url("https://www.transparenttextures.com/patterns/natural-paper.png");
|
||||
opacity: 0.15;
|
||||
animation: grain-noise 0.5s steps(1) infinite;
|
||||
}
|
||||
|
||||
#a-roll {
|
||||
position: absolute;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comp-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="main-composition"
|
||||
data-composition-id="main-video"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
>
|
||||
<!-- Background Layer -->
|
||||
<div
|
||||
id="grain-overlay-comp"
|
||||
data-composition-id="grain-overlay"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="100"
|
||||
>
|
||||
<div class="grain-texture"></div>
|
||||
<script>
|
||||
const grainTl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["grain-overlay"] = grainTl;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- A-Roll Video (muted — audio is separate) -->
|
||||
<video
|
||||
id="a-roll"
|
||||
src="__VIDEO_SRC__"
|
||||
muted
|
||||
playsinline
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="0"
|
||||
></video>
|
||||
<audio
|
||||
id="a-roll-audio"
|
||||
src="__VIDEO_SRC__"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="5"
|
||||
data-volume="1"
|
||||
></audio>
|
||||
|
||||
<!-- Compositions -->
|
||||
<div
|
||||
id="intro-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="intro"
|
||||
data-composition-src="compositions/intro.html"
|
||||
data-start="0"
|
||||
data-duration="2.5"
|
||||
data-track-index="1"
|
||||
></div>
|
||||
|
||||
<div
|
||||
id="graphics-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="graphics"
|
||||
data-composition-src="compositions/graphics.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="2"
|
||||
></div>
|
||||
|
||||
<div
|
||||
id="captions-layer"
|
||||
class="comp-layer"
|
||||
data-composition-id="captions"
|
||||
data-composition-src="compositions/captions.html"
|
||||
data-start="0"
|
||||
data-duration="__VIDEO_DURATION__"
|
||||
data-track-index="3"
|
||||
></div>
|
||||
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// A-Roll Framing Strategy
|
||||
// 1. 0s-1.8s: Intro scale up from small (60%) to medium (80%) - Shifted right slightly to clear speaker card
|
||||
// 2. 1.8s-4.6s: Grid view / Shift Left (x: 600, scale: 70%) for 47% graphic
|
||||
// 3. 4.6s-8.8s: Shift Center-Bottom (y: 800, scale: 70%) for 62% graphic (top)
|
||||
// 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
|
||||
// 5. 14s-17s: Final Reveal (Center, scale: 100%)
|
||||
|
||||
// Initial state
|
||||
gsap.set("#a-roll", {
|
||||
x: 1100,
|
||||
y: 540,
|
||||
xPercent: -50,
|
||||
yPercent: -50,
|
||||
width: 1920 * 0.6,
|
||||
height: 1080 * 0.6,
|
||||
});
|
||||
|
||||
// 1. Intro Scale Up (0s - 1.8s)
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 1200,
|
||||
width: 1920 * 0.8,
|
||||
height: 1080 * 0.8,
|
||||
duration: 1.8,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
// 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 600,
|
||||
y: 540,
|
||||
width: 1920 * 0.7,
|
||||
height: 1080 * 0.7,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
1.8,
|
||||
);
|
||||
|
||||
// 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 960,
|
||||
y: 750,
|
||||
width: 1920 * 0.7,
|
||||
height: 1080 * 0.7,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
4.6,
|
||||
);
|
||||
|
||||
// 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 1320,
|
||||
y: 540,
|
||||
width: 1920 * 0.75,
|
||||
height: 1080 * 0.75,
|
||||
duration: 0.5,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
8.8,
|
||||
);
|
||||
|
||||
// 5. Final Reveal (14s - 17s)
|
||||
tl.to(
|
||||
"#a-roll",
|
||||
{
|
||||
x: 960,
|
||||
y: 540,
|
||||
width: 1920 * 1.0,
|
||||
height: 1080 * 1.0,
|
||||
duration: 1.0,
|
||||
ease: "power2.inOut",
|
||||
},
|
||||
14,
|
||||
);
|
||||
|
||||
window.__timelines["main-video"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "warm-grain",
|
||||
"type": "hyperframes:example",
|
||||
"title": "Warm Grain",
|
||||
"description": "Cream aesthetic with grain texture",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 10,
|
||||
"files": [
|
||||
{
|
||||
"path": "compositions/captions.html",
|
||||
"target": "compositions/captions.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/graphics.html",
|
||||
"target": "compositions/graphics.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "compositions/intro.html",
|
||||
"target": "compositions/intro.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "index.html",
|
||||
"target": "index.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user