Maniacs_Mansion/CCL_Design
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Joshua King
2026-08-09 13:19:42 -04:00
parent 463cb09676
commit db5496ae19
19 changed files with 5724 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Color Profile.dc.html
+191
View File
@@ -0,0 +1,191 @@
<!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="{&quot;accentColor&quot;:{&quot;editor&quot;:&quot;color&quot;,&quot;default&quot;:&quot;#8f7ae0&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;options&quot;:[&quot;#8f7ae0&quot;,&quot;#a78bfa&quot;,&quot;#b79cf0&quot;,&quot;#7a63cc&quot;],&quot;section&quot;:&quot;Palette&quot;},&quot;pageGrey&quot;:{&quot;editor&quot;:&quot;color&quot;,&quot;default&quot;:&quot;#2c2c30&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;options&quot;:[&quot;#242428&quot;,&quot;#2c2c30&quot;,&quot;#35353a&quot;,&quot;#3f3f45&quot;],&quot;section&quot;:&quot;Palette&quot;},&quot;showComparison&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Layout&quot;}}">
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>