mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekayandHanzo Dev
01dc7b5306
Swapping the forked token layer for the inherited one silently orphaned two names. The fork declared --border-hairline (a solid #262626) and --border-card; the substrate draws every one of those boundaries with a single alpha --border, and explains at length why alpha beats a solid hex there — a solid edge reads on the page and vanishes the moment it lands on a lifted surface. Nineteen shipped files still asked for the old names: Card, Avatar, Badge, Table, Accordion, Dialog, DropdownMenu, Sheet, Toaster, seven specimen cards, and the generation prompts. An undefined custom property in `border:1px solid var(--gone)` does not fail. The declaration is invalid at computed-value time, border-color falls back to currentColor, and every one of those surfaces draws its edge in the INK colour — a stark near-white hairline on black that reads as a bold design choice rather than as nineteen broken files. They are not re-declared as aliases. Both mapped to the substrate's --border, so keeping them would be two names for one thing — exactly the duplication this package exists to remove. The components now speak the substrate's vocabulary. check-tokens gains the check that would have caught it. Check 4 proves the STYLESHEET is internally consistent and says nothing about the components, kits, specimen cards and prompts shipped beside it — which are the files a consumer actually renders. Now every var() in all 78 of them must resolve against the sheet. Mutation-proven: pointing one card back at --border-hairline fails the build. Co-authored-by: Hanzo Dev <[email protected]>
32 lines
2.8 KiB
HTML
32 lines
2.8 KiB
HTML
<!-- @dsCard group="Components" viewport="700x300" name="Navigation" subtitle="Tabs and Accordion" -->
|
|
<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Navigation components</title>
|
|
<link rel="stylesheet" href="../../styles.css">
|
|
<script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script src="../../_ds_bundle.js"></script>
|
|
<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
|
|
<body><div id="root"></div>
|
|
<script type="text/babel">
|
|
const { Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem } = window.LuxDesignSystem_0a9445;
|
|
const TS = "import Lux from '@lux/cloud'\n\nconst lux = new Lux()\nawait lux.chat.completions.create({\n model: 'lux-pro',\n messages: [{ role: 'user', content: 'Hi' }],\n})";
|
|
const PY = "from lux import Lux\n\nlux = Lux()\nlux.chat.completions.create(\n model=\"lux-pro\",\n messages=[{\"role\": \"user\", \"content\": \"Hi\"}],\n)";
|
|
const SH = "curl https://api.lux.network/v1/chat/completions \\\n -H \"Authorization: Bearer $LUX_API_KEY\" \\\n -d '{\"model\":\"lux-pro\"}'";
|
|
function Demo(){
|
|
return (<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
|
|
<Tabs defaultValue="ts">
|
|
<TabsList><TabsTrigger value="ts">TypeScript</TabsTrigger><TabsTrigger value="py">Python</TabsTrigger><TabsTrigger value="sh">cURL</TabsTrigger></TabsList>
|
|
<TabsContent value="ts"><pre>{TS}</pre></TabsContent>
|
|
<TabsContent value="py"><pre>{PY}</pre></TabsContent>
|
|
<TabsContent value="sh"><pre>{SH}</pre></TabsContent>
|
|
</Tabs>
|
|
<Accordion defaultValue="q1">
|
|
<AccordionItem value="q1" title="How is usage billed?">Per token, metered hourly. You pay only for what you use.</AccordionItem>
|
|
<AccordionItem value="q2" title="Can I self-host?">Yes. Every service in the Lux cloud is open source.</AccordionItem>
|
|
<AccordionItem value="q3" title="Which models are available?">Zen open weights, plus Lux Flash, Pro, and Ultra.</AccordionItem>
|
|
</Accordion>
|
|
</div>)
|
|
}
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
|
|
</script></body></html>
|