@lablup/ui-common 0.1.0-alpha.8 → 0.2.0-alpha.15

package/dist/styles/base.css

@@ -1,7 +1,12 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common design tokens
  *
- * The 115 `--token-*` custom properties every component in this package
+ * DEPRECATED since 0.2, removed in 0.3. The token contract is now Astryx's
+ * own token set, themed by `@lablup/ui-common/theme/lablup`. Code that still
+ * reads `--token-*` names can import `@lablup/ui-common/legacy-tokens.css`.
+ *
+ * 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).
  *
@@ -22,7 +27,7 @@
  * call site.
  *
  * A product with its own visual identity defines its own `[data-theme]`
- * blocks over these 115 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.
  *
@@ -61,6 +66,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);
@@ -121,6 +136,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;
@@ -130,6 +146,12 @@
   --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;
@@ -153,6 +175,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;

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

@@ -1,6 +1,10 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common theme tokens: orange-dark
  *
+ * DEPRECATED since 0.2, removed in 0.3. Use the Astryx theme
+ * `@lablup/ui-common/theme/lablup`, which carries light and dark.
+ *
  * Overrides for the subset of the 104-token contract (see
  * ../base.css) that this theme customizes. Import at most one
  * theme file alongside base.css; components never import a

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

@@ -1,6 +1,10 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common theme tokens: orange-light
  *
+ * DEPRECATED since 0.2, removed in 0.3. Use the Astryx theme
+ * `@lablup/ui-common/theme/lablup`, which carries light and dark.
+ *
  * Overrides for the subset of the 104-token contract (see
  * ../base.css) that this theme customizes. Import at most one
  * theme file alongside base.css; components never import a

package/dist/theme/lablup/built/lablup.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/lablup/lablupTheme.ts
+ * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css
+ * CLI: @astryxdesign/cli@0.6.2
+ * Core: @astryxdesign/core@0.6.2
+ */
+
+/// <reference path="./lablup.variants.d.ts" />
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { IconRegistry } from '@astryxdesign/core/Icon';
+export declare const neutralIconRegistry: IconRegistry;
+export declare const lablupTheme: DefinedTheme;