@lablup/ui-common 0.1.0-alpha.7 → 0.1.0-alpha.9
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
CHANGED
|
@@ -74,7 +74,7 @@ import "@lablup/ui-common/styles/themes/orange-dark.css";
|
|
|
74
74
|
|
|
75
75
|
The package ships the theming mechanism and one default palette, the Lablup
|
|
76
76
|
brand orange. A product with its own visual identity defines its own
|
|
77
|
-
`[data-theme]` blocks over the same
|
|
77
|
+
`[data-theme]` blocks over the same 116 token names and ships them itself,
|
|
78
78
|
rather than the package accumulating everyone's palettes. The source product
|
|
79
79
|
does exactly that with its five families.
|
|
80
80
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.stat-card{gap:var(--token-paddingSM,.5rem);min-width:0;overflow:hidden}.stat-card__header{justify-content:space-between;align-items:center;gap:var(--token-paddingXS,.25rem);display:flex}.stat-card__label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.stat-card__icon{border-radius:var(--token-borderRadiusSM,.25rem);background:var(--token-colorFillSecondary,#ffffff0a);width:28px;height:28px;color:var(--token-colorTextSecondary,#fff9);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.stat-card__body{flex-direction:column;gap:4px;display:flex}.stat-card__value-row{flex-wrap:wrap;align-items:baseline;gap:.3em;display:inline-flex}.stat-card__value-line{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);min-width:0;display:flex}.stat-card__sparkline{flex-shrink:0;align-items:center;display:inline-flex}.stat-card__value{font-size:var(--token-
|
|
1
|
+
.stat-card{gap:var(--token-paddingSM,.5rem);min-width:0;overflow:hidden}.stat-card__header{justify-content:space-between;align-items:center;gap:var(--token-paddingXS,.25rem);display:flex}.stat-card__label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.stat-card__icon{border-radius:var(--token-borderRadiusSM,.25rem);background:var(--token-colorFillSecondary,#ffffff0a);width:28px;height:28px;color:var(--token-colorTextSecondary,#fff9);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.stat-card__body{flex-direction:column;gap:4px;display:flex}.stat-card__value-row{flex-wrap:wrap;align-items:baseline;gap:.3em;display:inline-flex}.stat-card__value-line{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);min-width:0;display:flex}.stat-card__sparkline{flex-shrink:0;align-items:center;display:inline-flex}.stat-card__value{font-size:var(--token-fontSizeXXL,1.5rem);color:var(--token-colorText,#141414);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;line-height:1.1;overflow:hidden}.stat-card__value-suffix{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#ffffff73);font-weight:400}.stat-card__trend{font-size:var(--token-fontSizeSM,.75rem);align-items:center;gap:4px;font-weight:500;display:inline-flex}.stat-card__trend--up{color:var(--token-colorSuccess,#52c41a)}.stat-card__trend--down{color:var(--token-colorError,#f5222d)}.stat-card__trend--flat{color:var(--token-colorTextSecondary,#ffffff73)}.stat-card__hint{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);line-height:1.4}.stat-card.stat-card--prominent{padding:var(--token-paddingLG,1.5rem)}.stat-card--prominent{background:linear-gradient(135deg, var(--token-colorBgContainer,#fff) 0%, color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 4%, transparent) 100%)}.stat-card--prominent:hover{border-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 30%, transparent)}.stat-card--prominent .stat-card__value{font-size:var(--token-fontSizeHeading1,2.25rem)}.stat-card--prominent .stat-card__icon{width:34px;height:34px}.stat-card.stat-card--compact{padding:var(--token-paddingSM,.5rem)}.stat-card--compact .stat-card__value{font-size:var(--token-fontSizeHeading3,1.5rem)}.stat-card--tone-success .stat-card__value{color:var(--token-colorSuccess,#52c41a)}.stat-card--tone-success .stat-card__icon{color:var(--token-colorSuccess,#52c41a);background:#52c41a1f}.stat-card--tone-warning .stat-card__value{color:var(--token-colorWarning,#faad14)}.stat-card--tone-warning .stat-card__icon{color:var(--token-colorWarning,#faad14);background:#faad1424}.stat-card--tone-danger .stat-card__value{color:var(--token-colorError,#f5222d)}.stat-card--tone-danger .stat-card__icon{color:var(--token-colorError,#f5222d);background:#f5222d1f}.stat-card--tone-info .stat-card__value{color:var(--token-colorPrimary,#8b5cf6)}.stat-card--tone-info .stat-card__icon{color:var(--token-colorPrimary,#8b5cf6);background:#6a35fc1f}.stat-card--tone-success{--corner-accent-color:var(--token-colorSuccess,#52c41a)}.stat-card--tone-warning{--corner-accent-color:var(--token-colorWarning,#faad14)}.stat-card--tone-danger{--corner-accent-color:var(--token-colorError,#f5222d)}.stat-card--tone-info{--corner-accent-color:var(--token-colorPrimary,#8b5cf6)}@media (prefers-reduced-motion:reduce){.stat-card__trend{transition:none}}
|
package/dist/styles/base.css
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @lablup/ui-common design tokens
|
|
3
3
|
*
|
|
4
|
-
* The
|
|
4
|
+
* The 116 `--token-*` custom properties every component in this package
|
|
5
5
|
* reads. This file is the token contract: renaming or removing an entry is
|
|
6
6
|
* a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
|
|
7
7
|
*
|
|
8
|
+
* It also carries one block of element rules, at the end: the scrollbar. A
|
|
9
|
+
* scrollbar is painted by the browser on a box this package does not own, so
|
|
10
|
+
* there is no component to hang the rules on and a consumer that wants a
|
|
11
|
+
* themed bar has nowhere to put one that every scrollable surface inherits.
|
|
12
|
+
* The rest of the file is custom properties only.
|
|
13
|
+
*
|
|
8
14
|
* Colour and button values are the Lablup brand default, theme family
|
|
9
15
|
* "orange", colour scheme "light", which is also the one theme this package
|
|
10
16
|
* ships as a stylesheet (`styles/themes/orange-light.css` and its dark
|
|
@@ -16,7 +22,7 @@
|
|
|
16
22
|
* call site.
|
|
17
23
|
*
|
|
18
24
|
* A product with its own visual identity defines its own `[data-theme]`
|
|
19
|
-
* blocks over these
|
|
25
|
+
* blocks over these 116 names and ships them itself, the way the source
|
|
20
26
|
* product does with its five families. This package carries the mechanism and
|
|
21
27
|
* one default, not a catalogue of somebody else's palettes.
|
|
22
28
|
*
|
|
@@ -147,6 +153,11 @@
|
|
|
147
153
|
--token-fontSizeLG: 1rem;
|
|
148
154
|
--token-fontSizeSM: 0.75rem;
|
|
149
155
|
--token-fontSizeXL: 1.25rem;
|
|
156
|
+
/* The step above XL, for a value that is displayed rather than read as a
|
|
157
|
+
heading. The ladder had XXS but no XXL, so a component with a large
|
|
158
|
+
numeric readout had nothing to reach for and took a heading token
|
|
159
|
+
instead. Both products that define this name already declare 1.5rem. */
|
|
160
|
+
--token-fontSizeXXL: 1.5rem;
|
|
150
161
|
--token-fontSizeXXS: 0.5rem;
|
|
151
162
|
--token-marginXXS: 4px;
|
|
152
163
|
--token-padding: 0.75rem;
|
|
@@ -156,6 +167,13 @@
|
|
|
156
167
|
--token-paddingXL: 2rem;
|
|
157
168
|
--token-paddingXS: 0.25rem;
|
|
158
169
|
--token-paddingXXS: 0.125rem;
|
|
170
|
+
/* One size for every theme. A theme family may restyle the track and the
|
|
171
|
+
thumb, but must not restate the size: `[data-theme="..."]
|
|
172
|
+
::-webkit-scrollbar` outranks the global rule on specificity, so a wider
|
|
173
|
+
bar declared there cannot be corrected from here, and a sidebar rail is
|
|
174
|
+
the surface that pays for it. `scrollbar.test.ts` keeps it that way. */
|
|
175
|
+
--token-scrollbarSize: 0.5rem; /* 8px */
|
|
176
|
+
--token-scrollbarRadius: 0.25rem; /* 4px */
|
|
159
177
|
--token-motionDurationFast: 0.1s;
|
|
160
178
|
--token-motionDurationMid: 0.2s;
|
|
161
179
|
--token-motionDurationSlow: 0.3s;
|
|
@@ -187,3 +205,37 @@
|
|
|
187
205
|
--token-buttonSecondaryShadowHover:
|
|
188
206
|
0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
189
207
|
}
|
|
208
|
+
|
|
209
|
+
/* ============================================
|
|
210
|
+
Scrollbar
|
|
211
|
+
|
|
212
|
+
The only element rules in this file. Both halves are needed because the two
|
|
213
|
+
engines expose different surfaces, and neither one alone themes a bar.
|
|
214
|
+
============================================ */
|
|
215
|
+
|
|
216
|
+
/* Firefox has no ::-webkit pseudo-elements. Both properties are inherited, so
|
|
217
|
+
declaring them once on the root themes every scrollable descendant, and a
|
|
218
|
+
surface that hides its own bar (see `Tabs.css`) still overrides them
|
|
219
|
+
locally. */
|
|
220
|
+
:root {
|
|
221
|
+
scrollbar-width: thin;
|
|
222
|
+
scrollbar-color: var(--token-colorBorder, #d9d9d9) transparent;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
::-webkit-scrollbar {
|
|
226
|
+
width: var(--token-scrollbarSize, 0.5rem);
|
|
227
|
+
height: var(--token-scrollbarSize, 0.5rem);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
::-webkit-scrollbar-track {
|
|
231
|
+
background: transparent;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
::-webkit-scrollbar-thumb {
|
|
235
|
+
background-color: var(--token-colorBorder, #d9d9d9);
|
|
236
|
+
border-radius: var(--token-scrollbarRadius, 0.25rem);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
::-webkit-scrollbar-thumb:hover {
|
|
240
|
+
background-color: var(--token-colorTextTertiary, #737373);
|
|
241
|
+
}
|
package/package.json
CHANGED