78 lines
12 KiB
HTML
78 lines
12 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>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<div style="width:{{ w }};display:flex;flex-direction:column;background:var(--ui-bg);border:1px solid var(--ui-border);font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;color:var(--ui-text)">
|
|
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="6">
|
|
<div style="display:flex;flex-direction:column;gap:12px;padding:16px 20px;border-top:{{ r.bt }}">
|
|
<div style="display:flex;align-items:baseline;gap:12px;flex-wrap:wrap"><span style="font:600 14px/22px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ r.name }}</span><span style="font:400 12px/18px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ r.tokens }}</span></div>
|
|
<div style="display:grid;grid-template-columns:{{ cols }};gap:16px 20px;align-items:start">
|
|
<sc-for list="{{ r.cells }}" as="c" hint-placeholder-count="5">
|
|
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0">
|
|
<span style="font:500 11px/16px 'IBM Plex Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">{{ c.state }}</span>
|
|
<span style="{{ c.wrap }}"><sc-if value="{{ c.box }}"><span style="{{ c.box }}"><sc-if value="{{ c.boxIcon }}"><span aria-hidden="true" style="display:inline-block;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ c.boxIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.boxIcon }}.svg') center / contain no-repeat"></span></sc-if><sc-if value="{{ c.knob }}"><span style="{{ c.knob }}"></span></sc-if></span></sc-if><sc-if value="{{ c.lead }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ c.lead }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.lead }}.svg') center / contain no-repeat"></span></sc-if>{{ c.text }}<sc-if value="{{ c.trail }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ c.trail }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.trail }}.svg') center / contain no-repeat"></span></sc-if></span>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1240,"height":900},"mobile":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
const m = !!this.props.mobile, h = m ? 44 : 32
|
|
const RING = 'outline:2px solid var(--ui-primary);outline-offset:2px;'
|
|
const RINGI = 'outline:2px solid var(--ui-primary);outline-offset:-2px;'
|
|
const ST = m ? ['Default', 'Focus-visible', 'Active', 'Disabled'] : ['Default', 'Hover', 'Focus-visible', 'Active', 'Disabled']
|
|
const base = 'display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;font-weight:500;white-space:nowrap;'
|
|
const mk = (fn) => ST.map(s => ({ state: s, ...fn(s.toLowerCase()) }))
|
|
const dis = s => s === 'disabled' ? 'opacity:0.4;' : ''
|
|
const ring = s => s === 'focus-visible' ? RING : ''
|
|
const btn = (bg, fg, bd, hov, act, o = {}) => mk(s => ({ text: o.icon ? '' : (o.text || 'Save'), lead: o.icon || '', wrap: base + 'height:' + h + 'px;min-width:' + (o.icon ? h : 0) + 'px;padding:0 ' + (o.icon ? 0 : 12) + 'px;background:' + (s === 'hover' ? hov : s === 'active' ? act : bg) + ';color:' + fg + ';border:1px solid ' + bd + ';' + (o.op && s === 'hover' ? 'opacity:0.85;' : '') + (o.op && s === 'active' ? 'opacity:0.75;' : '') + ring(s) + dis(s) }))
|
|
const field = (val, trail, o = {}) => mk(s => ({ text: val, trail, wrap: base + 'font-weight:400;justify-content:space-between;width:' + (m ? '100%' : '200px') + ';height:' + h + 'px;padding:0 10px;background:var(--ui-bg);color:' + (o.ph ? 'var(--ui-text-muted)' : 'var(--ui-text-highlighted)') + ';border:1px solid ' + (s === 'focus-visible' || s === 'active' ? 'var(--ui-primary)' : s === 'hover' ? 'var(--ui-text-muted)' : 'var(--ui-border-accented)') + ';' + (s === 'focus-visible' || s === 'active' ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : '') + dis(s) }))
|
|
const chk = on => mk(s => ({ text: 'Select all', wrap: 'display:inline-flex;align-items:center;gap:8px;min-height:' + h + 'px;color:var(--ui-text-highlighted);' + dis(s), box: 'display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:16px;height:16px;border:1px solid ' + (on ? 'var(--ui-primary)' : s === 'hover' ? 'var(--ui-text-highlighted)' : 'var(--ui-border-accented)') + ';background:' + (on ? 'var(--ui-primary)' : s === 'active' ? 'var(--ui-bg-accented)' : 'var(--ui-bg)') + ';color:var(--ui-bg);' + ring(s), boxIcon: on ? 'check' : '' }))
|
|
const sw = on => mk(s => ({ text: 'Run automatically', wrap: 'display:inline-flex;align-items:center;gap:8px;min-height:' + h + 'px;color:var(--ui-text-highlighted);' + dis(s), box: 'display:flex;box-sizing:border-box;width:32px;height:18px;padding:2px;justify-content:' + (on ? 'flex-end' : 'flex-start') + ';background:' + (on ? 'var(--ui-primary)' : s === 'hover' ? 'var(--ui-border-accented)' : 'var(--ui-bg-accented)') + ';' + ring(s), knob: 'display:block;height:14px;width:' + (s === 'active' ? 18 : 14) + 'px;background:' + (on ? 'var(--ui-bg)' : 'var(--ui-bg)') + ';border:0' }))
|
|
const tab = on => mk(s => ({ text: 'Drafts', trail: '', wrap: base + 'height:' + (m ? 44 : 36) + 'px;padding:0 4px;color:' + (on || s === 'hover' || s === 'active' ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)') + ';background:' + (s === 'active' ? 'var(--ui-bg-elevated)' : 'transparent') + ';box-shadow:inset 0 -2px 0 ' + (on ? 'var(--ui-primary)' : s === 'hover' ? 'var(--ui-border-accented)' : 'transparent') + ';' + (s === 'focus-visible' ? RINGI : '') + dis(s) }))
|
|
const seg = on => mk(s => ({ text: on ? 'Failed' : 'Success', wrap: base + 'height:' + h + 'px;padding:0 12px;border:1px solid var(--ui-border-accented);background:' + (on ? (s === 'hover' ? 'var(--ui-text)' : s === 'active' ? 'var(--ui-text-toned)' : 'var(--ui-primary)') : (s === 'hover' ? 'var(--ui-bg-elevated)' : s === 'active' ? 'var(--ui-bg-accented)' : 'var(--ui-bg)')) + ';color:' + (on ? 'var(--ui-bg)' : 'var(--ui-text-toned)') + ';' + (s === 'focus-visible' ? RINGI : '') + dis(s) }))
|
|
const row = (kind) => mk(s => ({ text: kind === 'sel' ? 'Winter checklist for timber windows' : 'Spring release', wrap: 'display:flex;align-items:center;box-sizing:border-box;width:' + (m ? '100%' : '260px') + ';min-height:' + (m ? 56 : 40) + 'px;padding:0 12px;background:' + (kind === 'sel' ? 'var(--rc-sand)' : s === 'hover' ? 'var(--ui-bg-elevated)' : s === 'active' ? 'var(--ui-bg-accented)' : 'var(--ui-bg)') + ';color:' + (kind === 'sel' ? 'var(--rc-on-sand)' : 'var(--ui-text)') + ';border-bottom:1px solid var(--ui-border);' + (s === 'focus-visible' ? RINGI : '') + (s === 'disabled' ? 'opacity:0.55;' : '') }))
|
|
const nav = (kind) => mk(s => { const sel = kind === 'sel', par = kind === 'parent'; return { text: kind === 'sel' ? 'Articles' : 'Settings', lead: kind === 'sel' ? 'file-text' : 'settings', trail: par ? 'chevron-down' : '', wrap: base + 'justify-content:flex-start;width:' + (m ? '100%' : '200px') + ';height:' + (m ? 44 : 32) + 'px;padding:0 10px;gap:10px;font-weight:' + (sel || par ? 500 : 400) + ';background:' + (sel ? 'var(--rc-sand)' : s === 'hover' ? 'var(--ui-bg-elevated)' : s === 'active' ? 'var(--ui-bg-accented)' : 'transparent') + ';color:' + (sel ? 'var(--rc-on-sand)' : par || s === 'hover' ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)') + ';' + ring(s) + dis(s) } })
|
|
const pg = (kind) => mk(s => ({ text: kind === 'cur' ? '2' : '3', wrap: base + 'min-width:' + h + 'px;height:' + h + 'px;padding:0 8px;font-weight:' + (kind === 'cur' ? 600 : 400) + ';border:1px solid ' + (kind === 'cur' ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';background:' + (kind === 'cur' ? 'var(--rc-sand)' : s === 'hover' ? 'var(--ui-bg-elevated)' : s === 'active' ? 'var(--ui-bg-accented)' : 'var(--ui-bg)') + ';color:' + (kind === 'cur' ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)') + ';' + ring(s) + dis(s) }))
|
|
const card = (on) => mk(s => ({ text: 'Failed actions · 6', wrap: 'display:flex;flex-direction:column;box-sizing:border-box;width:' + (m ? '100%' : '200px') + ';padding:12px 14px;font-weight:500;border:1px solid ' + (on ? 'var(--ui-primary)' : s === 'hover' ? 'var(--ui-border-accented)' : 'var(--ui-border)') + ';background:' + (on ? 'var(--rc-sand)' : s === 'hover' ? 'var(--ui-bg-elevated)' : s === 'active' ? 'var(--ui-bg-accented)' : 'var(--rc-error-soft)') + ';color:' + (on ? 'var(--rc-on-sand)' : 'var(--ui-error)') + ';' + ring(s) + dis(s) }))
|
|
const rows = [
|
|
['Button, primary', 'bg --ui-primary · hover --ui-text · active --ui-text-toned', btn('var(--ui-primary)', 'var(--ui-bg)', 'var(--ui-primary)', 'var(--ui-text)', 'var(--ui-text-toned)')],
|
|
['Button, secondary', 'bd --ui-border-accented · hover --ui-bg-elevated · active --ui-bg-accented', btn('var(--ui-bg)', 'var(--ui-text-highlighted)', 'var(--ui-border-accented)', 'var(--ui-bg-elevated)', 'var(--ui-bg-accented)')],
|
|
['Button, ghost', 'transparent · hover --ui-bg-elevated · active --ui-bg-accented', btn('transparent', 'var(--ui-text-highlighted)', 'transparent', 'var(--ui-bg-elevated)', 'var(--ui-bg-accented)')],
|
|
['Button, destructive', 'bg --ui-error · hover opacity 0.85 · active opacity 0.75', btn('var(--ui-error)', 'var(--ui-bg)', 'var(--ui-error)', 'var(--ui-error)', 'var(--ui-error)', { op: 1, text: 'Delete' })],
|
|
['Icon button', m ? '44 px square · ghost' : '32 px square · ghost', btn('transparent', 'var(--ui-text-toned)', 'transparent', 'var(--ui-bg-elevated)', 'var(--ui-bg-accented)', { icon: 'ellipsis' })],
|
|
['Input', 'bd --ui-border-accented · hover --ui-text-muted · focus --ui-primary', field('Search by title', '', { ph: 1 })],
|
|
['Select', 'as input, chevron-down', field('Newest first', 'chevron-down')],
|
|
['Checkbox, unchecked', '16 px · bd --ui-border-accented', chk(false)],
|
|
['Checkbox, checked', 'bg --ui-primary', chk(true)],
|
|
['Switch, off', 'track --ui-bg-accented · hover --ui-border-accented', sw(false)],
|
|
['Switch, on', 'track --ui-primary', sw(true)],
|
|
['Tab, unselected', 'text --ui-text-toned · hover underline --ui-border-accented', tab(false)],
|
|
['Tab, selected', 'underline 2 px --ui-primary', tab(true)],
|
|
['Segmented control, unselected', 'bd --ui-border-accented', seg(false)],
|
|
['Segmented control, selected', 'bg --ui-primary · hover --ui-text · active --ui-text-toned', seg(true)],
|
|
['Table row', 'hover --ui-bg-elevated · active --ui-bg-accented · disabled opacity 0.55', row('def')],
|
|
['Table row, selected', '--rc-sand · --rc-on-sand in every state', row('sel')],
|
|
['Nav item', 'text --ui-text-toned · hover --ui-bg-elevated', nav('def')],
|
|
['Nav item, parent of selected child', 'weight 500 · --ui-text-highlighted · chevron-down', nav('parent')],
|
|
['Nav item, selected', '--rc-sand · --rc-on-sand', nav('sel')],
|
|
['Paginator button', m ? '44 px' : '32 px', pg('def')],
|
|
['Paginator button, current page', '--rc-sand · bd --ui-primary · aria-current', pg('cur')],
|
|
['Filter card', 'bg --rc-error-soft · hover --ui-bg-elevated', card(false)],
|
|
['Filter card, pressed', 'aria-pressed · --rc-sand · bd --ui-primary', card(true)]
|
|
].map(([name, tokens, cells], i) => ({ name, tokens, cells, bt: i ? '1px solid var(--ui-border)' : '0' }))
|
|
return { rows, w: m ? '390px' : '1240px', cols: m ? 'repeat(2,minmax(0,1fr))' : 'repeat(5,minmax(0,1fr))' }
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |