@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.21

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 119 `--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,25 +22,38 @@
  * 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 119 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.
  *
  * Every component also gives every token reference here its own inline
  * fallback, so a consumer that imports a component without this stylesheet
- * still gets a rendered (unthemed) result.
+ * still gets a rendered (unthemed) result. Focus indicators are the one
+ * exception, and deliberately so: see below.
  *
  * Those inline fallbacks are NOT all equal to the values above, and no single
- * theme would make them agree: of the 252 references to a theme-defined token,
- * the fallback matches orange-light in 135 and stained-light in 168, and
- * `--token-colorPrimary` alone is written as `#ff7a00` in some components and
- * `#8b5cf6` in others. They were inherited verbatim from the source product,
- * where they were already dead code, since the token is always defined and the
- * fallback never applies.
+ * theme would make them agree. The largest group is `--token-colorPrimary`,
+ * written as `#8b5cf6` at 28 call sites, which is a `stained-light` accent
+ * this package does not ship and does not agree with the `#ff7a00` declared
+ * below. They were inherited verbatim from the source product, where they were
+ * already dead code, since the token is always defined and the fallback never
+ * applies.
  *
  * Consequence: importing a component WITHOUT this stylesheet renders, but not
  * in the documented default palette. Import `styles/base.css`. Aligning the
  * fallbacks is a deliberate visual change and is still out of scope.
+ *
+ * The exception, added for issue #7: a declaration that paints a focus
+ * indicator carries NO colour literal. It reads
+ * `var(--token-focusRingColor, var(--token-colorPrimary))`, or mixes the
+ * accent with the text colour inline, and stops there. A fallback literal
+ * cannot serve a focus ring, because WCAG 2.2 SC 1.4.11 requires 3:1 against
+ * the surface the indicator lands on and a fixed value cannot know that
+ * surface: the `#8b5cf6` these sites used to carry measures 3.85:1 in one
+ * palette and the `#ff7a00` below measures 2.37:1. "Renders unthemed" and
+ * "meets the contrast floor" are not both achievable from a constant, and for
+ * an accessibility affordance the second one wins. Everywhere else the rule in
+ * CONTRIBUTING.md stands unchanged: give the token a fallback.
  */
 
 :root {
@@ -42,6 +61,16 @@
   --token-borderRadiusLG: 0.5rem;
   --token-borderRadiusSM: 0.25rem;
   --token-borderRadiusXL: 0.75rem;
+  /* One height ladder for every form control, so a text field, a picker and a
+     button standing next to each other in a filter row land on the same top
+     and bottom edge. Only `Button` reads it today, at SM and LG; the middle
+     rung is declared with them because a ladder missing its default is not a
+     ladder, and the first control that needs a 40px box would otherwise
+     invent a literal, which is the defect this replaces. rem-based like the
+     rest of the scale, so controls grow with browser zoom (WCAG 1.4.4). */
+  --token-controlHeightSM: 2rem; /* 32px */
+  --token-controlHeight: 2.5rem; /* 40px */
+  --token-controlHeightLG: 2.75rem; /* 44px, the WCAG 2.1 touch target */
   --token-boxShadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
     0 2px 4px 0 rgba(0, 0, 0, 0.02);
@@ -102,6 +131,7 @@
   --token-colorPrimary: #ff7a00;
   --token-colorPrimaryActive: #cc6200;
   --token-colorPrimaryBg: rgba(255, 122, 0, 0.1);
+  --token-colorPrimaryBgHover: rgba(255, 122, 0, 0.16);
   --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2);
   --token-colorSuccess: #007a63;
   --token-colorSuccessActive: #005244;
@@ -111,10 +141,25 @@
   --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
   --token-colorWarning: #9a5d00;
   --token-colorText: #141414;
+  /* Both #767676 rather than the #bfbfbf a disabled or placeholder value is
+   * usually given: that measures 2.2:1 on white, and text a reader is expected
+   * to read (a placeholder naming the field, a disabled value explaining why it
+   * cannot be changed) is not exempt from the 4.5:1 floor. */
+  --token-colorTextDisabled: #767676;
+  --token-colorTextPlaceholder: #767676;
   --token-colorTextQuaternary: #bfbfbf;
   --token-colorTextSecondary: #595959;
   --token-colorTextTertiary: #737373;
-  --token-focusRingColor: #ff7a00;
+  /* Not --token-colorPrimary. That accent is chosen for brand and measures
+   * 2.37:1 against --token-colorFillSecondary here, under the 3:1 floor WCAG
+   * 2.2 SC 1.4.11 sets for the visual indicator of a component state. This is
+   * color-mix(in srgb, #ff7a00 70%, #141414) resolved to a literal, which
+   * measures 4.18:1 at its worst. It is written resolved rather than as a
+   * color-mix() call because a custom property holds an unparsed token stream:
+   * an unsupported color-mix() would substitute successfully and only then
+   * invalidate the outline shorthand at computed-value time, leaving
+   * outline-style: none and no ring at all, with no var() fallback firing. */
+  --token-focusRingColor: #b95b06;
   --token-focusRingOffset: 2px;
   --token-focusRingStyle: solid;
   --token-focusRingWidth: 2px;
@@ -125,6 +170,11 @@
   --token-fontSizeLG: 1rem;
   --token-fontSizeSM: 0.75rem;
   --token-fontSizeXL: 1.25rem;
+  /* The step above XL, for a value that is displayed rather than read as a
+     heading. The ladder had XXS but no XXL, so a component with a large
+     numeric readout had nothing to reach for and took a heading token
+     instead. Both products that define this name already declare 1.5rem. */
+  --token-fontSizeXXL: 1.5rem;
   --token-fontSizeXXS: 0.5rem;
   --token-marginXXS: 4px;
   --token-padding: 0.75rem;
@@ -134,6 +184,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;
@@ -165,3 +222,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/dist/styles/themes/orange-dark.css

@@ -60,6 +60,9 @@
   --token-colorTextSecondary: #b3b3b3;
   --token-colorTextTertiary: #8c8c8c;
   --token-colorWarning: #d89614;
+  /* Left as the brand accent lightened for dark: it already measures 7.00:1 at
+   * its worst against this theme's six surfaces, so the 70% text mix its light
+   * counterpart needs would lower it to 6.42:1 for no benefit. */
   --token-focusRingColor: #ff9729;
   --token-focusRingOffset: 2px;
   --token-focusRingStyle: solid;

package/dist/styles/themes/orange-light.css

@@ -60,7 +60,12 @@
   --token-colorTextSecondary: #595959;
   --token-colorTextTertiary: #737373;
   --token-colorWarning: #9a5d00;
-  --token-focusRingColor: #ff7a00;
+  /* color-mix(in srgb, #ff7a00 70%, #141414) resolved to a literal. The bare
+   * accent measures 2.37:1 against --token-colorFillSecondary, under the 3:1
+   * floor of WCAG 2.2 SC 1.4.11; this measures 4.18:1 at its worst. See the
+   * note on the same token in ../base.css for why it is resolved here rather
+   * than left as a color-mix() call. */
+  --token-focusRingColor: #b95b06;
   --token-focusRingOffset: 2px;
   --token-focusRingStyle: solid;
   --token-focusRingWidth: 2px;

package/package.json

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

package/dist/components/EmptyState/illustrations.d.ts

@@ -1,51 +0,0 @@
-/**
- * EmptyState Illustrations
- *
- * SVG illustration components for different empty state contexts.
- * All illustrations are inline React components for optimal performance.
- * Each component is memoized to prevent unnecessary re-renders.
- */
-interface IllustrationProps {
-    className?: string;
-}
-/**
- * Chat illustration - Speech bubbles with sparkles
- */
-export declare const ChatIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Models illustration - Package/download box
- */
-export declare const ModelsIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Creations illustration - Gallery frame
- */
-export declare const CreationsIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Benchmark illustration - Speedometer
- */
-export declare const BenchmarkIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Logs illustration - Document stack
- */
-export declare const LogsIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Statistics illustration - Chart placeholder
- */
-export declare const StatisticsIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Error illustration - Warning/error state
- */
-export declare const ErrorIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Text illustration - Document with bookmark
- */
-export declare const TextIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Schedule illustration - Calendar with clock
- */
-export declare const ScheduleIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-/**
- * Generic illustration - Placeholder icon
- */
-export declare const GenericIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-export {};