@lablup/ui-common 0.1.0-alpha.7 → 0.1.0-alpha.8

package/README.md

@@ -74,7 +74,7 @@ import "@lablup/ui-common/styles/themes/orange-dark.css";
 
 The package ships the theming mechanism and one default palette, the Lablup
 brand orange. A product with its own visual identity defines its own
-`[data-theme]` blocks over the same 113 token names and ships them itself,
+`[data-theme]` blocks over the same 115 token names and ships them itself,
 rather than the package accumulating everyone's palettes. The source product
 does exactly that with its five families.
 

package/dist/assets/components/StatCard/StatCard.css

@@ -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-fontSizeHeading2,1.75rem);color:var(--token-colorText,#141414);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1}.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}}
+.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-fontSizeHeading2,1.75rem);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

@@ -1,10 +1,16 @@
 /**
  * @lablup/ui-common design tokens
  *
- * The 113 `--token-*` custom properties every component in this package
+ * The 115 `--token-*` custom properties every component in this package
  * reads. This file is the token contract: renaming or removing an entry is
  * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
  *
+ * It also carries one block of element rules, at the end: the scrollbar. A
+ * scrollbar is painted by the browser on a box this package does not own, so
+ * there is no component to hang the rules on and a consumer that wants a
+ * themed bar has nowhere to put one that every scrollable surface inherits.
+ * The rest of the file is custom properties only.
+ *
  * Colour and button values are the Lablup brand default, theme family
  * "orange", colour scheme "light", which is also the one theme this package
  * ships as a stylesheet (`styles/themes/orange-light.css` and its dark
@@ -16,7 +22,7 @@
  * call site.
  *
  * A product with its own visual identity defines its own `[data-theme]`
- * blocks over these 113 names and ships them itself, the way the source
+ * blocks over these 115 names and ships them itself, the way the source
  * product does with its five families. This package carries the mechanism and
  * one default, not a catalogue of somebody else's palettes.
  *
@@ -156,6 +162,13 @@
   --token-paddingXL: 2rem;
   --token-paddingXS: 0.25rem;
   --token-paddingXXS: 0.125rem;
+  /* One size for every theme. A theme family may restyle the track and the
+     thumb, but must not restate the size: `[data-theme="..."]
+     ::-webkit-scrollbar` outranks the global rule on specificity, so a wider
+     bar declared there cannot be corrected from here, and a sidebar rail is
+     the surface that pays for it. `scrollbar.test.ts` keeps it that way. */
+  --token-scrollbarSize: 0.5rem; /* 8px */
+  --token-scrollbarRadius: 0.25rem; /* 4px */
   --token-motionDurationFast: 0.1s;
   --token-motionDurationMid: 0.2s;
   --token-motionDurationSlow: 0.3s;
@@ -187,3 +200,37 @@
   --token-buttonSecondaryShadowHover:
     0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
+
+/* ============================================
+   Scrollbar
+
+   The only element rules in this file. Both halves are needed because the two
+   engines expose different surfaces, and neither one alone themes a bar.
+   ============================================ */
+
+/* Firefox has no ::-webkit pseudo-elements. Both properties are inherited, so
+   declaring them once on the root themes every scrollable descendant, and a
+   surface that hides its own bar (see `Tabs.css`) still overrides them
+   locally. */
+:root {
+  scrollbar-width: thin;
+  scrollbar-color: var(--token-colorBorder, #d9d9d9) transparent;
+}
+
+::-webkit-scrollbar {
+  width: var(--token-scrollbarSize, 0.5rem);
+  height: var(--token-scrollbarSize, 0.5rem);
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--token-colorBorder, #d9d9d9);
+  border-radius: var(--token-scrollbarRadius, 0.25rem);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--token-colorTextTertiary, #737373);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lablup/ui-common",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "description": "Shared, product-neutral UI components and design tokens for Lablup products",
   "license": "Apache-2.0",
   "author": "Lablup Inc.",