@threelight/ui 0.2.0-alpha.0 → 0.3.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -121
- package/css/base.css +735 -407
- package/dist/index.d.ts +242 -17
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +119 -54
- package/dist/index.js.map +1 -1
- package/examples/index.html +151 -53
- package/package.json +2 -2
package/examples/index.html
CHANGED
|
@@ -3,66 +3,164 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
<title>ThreeLight UI Example</title>
|
|
7
6
|
<link rel="stylesheet" href="../css/base.css" />
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.example-shell {
|
|
14
|
-
min-block-size: 100vh;
|
|
15
|
-
}
|
|
16
|
-
</style>
|
|
7
|
+
<title>ThreeLight UI alpha reset example</title>
|
|
17
8
|
</head>
|
|
18
9
|
<body data-tl-root data-tl-theme="default" data-tl-mode="light">
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
<div class="tl-app-shell">
|
|
11
|
+
<aside class="tl-app-shell__sidebar">
|
|
12
|
+
<nav class="tl-side-nav" aria-label="Example navigation">
|
|
13
|
+
<div class="tl-side-nav__group">
|
|
14
|
+
<div class="tl-side-nav__label">System</div>
|
|
15
|
+
<a class="tl-side-nav__item" href="#overview" aria-current="page">Overview</a>
|
|
16
|
+
<a class="tl-side-nav__item" href="#components">Components</a>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="tl-side-nav__group">
|
|
19
|
+
<div class="tl-side-nav__label">Service templates</div>
|
|
20
|
+
<a class="tl-side-nav__item" href="#dashboard">Dashboard</a>
|
|
21
|
+
<a class="tl-side-nav__item" href="#settings">Settings</a>
|
|
22
|
+
</div>
|
|
23
|
+
</nav>
|
|
24
|
+
</aside>
|
|
25
|
+
<main class="tl-app-shell__main">
|
|
26
|
+
<header class="tl-app-shell__topbar">
|
|
27
|
+
<span class="tl-mono">threelight/ui</span>
|
|
28
|
+
<button
|
|
29
|
+
class="tl-button"
|
|
30
|
+
data-tl-variant="solid"
|
|
31
|
+
data-tl-tone="primary"
|
|
32
|
+
type="button"
|
|
33
|
+
>
|
|
34
|
+
Export
|
|
35
|
+
</button>
|
|
36
|
+
</header>
|
|
37
|
+
<div class="tl-app-shell__content tl-stack" style="--tl-stack-gap: var(--tl-space-6)">
|
|
38
|
+
<section class="tl-stack" id="overview">
|
|
39
|
+
<p class="tl-caption">Alpha reset</p>
|
|
40
|
+
<h1 class="tl-heading" style="--tl-heading-size: 1.8rem">
|
|
41
|
+
Short-class service UI contract
|
|
42
|
+
</h1>
|
|
43
|
+
<p class="tl-text">
|
|
44
|
+
Components use short public classes, role tokens, and data attributes for
|
|
45
|
+
tone, variant, size, density, and state.
|
|
46
|
+
</p>
|
|
47
|
+
</section>
|
|
28
48
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
49
|
+
<section class="tl-metric-group" aria-label="Example metrics">
|
|
50
|
+
<article class="tl-metric-card">
|
|
51
|
+
<span class="tl-metric-card__label">Active users</span>
|
|
52
|
+
<strong class="tl-metric-card__value">48,210</strong>
|
|
53
|
+
<span class="tl-metric-card__delta" data-tl-tone="success">+12.4%</span>
|
|
54
|
+
</article>
|
|
55
|
+
<article class="tl-metric-card">
|
|
56
|
+
<span class="tl-metric-card__label">MRR</span>
|
|
57
|
+
<strong class="tl-metric-card__value">$82.4k</strong>
|
|
58
|
+
<span class="tl-metric-card__delta" data-tl-tone="success">+4.1%</span>
|
|
59
|
+
</article>
|
|
60
|
+
<article class="tl-metric-card">
|
|
61
|
+
<span class="tl-metric-card__label">Churn</span>
|
|
62
|
+
<strong class="tl-metric-card__value">2.3%</strong>
|
|
63
|
+
<span class="tl-metric-card__delta" data-tl-tone="danger">+0.4%</span>
|
|
64
|
+
</article>
|
|
65
|
+
</section>
|
|
35
66
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
67
|
+
<section class="tl-panel" id="components">
|
|
68
|
+
<div class="tl-panel__header">
|
|
69
|
+
<div>
|
|
70
|
+
<h2 class="tl-panel__title">Components</h2>
|
|
71
|
+
<p class="tl-panel__description">
|
|
72
|
+
Core and candidate surfaces share the same token contract.
|
|
73
|
+
</p>
|
|
74
|
+
</div>
|
|
75
|
+
<span class="tl-badge" data-tl-tone="info">candidate enabled</span>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="tl-panel__body tl-stack">
|
|
78
|
+
<div class="tl-cluster">
|
|
79
|
+
<button
|
|
80
|
+
class="tl-button"
|
|
81
|
+
data-tl-variant="solid"
|
|
82
|
+
data-tl-tone="primary"
|
|
83
|
+
type="button"
|
|
84
|
+
>
|
|
85
|
+
Primary
|
|
86
|
+
</button>
|
|
87
|
+
<button class="tl-button" data-tl-variant="outline" type="button">
|
|
88
|
+
Neutral
|
|
89
|
+
</button>
|
|
90
|
+
<button
|
|
91
|
+
class="tl-button"
|
|
92
|
+
data-tl-variant="soft"
|
|
93
|
+
data-tl-tone="danger"
|
|
94
|
+
type="button"
|
|
95
|
+
>
|
|
96
|
+
Danger
|
|
97
|
+
</button>
|
|
98
|
+
<span class="tl-badge" data-tl-tone="success">Active</span>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="tl-alert" data-tl-tone="warning" role="status">
|
|
101
|
+
<span class="tl-alert__icon" aria-hidden="true">!</span>
|
|
102
|
+
<div class="tl-alert__content">
|
|
103
|
+
<div class="tl-alert__title">Token review required</div>
|
|
104
|
+
<p class="tl-alert__description">
|
|
105
|
+
Candidate patterns can change during the alpha reset.
|
|
106
|
+
</p>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</section>
|
|
41
111
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
112
|
+
<section class="tl-panel" id="dashboard">
|
|
113
|
+
<div class="tl-panel__header">
|
|
114
|
+
<h2 class="tl-panel__title">Recent events</h2>
|
|
115
|
+
<button class="tl-button" data-tl-size="sm" type="button">View all</button>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="tl-panel__body">
|
|
118
|
+
<table class="tl-table">
|
|
119
|
+
<thead>
|
|
120
|
+
<tr>
|
|
121
|
+
<th>Event</th>
|
|
122
|
+
<th>User</th>
|
|
123
|
+
<th>Status</th>
|
|
124
|
+
<th>Time</th>
|
|
125
|
+
</tr>
|
|
126
|
+
</thead>
|
|
127
|
+
<tbody>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Workspace created</td>
|
|
130
|
+
<td>linnea@acme.io</td>
|
|
131
|
+
<td><span class="tl-badge" data-tl-tone="success">Success</span></td>
|
|
132
|
+
<td>2m</td>
|
|
133
|
+
</tr>
|
|
134
|
+
<tr>
|
|
135
|
+
<td>Webhook retry</td>
|
|
136
|
+
<td>system</td>
|
|
137
|
+
<td><span class="tl-badge" data-tl-tone="warning">Pending</span></td>
|
|
138
|
+
<td>21m</td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody>
|
|
141
|
+
</table>
|
|
142
|
+
</div>
|
|
143
|
+
</section>
|
|
48
144
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
145
|
+
<section class="tl-settings-section" id="settings">
|
|
146
|
+
<div class="tl-settings-section__summary">
|
|
147
|
+
<h2 class="tl-heading">Settings</h2>
|
|
148
|
+
<p class="tl-text">Readable form sections with explicit helper text.</p>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="tl-settings-section__content tl-stack">
|
|
151
|
+
<label class="tl-field">
|
|
152
|
+
<span class="tl-field__label">Workspace name</span>
|
|
153
|
+
<input class="tl-input" value="Northwind" />
|
|
154
|
+
<span class="tl-field__help">Visible to members and reports.</span>
|
|
155
|
+
</label>
|
|
156
|
+
<button class="tl-switch" role="switch" aria-checked="true" type="button">
|
|
157
|
+
<span class="tl-switch__track"><span class="tl-switch__thumb"></span></span>
|
|
158
|
+
<span class="tl-switch__label">Require two-factor authentication</span>
|
|
159
|
+
</button>
|
|
160
|
+
</div>
|
|
161
|
+
</section>
|
|
64
162
|
</div>
|
|
65
|
-
</
|
|
66
|
-
</
|
|
163
|
+
</main>
|
|
164
|
+
</div>
|
|
67
165
|
</body>
|
|
68
166
|
</html>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@threelight/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.0-alpha.0",
|
|
4
|
+
"description": "Short-class CSS, role tokens, and metadata for service UI systems.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"sideEffects": [
|