192 lines
14 KiB
HTML
192 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
<template id="__bundler_thumbnail" data-bg-color="#2c2c30">
|
|
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="1200" height="800" fill="#2c2c30"/>
|
|
<g transform="translate(600 400)">
|
|
<rect x="-210" y="-210" width="200" height="200" fill="#36363a" stroke="#4e4e57" stroke-width="4"/>
|
|
<rect x="10" y="-210" width="200" height="200" fill="#8f7ae0"/>
|
|
<rect x="-210" y="10" width="200" height="200" fill="#7a63cc"/>
|
|
<rect x="10" y="10" width="200" height="200" fill="#232327" stroke="#4e4e57" stroke-width="4"/>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/tokens/fonts.css">
|
|
<link rel="stylesheet" href="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/tokens/colors.css">
|
|
<link rel="stylesheet" href="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/tokens/typography.css">
|
|
<link rel="stylesheet" href="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/tokens/spacing.css">
|
|
<link rel="stylesheet" href="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/styles.css">
|
|
<script src="_ds/cubecraftlabs-design-system-2b6768ed-3ea8-4585-ac7e-108f768354a6/_ds_bundle.js"></script>
|
|
<style>
|
|
body { margin: 0; background: var(--ccl-charcoal); }
|
|
a { color: var(--ccl-purple); text-decoration: none; }
|
|
a:hover { color: var(--ccl-purple-dim); text-decoration: underline; }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="min-height:100vh;background:var(--ccl-charcoal);color:var(--ccl-text);font-family:'JetBrains Mono',monospace;padding:56px 64px 80px;display:flex;flex-direction:column;gap:56px">
|
|
|
|
<header style="display:flex;align-items:flex-end;justify-content:space-between;gap:32px;border-bottom:1px solid var(--ccl-border-2);padding-bottom:24px">
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">Color profile · revision 02</span>
|
|
<h1 style="margin:0;font-size:34px;font-weight:800;letter-spacing:0.02em;line-height:1.2">CubeCraft<span style="color:var(--ccl-purple)">Labs</span> — grey bench, violet accent</h1>
|
|
<p style="margin:0;max-width:62ch;font-size:14px;line-height:1.7;color:var(--ccl-text-muted);text-wrap:pretty">The ground moves from near-black charcoal to a medium grey, and gold is replaced by a single violet accent. Structure is untouched: square corners, hairline borders, JetBrains Mono, flat surfaces.</p>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:20px">
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.CubeMark" variant="exploded" size="76" hint-size="76px,76px"></x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Badge" tone="success" hint-size="auto,22px">tokens updated</x-import>
|
|
</div>
|
|
</header>
|
|
|
|
<section style="display:flex;flex-direction:column;gap:20px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">Base scale</span>
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--ccl-border-2);border:1px solid var(--ccl-border-2)">
|
|
<sc-for list="{{ swatches }}" as="s" hint-placeholder-count="8">
|
|
<div style="background:var(--ccl-charcoal-2);padding:16px;display:flex;flex-direction:column;gap:14px">
|
|
<div style="height:56px;border:1px solid var(--ccl-border-2);background:{{ s.hex }}"></div>
|
|
<div style="display:flex;flex-direction:column;gap:4px">
|
|
<span style="font-size:12px;font-weight:700">{{ s.token }}</span>
|
|
<span style="font-size:12px;color:var(--ccl-text-muted)">{{ s.hex }}</span>
|
|
<span style="font-size:11px;color:var(--ccl-text-muted);letter-spacing:0.02em">{{ s.role }}</span>
|
|
</div>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start">
|
|
<div style="display:flex;flex-direction:column;gap:20px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">In context</span>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Card" eyebrow="build queue" title="run-0294 · lattice bracket" accent="{{ true }}" hint-size="100%,300px">
|
|
<div style="display:flex;flex-direction:column;gap:20px;font-size:13px;line-height:1.7;color:var(--ccl-text-muted)">
|
|
<p style="margin:0">Violet carries the same job gold did — mark, active state, one primary action per view. On the lighter ground it needs to sit a step brighter to hold contrast.</p>
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap">
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Button" variant="primary" hint-size="auto,40px">START BUILD</x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Button" variant="secondary" hint-size="auto,40px">SPEC</x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Button" variant="ghost" hint-size="auto,40px">CANCEL</x-import>
|
|
</div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Tag" hash="{{ true }}" hint-size="auto,22px">petg</x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Tag" hash="{{ true }}" hint-size="auto,22px">0.12mm</x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Badge" tone="default" hint-size="auto,22px">queued</x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Badge" tone="error" hint-size="auto,22px">tolerance</x-import>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:12px;max-width:340px">
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Input" prompt="{{ true }}" placeholder="make bracket --rev 02" hint-size="100%,36px"></x-import>
|
|
<div style="display:flex;gap:24px;align-items:center">
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Checkbox" checked="{{ true }}" label="purge nozzle" hint-size="auto,20px"></x-import>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Switch" checked="{{ true }}" label="verbose log" hint-size="auto,20px"></x-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-import>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:20px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">Terminal surface</span>
|
|
<x-import component-from-global-scope="CubeCraftLabsDesignSystem_2b6768.Terminal" title="~/labs/tokens" lines="{{ lines }}" hint-size="100%,260px"></x-import>
|
|
<p style="margin:0;font-size:12px;line-height:1.7;color:var(--ccl-text-muted);text-wrap:pretty">Code and input wells now recess <em style="font-style:normal;color:var(--ccl-text)">below</em> the page instead of rising above it — on a medium ground, darker reads as inset.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<sc-if value="{{ showComparison }}" hint-placeholder-val="{{ true }}">
|
|
<section style="display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--ccl-border-2);padding-top:32px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">Before / after</span>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
|
|
<div style="background:#1a1a1a;border:1px solid #333;padding:24px;display:flex;flex-direction:column;gap:16px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#6b6b6b">rev 01 — charcoal + gold</span>
|
|
<div style="display:flex;gap:8px">
|
|
<span style="width:44px;height:44px;background:#1a1a1a;border:1px solid #333"></span>
|
|
<span style="width:44px;height:44px;background:#202020;border:1px solid #333"></span>
|
|
<span style="width:44px;height:44px;background:#e5c07b"></span>
|
|
<span style="width:44px;height:44px;background:#caa869"></span>
|
|
</div>
|
|
<span style="font-size:13px;color:#d4d4d4">Cube<span style="color:#e5c07b">Craft</span> · <span style="color:#e5c07b">✓ build complete</span></span>
|
|
</div>
|
|
<div style="background:var(--ccl-charcoal);border:1px solid var(--ccl-border-2);padding:24px;display:flex;flex-direction:column;gap:16px">
|
|
<span style="font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ccl-text-muted)">rev 02 — grey + violet</span>
|
|
<div style="display:flex;gap:8px">
|
|
<span style="width:44px;height:44px;background:var(--ccl-charcoal);border:1px solid var(--ccl-border-2)"></span>
|
|
<span style="width:44px;height:44px;background:var(--ccl-charcoal-2);border:1px solid var(--ccl-border-2)"></span>
|
|
<span style="width:44px;height:44px;background:var(--ccl-purple)"></span>
|
|
<span style="width:44px;height:44px;background:var(--ccl-purple-dim)"></span>
|
|
</div>
|
|
<span style="font-size:13px;color:var(--ccl-text)">Cube<span style="color:var(--ccl-purple)">Craft</span> · <span style="color:var(--ccl-purple)">✓ build complete</span></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</sc-if>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"accentColor":{"editor":"color","default":"#8f7ae0","tsType":"string","options":["#8f7ae0","#a78bfa","#b79cf0","#7a63cc"],"section":"Palette"},"pageGrey":{"editor":"color","default":"#2c2c30","tsType":"string","options":["#242428","#2c2c30","#35353a","#3f3f45"],"section":"Palette"},"showComparison":{"editor":"boolean","default":true,"tsType":"boolean","section":"Layout"}}">
|
|
class Component extends DCLogic {
|
|
componentDidMount() { this.applyTokens(); }
|
|
componentDidUpdate() { this.applyTokens(); }
|
|
|
|
applyTokens() {
|
|
const r = document.documentElement.style;
|
|
const accent = this.props.accentColor ?? "#8f7ae0";
|
|
const grey = this.props.pageGrey ?? "#2c2c30";
|
|
r.setProperty("--ccl-gold", accent);
|
|
r.setProperty("--ccl-gold-dim", this.shift(accent, -0.12));
|
|
r.setProperty("--ccl-purple-wash", this.rgba(accent, 0.12));
|
|
r.setProperty("--ccl-charcoal", grey);
|
|
r.setProperty("--ccl-charcoal-2", this.shift(grey, 0.06));
|
|
r.setProperty("--ccl-charcoal-3", this.shift(grey, -0.38));
|
|
r.setProperty("--ccl-border", this.shift(grey, 0.14));
|
|
r.setProperty("--ccl-border-2", this.shift(grey, 0.26));
|
|
}
|
|
|
|
parse(hex) {
|
|
const h = hex.replace("#", "");
|
|
return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16));
|
|
}
|
|
shift(hex, amt) {
|
|
const to = amt > 0 ? 255 : 0;
|
|
const p = Math.abs(amt);
|
|
const [r, g, b] = this.parse(hex).map(v => Math.round(v + (to - v) * p));
|
|
return "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("");
|
|
}
|
|
rgba(hex, a) { return `rgba(${this.parse(hex).join(",")},${a})`; }
|
|
|
|
renderVals() {
|
|
const accent = this.props.accentColor ?? "#8f7ae0";
|
|
const grey = this.props.pageGrey ?? "#2c2c30";
|
|
const swatches = [
|
|
{ token: "--ccl-grey", hex: grey, role: "page background", css: "var(--ccl-charcoal)" },
|
|
{ token: "--ccl-grey-2", hex: this.shift(grey, 0.06), role: "raised surface", css: "var(--ccl-charcoal-2)" },
|
|
{ token: "--ccl-grey-3", hex: this.shift(grey, -0.38), role: "input / code well", css: "var(--ccl-charcoal-3)" },
|
|
{ token: "--ccl-purple", hex: accent, role: "brand accent", css: "var(--ccl-gold)" },
|
|
{ token: "--ccl-purple-dim", hex: this.shift(accent, -0.12), role: "hover / pressed", css: "var(--ccl-gold-dim)" },
|
|
{ token: "--ccl-text", hex: "#f4f4f6", role: "primary text", css: "var(--ccl-text)" },
|
|
{ token: "--ccl-text-muted", hex: "#b2b2ba", role: "secondary text", css: "var(--ccl-text-muted)" },
|
|
{ token: "--ccl-border-2", hex: this.shift(grey, 0.26), role: "rules / grid lines", css: "var(--ccl-border-2)" },
|
|
{ token: "--ccl-green", hex: "#a9d88b", role: "success", css: "var(--ccl-green)" },
|
|
{ token: "--ccl-red", hex: "#f08b93", role: "error", css: "var(--ccl-red)" }
|
|
].map(s => ({ ...s, style: { "--sw": s.css } }));
|
|
return {
|
|
swatches,
|
|
showComparison: this.props.showComparison ?? true,
|
|
lines: [
|
|
{ tone: "muted", text: "$ ccl tokens set --ground grey --accent violet" },
|
|
{ tone: "out", text: "resolving 11 tokens" },
|
|
{ tone: "gold", text: "--ccl-gold #e5c07b -> " + accent },
|
|
{ tone: "gold", text: "--ccl-charcoal #1a1a1a -> " + grey },
|
|
{ tone: "out", text: "corners 0 · borders hairline · mono unchanged" },
|
|
{ tone: "green", text: "\u2713 profile written" }
|
|
]
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|