@lablup/ui-common 0.1.0-alpha.8 → 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,7 +1,7 @@
|
|
|
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
|
*
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
* call site.
|
|
23
23
|
*
|
|
24
24
|
* A product with its own visual identity defines its own `[data-theme]`
|
|
25
|
-
* blocks over these
|
|
25
|
+
* blocks over these 116 names and ships them itself, the way the source
|
|
26
26
|
* product does with its five families. This package carries the mechanism and
|
|
27
27
|
* one default, not a catalogue of somebody else's palettes.
|
|
28
28
|
*
|
|
@@ -153,6 +153,11 @@
|
|
|
153
153
|
--token-fontSizeLG: 1rem;
|
|
154
154
|
--token-fontSizeSM: 0.75rem;
|
|
155
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;
|
|
156
161
|
--token-fontSizeXXS: 0.5rem;
|
|
157
162
|
--token-marginXXS: 4px;
|
|
158
163
|
--token-padding: 0.75rem;
|
package/package.json
CHANGED