@lablup/ui-common 0.1.0-alpha.1 → 0.1.0-alpha.3

package/README.md

@@ -65,12 +65,19 @@ theme:
 
 ```ts
 // The token contract the components resolve against. Required.
+// It also carries the default palette, so this alone is a working theme.
 import "@lablup/ui-common/styles/base.css";
 
-// One theme family. Import only the ones you ship.
-import "@lablup/ui-common/styles/themes/bliss-light.css";
+// Optional, and only if you switch themes at runtime through [data-theme].
+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,
+rather than the package accumulating everyone's palettes. The source product
+does exactly that with its five families.
+
 Component CSS travels with the component: importing `Button` brings
 `Button.css` with it, so a subpath import pulls that component's styles and no
 others. The two entry points above are the only stylesheets you import by hand,

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

@@ -5,7 +5,7 @@
  * All illustrations are inline React components for optimal performance.
  * Each component is memoized to prevent unnecessary re-renders.
  */
-interface IllustrationProps {
+export interface IllustrationProps {
     className?: string;
 }
 /**
@@ -48,4 +48,3 @@ export declare const ScheduleIllustration: import('react').NamedExoticComponent<
  * Generic illustration - Placeholder icon
  */
 export declare const GenericIllustration: import('react').NamedExoticComponent<IllustrationProps>;
-export {};

package/dist/components/EmptyState/illustrations.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustrations.js","names":[],"sources":["../../../src/components/EmptyState/illustrations.tsx"],"sourcesContent":["/**\n * EmptyState Illustrations\n *\n * SVG illustration components for different empty state contexts.\n * All illustrations are inline React components for optimal performance.\n * Each component is memoized to prevent unnecessary re-renders.\n */\n\nimport { memo } from \"react\";\n\ninterface IllustrationProps {\n  className?: string;\n}\n\n/**\n * Chat illustration - Speech bubbles with sparkles\n */\nexport const ChatIllustration = memo(function ChatIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chat bubble */}\n      <g className=\"illustration-bubble\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"70\"\n          height=\"50\"\n          rx=\"12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M40 80 L50 70 L90 70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Message lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"75\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"65\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Sparkles */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M95 25 L97 32 L104 34 L97 36 L95 43 L93 36 L86 34 L93 32 Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          d=\"M25 15 L26 19 L30 20 L26 21 L25 25 L24 21 L20 20 L24 19 Z\"\n          fill=\"currentColor\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Models illustration - Package/download box\n */\nexport const ModelsIllustration = memo(function ModelsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* 3D box representing model package */}\n      <g className=\"illustration-box\">\n        <path\n          d=\"M60 20 L95 40 L95 80 L60 100 L25 80 L25 40 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M60 20 L60 100\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M25 40 L60 60 L95 40\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n      {/* Download arrow */}\n      <g className=\"illustration-arrow\">\n        <path\n          d=\"M60 45 L60 75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M52 67 L60 75 L68 67\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Creations illustration - Gallery frame\n */\nexport const CreationsIllustration = memo(function CreationsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Gallery frame */}\n      <rect\n        x=\"20\"\n        y=\"25\"\n        width=\"80\"\n        height=\"70\"\n        rx=\"8\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        fill=\"none\"\n      />\n      {/* Image placeholder with mountain and sun */}\n      <g className=\"illustration-image\">\n        <circle cx=\"45\" cy=\"45\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path\n          d=\"M20 80 L40 60 L60 75 L85 50 L100 65 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinejoin=\"round\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Benchmark illustration - Speedometer\n */\nexport const BenchmarkIllustration = memo(function BenchmarkIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 512 512\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Speedometer body */}\n      <path d=\"M92.231,401.523l-24.69,12.044C49.475,381.325,40,345.338,40,308.499c0-26.991,4.977-52.842,14.06-76.683l28.291,13.57c2.79,1.338,5.735,1.972,8.636,1.972c7.453,0,14.608-4.185,18.047-11.355c4.776-9.959,0.576-21.906-9.384-26.683l-27.932-13.398c34.717-56.62,94.784-96.095,164.283-102.505v30.081c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20V93.402c23.828,2.169,46.884,8.237,68.771,18.117c10.065,4.545,21.912,0.066,26.457-9.999c4.545-10.068,0.068-21.913-10-26.458C328.063,60.091,292.659,52.499,256,52.499c-68.38,0-132.667,26.628-181.02,74.98C26.629,175.832,0,240.119,0,308.499c0,50.53,14.998,99.674,43.373,142.115c3.822,5.715,10.141,8.886,16.639,8.886c2.954,0,5.946-0.655,8.757-2.026l41-20c9.928-4.843,14.05-16.816,9.207-26.744C114.133,400.803,102.159,396.682,92.231,401.523z\" />\n      <path d=\"M489.436,203.271c-4.544-10.067-16.387-14.547-26.458-10c-10.067,4.545-14.544,16.39-9.999,26.457C465.601,247.686,472,277.553,472,308.499c0,36.894-9.506,72.939-27.625,105.218l-25.777-12.275c-9.971-4.748-21.906-0.515-26.656,9.459c-4.749,9.972-0.514,21.907,9.459,26.656l42,20c2.763,1.315,5.692,1.944,8.588,1.944c6.5,0,12.82-3.175,16.637-8.886C497.002,408.173,512,359.029,512,308.499C512,271.84,504.408,236.436,489.436,203.271z\" />\n      {/* Speedometer needle - animated */}\n      <g className=\"illustration-needle\">\n        <path d=\"M435.143,129.356c-6.796-6.795-17.463-7.797-25.407-2.384c-29.926,20.398-180.03,122.969-196.162,139.1c-23.394,23.395-23.394,61.459,0,84.854c11.697,11.696,27.063,17.545,42.427,17.545c15.364,0,30.729-5.849,42.427-17.545c16.131-16.132,118.701-166.236,139.1-196.162C442.939,146.821,441.938,136.153,435.143,129.356z M270.142,322.641c-7.797,7.799-20.486,7.799-28.283,0c-7.798-7.797-7.799-20.482-0.004-28.28c6.268-6.194,48.885-36.588,101.319-73.035C306.728,273.76,276.334,316.375,270.142,322.641z\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Logs illustration - Document stack\n */\nexport const LogsIllustration = memo(function LogsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Stacked documents */}\n      <g className=\"illustration-docs\">\n        {/* Back document */}\n        <rect\n          x=\"35\"\n          y=\"20\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.4\"\n        />\n        {/* Middle document */}\n        <rect\n          x=\"30\"\n          y=\"25\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          opacity=\"0.6\"\n        />\n        {/* Front document */}\n        <rect\n          x=\"25\"\n          y=\"30\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"70\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"75\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"65\"\n          x2=\"65\"\n          y2=\"65\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"75\"\n          x2=\"70\"\n          y2=\"75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Statistics illustration - Chart placeholder\n */\nexport const StatisticsIllustration = memo(function StatisticsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chart axes */}\n      <g className=\"illustration-axes\">\n        <line\n          x1=\"25\"\n          y1=\"20\"\n          x2=\"25\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"25\"\n          y1=\"90\"\n          x2=\"95\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bar chart */}\n      <g className=\"illustration-bars\">\n        <rect\n          x=\"35\"\n          y=\"60\"\n          width=\"10\"\n          height=\"25\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.6\"\n        />\n        <rect\n          x=\"50\"\n          y=\"45\"\n          width=\"10\"\n          height=\"40\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.8\"\n        />\n        <rect\n          x=\"65\"\n          y=\"55\"\n          width=\"10\"\n          height=\"30\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.7\"\n        />\n        <rect x=\"80\" y=\"35\" width=\"10\" height=\"50\" rx=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Error illustration - Warning/error state\n */\nexport const ErrorIllustration = memo(function ErrorIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Triangle warning */}\n      <g className=\"illustration-warning\">\n        <path\n          d=\"M60 25 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Exclamation mark */}\n        <line\n          x1=\"60\"\n          y1=\"50\"\n          x2=\"60\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"60\" cy=\"80\" r=\"2.5\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Text illustration - Document with bookmark\n */\nexport const TextIllustration = memo(function TextIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Document */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"25\"\n          y=\"15\"\n          width=\"60\"\n          height=\"80\"\n          rx=\"6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"37\"\n          y1=\"35\"\n          x2=\"73\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"47\"\n          x2=\"68\"\n          y2=\"47\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"59\"\n          x2=\"73\"\n          y2=\"59\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"71\"\n          x2=\"58\"\n          y2=\"71\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bookmark */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M78 10 L78 38 L90 30 L102 38 L102 10 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Schedule illustration - Calendar with clock\n */\nexport const ScheduleIllustration = memo(function ScheduleIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Calendar body */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"65\"\n          height=\"65\"\n          rx=\"8\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Calendar header bar */}\n        <line x1=\"20\" y1=\"48\" x2=\"85\" y2=\"48\" stroke=\"currentColor\" strokeWidth=\"2.5\" />\n        {/* Calendar pins */}\n        <line\n          x1=\"38\"\n          y1=\"25\"\n          x2=\"38\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"67\"\n          y1=\"25\"\n          x2=\"67\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        {/* Calendar grid dots */}\n        <circle cx=\"35\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"86\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n      </g>\n      {/* Clock overlay */}\n      <g className=\"illustration-sparkle\">\n        <circle\n          cx=\"82\"\n          cy=\"80\"\n          r=\"20\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"var(--token-colorBgContainer, #fff)\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"82\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"92\"\n          y2=\"80\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"82\" cy=\"80\" r=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Generic illustration - Placeholder icon\n */\nexport const GenericIllustration = memo(function GenericIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Simple folder/file icon */}\n      <g className=\"illustration-folder\">\n        <path\n          d=\"M25 35 L25 85 C25 90 28 92 33 92 L87 92 C92 92 95 90 95 85 L95 45 C95 40 92 38 87 38 L60 38 L52 28 L33 28 C28 28 25 30 25 35 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"illustrations.js","names":[],"sources":["../../../src/components/EmptyState/illustrations.tsx"],"sourcesContent":["/**\n * EmptyState Illustrations\n *\n * SVG illustration components for different empty state contexts.\n * All illustrations are inline React components for optimal performance.\n * Each component is memoized to prevent unnecessary re-renders.\n */\n\nimport { memo } from \"react\";\n\nexport interface IllustrationProps {\n  className?: string;\n}\n\n/**\n * Chat illustration - Speech bubbles with sparkles\n */\nexport const ChatIllustration = memo(function ChatIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chat bubble */}\n      <g className=\"illustration-bubble\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"70\"\n          height=\"50\"\n          rx=\"12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M40 80 L50 70 L90 70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Message lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"75\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"65\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Sparkles */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M95 25 L97 32 L104 34 L97 36 L95 43 L93 36 L86 34 L93 32 Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          d=\"M25 15 L26 19 L30 20 L26 21 L25 25 L24 21 L20 20 L24 19 Z\"\n          fill=\"currentColor\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Models illustration - Package/download box\n */\nexport const ModelsIllustration = memo(function ModelsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* 3D box representing model package */}\n      <g className=\"illustration-box\">\n        <path\n          d=\"M60 20 L95 40 L95 80 L60 100 L25 80 L25 40 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M60 20 L60 100\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M25 40 L60 60 L95 40\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n      {/* Download arrow */}\n      <g className=\"illustration-arrow\">\n        <path\n          d=\"M60 45 L60 75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <path\n          d=\"M52 67 L60 75 L68 67\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Creations illustration - Gallery frame\n */\nexport const CreationsIllustration = memo(function CreationsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Gallery frame */}\n      <rect\n        x=\"20\"\n        y=\"25\"\n        width=\"80\"\n        height=\"70\"\n        rx=\"8\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        fill=\"none\"\n      />\n      {/* Image placeholder with mountain and sun */}\n      <g className=\"illustration-image\">\n        <circle cx=\"45\" cy=\"45\" r=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path\n          d=\"M20 80 L40 60 L60 75 L85 50 L100 65 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinejoin=\"round\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Benchmark illustration - Speedometer\n */\nexport const BenchmarkIllustration = memo(function BenchmarkIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 512 512\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Speedometer body */}\n      <path d=\"M92.231,401.523l-24.69,12.044C49.475,381.325,40,345.338,40,308.499c0-26.991,4.977-52.842,14.06-76.683l28.291,13.57c2.79,1.338,5.735,1.972,8.636,1.972c7.453,0,14.608-4.185,18.047-11.355c4.776-9.959,0.576-21.906-9.384-26.683l-27.932-13.398c34.717-56.62,94.784-96.095,164.283-102.505v30.081c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20V93.402c23.828,2.169,46.884,8.237,68.771,18.117c10.065,4.545,21.912,0.066,26.457-9.999c4.545-10.068,0.068-21.913-10-26.458C328.063,60.091,292.659,52.499,256,52.499c-68.38,0-132.667,26.628-181.02,74.98C26.629,175.832,0,240.119,0,308.499c0,50.53,14.998,99.674,43.373,142.115c3.822,5.715,10.141,8.886,16.639,8.886c2.954,0,5.946-0.655,8.757-2.026l41-20c9.928-4.843,14.05-16.816,9.207-26.744C114.133,400.803,102.159,396.682,92.231,401.523z\" />\n      <path d=\"M489.436,203.271c-4.544-10.067-16.387-14.547-26.458-10c-10.067,4.545-14.544,16.39-9.999,26.457C465.601,247.686,472,277.553,472,308.499c0,36.894-9.506,72.939-27.625,105.218l-25.777-12.275c-9.971-4.748-21.906-0.515-26.656,9.459c-4.749,9.972-0.514,21.907,9.459,26.656l42,20c2.763,1.315,5.692,1.944,8.588,1.944c6.5,0,12.82-3.175,16.637-8.886C497.002,408.173,512,359.029,512,308.499C512,271.84,504.408,236.436,489.436,203.271z\" />\n      {/* Speedometer needle - animated */}\n      <g className=\"illustration-needle\">\n        <path d=\"M435.143,129.356c-6.796-6.795-17.463-7.797-25.407-2.384c-29.926,20.398-180.03,122.969-196.162,139.1c-23.394,23.395-23.394,61.459,0,84.854c11.697,11.696,27.063,17.545,42.427,17.545c15.364,0,30.729-5.849,42.427-17.545c16.131-16.132,118.701-166.236,139.1-196.162C442.939,146.821,441.938,136.153,435.143,129.356z M270.142,322.641c-7.797,7.799-20.486,7.799-28.283,0c-7.798-7.797-7.799-20.482-0.004-28.28c6.268-6.194,48.885-36.588,101.319-73.035C306.728,273.76,276.334,316.375,270.142,322.641z\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Logs illustration - Document stack\n */\nexport const LogsIllustration = memo(function LogsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Stacked documents */}\n      <g className=\"illustration-docs\">\n        {/* Back document */}\n        <rect\n          x=\"35\"\n          y=\"20\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.4\"\n        />\n        {/* Middle document */}\n        <rect\n          x=\"30\"\n          y=\"25\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          opacity=\"0.6\"\n        />\n        {/* Front document */}\n        <rect\n          x=\"25\"\n          y=\"30\"\n          width=\"60\"\n          height=\"75\"\n          rx=\"4\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"35\"\n          y1=\"45\"\n          x2=\"70\"\n          y2=\"45\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"55\"\n          x2=\"75\"\n          y2=\"55\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"65\"\n          x2=\"65\"\n          y2=\"65\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"35\"\n          y1=\"75\"\n          x2=\"70\"\n          y2=\"75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Statistics illustration - Chart placeholder\n */\nexport const StatisticsIllustration = memo(function StatisticsIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Chart axes */}\n      <g className=\"illustration-axes\">\n        <line\n          x1=\"25\"\n          y1=\"20\"\n          x2=\"25\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"25\"\n          y1=\"90\"\n          x2=\"95\"\n          y2=\"90\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bar chart */}\n      <g className=\"illustration-bars\">\n        <rect\n          x=\"35\"\n          y=\"60\"\n          width=\"10\"\n          height=\"25\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.6\"\n        />\n        <rect\n          x=\"50\"\n          y=\"45\"\n          width=\"10\"\n          height=\"40\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.8\"\n        />\n        <rect\n          x=\"65\"\n          y=\"55\"\n          width=\"10\"\n          height=\"30\"\n          rx=\"2\"\n          fill=\"currentColor\"\n          opacity=\"0.7\"\n        />\n        <rect x=\"80\" y=\"35\" width=\"10\" height=\"50\" rx=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Error illustration - Warning/error state\n */\nexport const ErrorIllustration = memo(function ErrorIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Triangle warning */}\n      <g className=\"illustration-warning\">\n        <path\n          d=\"M60 25 L100 95 L20 95 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Exclamation mark */}\n        <line\n          x1=\"60\"\n          y1=\"50\"\n          x2=\"60\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"60\" cy=\"80\" r=\"2.5\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Text illustration - Document with bookmark\n */\nexport const TextIllustration = memo(function TextIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Document */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"25\"\n          y=\"15\"\n          width=\"60\"\n          height=\"80\"\n          rx=\"6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Text lines */}\n        <line\n          x1=\"37\"\n          y1=\"35\"\n          x2=\"73\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"47\"\n          x2=\"68\"\n          y2=\"47\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"59\"\n          x2=\"73\"\n          y2=\"59\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"37\"\n          y1=\"71\"\n          x2=\"58\"\n          y2=\"71\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </g>\n      {/* Bookmark */}\n      <g className=\"illustration-sparkle\">\n        <path\n          d=\"M78 10 L78 38 L90 30 L102 38 L102 10 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Schedule illustration - Calendar with clock\n */\nexport const ScheduleIllustration = memo(function ScheduleIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Calendar body */}\n      <g className=\"illustration-docs\">\n        <rect\n          x=\"20\"\n          y=\"30\"\n          width=\"65\"\n          height=\"65\"\n          rx=\"8\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n        />\n        {/* Calendar header bar */}\n        <line x1=\"20\" y1=\"48\" x2=\"85\" y2=\"48\" stroke=\"currentColor\" strokeWidth=\"2.5\" />\n        {/* Calendar pins */}\n        <line\n          x1=\"38\"\n          y1=\"25\"\n          x2=\"38\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"67\"\n          y1=\"25\"\n          x2=\"67\"\n          y2=\"35\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          strokeLinecap=\"round\"\n        />\n        {/* Calendar grid dots */}\n        <circle cx=\"35\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"58\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"52\" cy=\"72\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n        <circle cx=\"35\" cy=\"86\" r=\"2.5\" fill=\"currentColor\" opacity=\"0.5\" />\n      </g>\n      {/* Clock overlay */}\n      <g className=\"illustration-sparkle\">\n        <circle\n          cx=\"82\"\n          cy=\"80\"\n          r=\"20\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          fill=\"var(--token-colorBgContainer, #fff)\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"82\"\n          y2=\"70\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <line\n          x1=\"82\"\n          y1=\"80\"\n          x2=\"92\"\n          y2=\"80\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n        <circle cx=\"82\" cy=\"80\" r=\"2\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n});\n\n/**\n * Generic illustration - Placeholder icon\n */\nexport const GenericIllustration = memo(function GenericIllustration({\n  className,\n}: IllustrationProps) {\n  return (\n    <svg\n      width=\"120\"\n      height=\"120\"\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      {/* Simple folder/file icon */}\n      <g className=\"illustration-folder\">\n        <path\n          d=\"M25 35 L25 85 C25 90 28 92 33 92 L87 92 C92 92 95 90 95 85 L95 45 C95 40 92 38 87 38 L60 38 L52 28 L33 28 C28 28 25 30 25 35 Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n    </svg>\n  );\n});\n"],"mappings":"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"}

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

@@ -3,3 +3,14 @@
  */
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';
+/**
+ * The illustrations are also exported on their own.
+ *
+ * They shipped inside the package from the first release but no barrel named
+ * them, so a consumer that composes its own empty state, which is the case
+ * `EmptyState` cannot cover, had no way to reach one. Same shape as the
+ * stylesheets in 0.1.0-alpha.1: present in the tarball, addressable by
+ * nothing.
+ */
+export { ChatIllustration, ModelsIllustration, CreationsIllustration, BenchmarkIllustration, LogsIllustration, StatisticsIllustration, ErrorIllustration, TextIllustration, ScheduleIllustration, GenericIllustration, } from './illustrations';
+export type { IllustrationProps } from './illustrations';

package/dist/components/EmptyState/index.js

@@ -1,2 +1,3 @@
-import { EmptyState as e } from "./EmptyState2.js";
-export { e as EmptyState };
+import { BenchmarkIllustration as e, ChatIllustration as t, CreationsIllustration as n, ErrorIllustration as r, GenericIllustration as i, LogsIllustration as a, ModelsIllustration as o, ScheduleIllustration as s, StatisticsIllustration as c, TextIllustration as l } from "./illustrations.js";
+import { EmptyState as u } from "./EmptyState2.js";
+export { e as BenchmarkIllustration, t as ChatIllustration, n as CreationsIllustration, u as EmptyState, r as ErrorIllustration, i as GenericIllustration, a as LogsIllustration, o as ModelsIllustration, s as ScheduleIllustration, c as StatisticsIllustration, l as TextIllustration };

package/dist/index.d.ts

@@ -6,9 +6,11 @@
  * `@lablup/ui-common/components/<Name>` when you want the smallest
  * possible graph (see the component subpath exports in package.json).
  *
- * Styling is opt-in and lives in a separate entry point:
- * `@lablup/ui-common/styles/base.css` (required) plus at most one
- * `@lablup/ui-common/styles/themes/<theme>.css` (optional).
+ * Component CSS travels with the component. What stays opt-in is the palette:
+ * `@lablup/ui-common/styles/base.css` (required, and the default theme on its
+ * own) plus `styles/themes/orange-dark.css` if you switch through
+ * `[data-theme]`. A product with its own identity ships its own themes over
+ * the same token names.
  */
 export * from './components/BaseCard';
 export * from './components/Badge';

package/dist/index.js

@@ -3,22 +3,23 @@ import { Badge as t } from "./components/Badge/Badge2.js";
 import { Button as n } from "./components/Button/Button2.js";
 import { DataTable as r } from "./components/DataTable/DataTable2.js";
 import { Drawer as i } from "./components/Drawer/Drawer2.js";
-import { EmptyState as a } from "./components/EmptyState/EmptyState2.js";
-import { ErrorState as o } from "./components/ErrorState/ErrorState2.js";
-import { PageHeader as s } from "./components/PageHeader/PageHeader2.js";
-import { PageLayout as c } from "./components/PageLayout/PageLayout2.js";
-import { ProgressBar as l } from "./components/ProgressBar/ProgressBar2.js";
-import { Skeleton as u } from "./components/Skeleton/Skeleton2.js";
-import { SkeletonCard as d } from "./components/Skeleton/SkeletonCard2.js";
-import { SkeletonText as f } from "./components/Skeleton/SkeletonText2.js";
-import { SkeletonChart as p } from "./components/Skeleton/SkeletonChart2.js";
-import { SkeletonRow as m } from "./components/Skeleton/SkeletonRow2.js";
-import { SmoothHeight as h } from "./components/SmoothHeight/SmoothHeight2.js";
-import { usePrefersReducedMotion as g } from "./hooks/usePrefersReducedMotion.js";
-import { StatCard as _ } from "./components/StatCard/StatCard2.js";
-import { formatCompactNumber as v } from "./components/StatCard/formatters.js";
-import { StatusTag as y } from "./components/StatusTag/StatusTag2.js";
-import { TAG_CONFIG as b } from "./components/Tabs/tabTags.js";
-import { Tabs as x } from "./components/Tabs/Tabs2.js";
-import { Tooltip as S } from "./components/Tooltip/Tooltip2.js";
-export { t as Badge, e as BaseCard, n as Button, r as DataTable, i as Drawer, a as EmptyState, o as ErrorState, s as PageHeader, c as PageLayout, l as ProgressBar, u as Skeleton, d as SkeletonCard, p as SkeletonChart, m as SkeletonRow, f as SkeletonText, h as SmoothHeight, _ as StatCard, y as StatusTag, b as TAG_CONFIG, x as Tabs, S as Tooltip, v as formatCompactNumber, g as usePrefersReducedMotion };
+import { BenchmarkIllustration as a, ChatIllustration as o, CreationsIllustration as s, ErrorIllustration as c, GenericIllustration as l, LogsIllustration as u, ModelsIllustration as d, ScheduleIllustration as f, StatisticsIllustration as p, TextIllustration as m } from "./components/EmptyState/illustrations.js";
+import { EmptyState as h } from "./components/EmptyState/EmptyState2.js";
+import { ErrorState as g } from "./components/ErrorState/ErrorState2.js";
+import { PageHeader as _ } from "./components/PageHeader/PageHeader2.js";
+import { PageLayout as v } from "./components/PageLayout/PageLayout2.js";
+import { ProgressBar as y } from "./components/ProgressBar/ProgressBar2.js";
+import { Skeleton as b } from "./components/Skeleton/Skeleton2.js";
+import { SkeletonCard as x } from "./components/Skeleton/SkeletonCard2.js";
+import { SkeletonText as S } from "./components/Skeleton/SkeletonText2.js";
+import { SkeletonChart as C } from "./components/Skeleton/SkeletonChart2.js";
+import { SkeletonRow as w } from "./components/Skeleton/SkeletonRow2.js";
+import { SmoothHeight as T } from "./components/SmoothHeight/SmoothHeight2.js";
+import { usePrefersReducedMotion as E } from "./hooks/usePrefersReducedMotion.js";
+import { StatCard as D } from "./components/StatCard/StatCard2.js";
+import { formatCompactNumber as O } from "./components/StatCard/formatters.js";
+import { StatusTag as k } from "./components/StatusTag/StatusTag2.js";
+import { TAG_CONFIG as A } from "./components/Tabs/tabTags.js";
+import { Tabs as j } from "./components/Tabs/Tabs2.js";
+import { Tooltip as M } from "./components/Tooltip/Tooltip2.js";
+export { t as Badge, e as BaseCard, a as BenchmarkIllustration, n as Button, o as ChatIllustration, s as CreationsIllustration, r as DataTable, i as Drawer, h as EmptyState, c as ErrorIllustration, g as ErrorState, l as GenericIllustration, u as LogsIllustration, d as ModelsIllustration, _ as PageHeader, v as PageLayout, y as ProgressBar, f as ScheduleIllustration, b as Skeleton, x as SkeletonCard, C as SkeletonChart, w as SkeletonRow, S as SkeletonText, T as SmoothHeight, D as StatCard, p as StatisticsIllustration, k as StatusTag, A as TAG_CONFIG, j as Tabs, m as TextIllustration, M as Tooltip, O as formatCompactNumber, E as usePrefersReducedMotion };

package/dist/styles/base.css

@@ -5,30 +5,36 @@
  * reads. This file is the token contract: renaming or removing an entry is
  * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
  *
- * Values are the resolved defaults of the source product's default theme
- * (theme family "stained", color scheme "light"), taken from that product's
- * `src/themes/base.css` (structural tokens: spacing, radius, motion, type
- * scale, focus ring, z-index) and `src/themes/tokens/stained-light.css`
- * (color and button tokens). A handful of tokens that no source theme
- * ever defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`)
- * are given the same literal fallback value the component CSS already
- * carries at its call site.
+ * 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
+ * counterpart). Structural tokens (spacing, radius, motion, type scale, focus
+ * ring, z-index) are theme-independent and were taken from the source
+ * product's `src/themes/base.css`. A handful of tokens that no theme ever
+ * defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`) are given
+ * the same literal fallback value the component CSS already carries at its
+ * 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
+ * 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.
  *
- * Those inline fallbacks are NOT all equal to the values above. Roughly 143
- * of them were inherited verbatim from the source product, where they predate
- * current theme and were already dead code (the token is always defined, so
- * the fallback never applies). The most visible divergence is
- * `--token-colorPrimary`, whose call-site fallback is the older orange
- * `#ff7a00` rather than the current `#8b5cf6`.
+ * 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.
  *
  * 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 was left out of the extraction,
- * which was required to preserve current rendering exactly.
+ * fallbacks is a deliberate visual change and is still out of scope.
  */
 
 :root {
@@ -55,37 +61,29 @@
   --token-buttonGhostBackdrop: none;
   --token-buttonGhostBg: transparent;
   --token-buttonGhostBgActive: #f5f5f5;
-  --token-buttonGhostBgHover: rgba(139, 92, 246, 0.06);
+  --token-buttonGhostBgHover: rgba(255, 122, 0, 0.06);
   --token-buttonGhostBorder: 1px solid transparent;
   --token-buttonGhostBorderHover: 1px solid transparent;
   --token-buttonGhostShadow: none;
   --token-buttonGhostShadowHover: none;
   --token-buttonPrimaryBackdrop: none;
-  --token-buttonPrimaryBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #8b5cf6;
-  --token-buttonPrimaryBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #7c3aed;
+  --token-buttonPrimaryBg: var(--token-colorPrimary);
+  --token-buttonPrimaryBgHover: #e86e00;
   --token-buttonPrimaryBorder: none;
-  --token-buttonPrimaryShadow:
-    0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-buttonPrimaryShadowHover:
-    0 4px 10px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
+  --token-buttonPrimaryShadow: 0 2px 4px rgba(255, 122, 0, 0.2);
+  --token-buttonPrimaryShadowHover: 0 4px 8px rgba(255, 122, 0, 0.25);
   --token-buttonSecondaryBackdrop: none;
-  --token-buttonSecondaryBg: rgba(139, 92, 246, 0.04);
+  --token-buttonSecondaryBg: transparent;
   --token-buttonSecondaryBgActive: #f5f5f5;
-  --token-buttonSecondaryBgHover: rgba(139, 92, 246, 0.08);
-  --token-buttonSecondaryBorder: 1px solid rgba(139, 92, 246, 0.2);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(139, 92, 246, 0.3);
-  --token-buttonSecondaryShadow:
-    0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --token-buttonSecondaryBgHover: rgba(255, 122, 0, 0.06);
+  --token-buttonSecondaryBorder: 1px solid var(--token-colorBorder);
+  --token-buttonSecondaryBorderHover: 1px solid rgba(255, 122, 0, 0.3);
+  --token-buttonSecondaryShadow: none;
   --token-buttonSuccessBackdrop: none;
-  --token-buttonSuccessBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #007a63;
-  --token-buttonSuccessBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #006654;
+  --token-buttonSuccessBg: var(--token-colorSuccess);
+  --token-buttonSuccessBgHover: #006654;
   --token-buttonSuccessBorder: none;
-  --token-buttonSuccessShadow:
-    0 2px 6px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  --token-buttonSuccessShadow: 0 2px 4px rgba(0, 189, 155, 0.2);
   --token-colorBgContainer: #ffffff;
   --token-colorBgElevated: #ffffff;
   --token-colorBgLayout: #f5f5f5;
@@ -99,12 +97,12 @@
   --token-colorFillTertiary: #f9fafb;
   --token-colorError: #c82333;
   --token-colorInfo: #0066cc;
-  --token-colorLink: #8b5cf6;
+  --token-colorLink: #ff7a00;
   --token-colorLinkHover: #7c3aed;
-  --token-colorPrimary: #8b5cf6;
-  --token-colorPrimaryActive: #6d28d9;
-  --token-colorPrimaryBg: rgba(139, 92, 246, 0.1);
-  --token-colorPrimaryBorder: rgba(139, 92, 246, 0.2);
+  --token-colorPrimary: #ff7a00;
+  --token-colorPrimaryActive: #cc6200;
+  --token-colorPrimaryBg: rgba(255, 122, 0, 0.1);
+  --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2);
   --token-colorSuccess: #007a63;
   --token-colorSuccessActive: #005244;
   --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
@@ -116,7 +114,7 @@
   --token-colorTextQuaternary: #bfbfbf;
   --token-colorTextSecondary: #595959;
   --token-colorTextTertiary: #737373;
-  --token-focusRingColor: #8b5cf6;
+  --token-focusRingColor: #ff7a00;
   --token-focusRingOffset: 2px;
   --token-focusRingStyle: solid;
   --token-focusRingWidth: 2px;
@@ -141,9 +139,9 @@
   --token-motionDurationSlow: 0.3s;
   --token-themeTransitionDuration: 0.25s;
   --token-themeTransitionTiming: ease-in-out;
-  --token-tabActiveBg: rgba(139, 92, 246, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
-  --token-tabHoverBg: #f3f4f6;
+  --token-tabActiveBg: rgba(255, 122, 0, 0.1);
+  --token-tabFocusShadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
+  --token-tabHoverBg: var(--token-colorFillSecondary);
   --token-zIndexDrawer: 1100;
   --token-zIndexDrawerContent: 1101;
   --token-zIndexPopover: 1150;

package/package.json

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

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

@@ -1,123 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: bliss-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
- * theme file themselves.
- */
-
-[data-theme="bliss-dark"] {
-  --token-boxShadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --token-boxShadowSecondary: 0 2px 10px rgba(0, 0, 0, 0.4);
-  --token-buttonActiveTransform: translateY(1px);
-  --token-buttonBorderRadius: 3px;
-  --token-buttonDangerBg: linear-gradient(
-    180deg,
-    #ff7070 0%,
-    #ff5c5c 45%,
-    #e04040 100%
-  );
-  --token-buttonDangerBgActive: #cc3333;
-  --token-buttonDangerBgHover: linear-gradient(
-    180deg,
-    #ff8585 0%,
-    #ff7070 45%,
-    #ff5c5c 100%
-  );
-  --token-buttonDangerBorder: 1px solid #b52828;
-  --token-buttonDangerShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
-  --token-buttonDangerText: white;
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgActive: rgba(255, 255, 255, 0.1);
-  --token-buttonGhostBgHover: rgba(255, 255, 255, 0.06);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostBorderHover: 1px solid rgba(255, 255, 255, 0.1);
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonHoverTransform: none;
-  --token-buttonPrimaryBg: linear-gradient(
-    180deg,
-    #5a96f7 0%,
-    #4b8bf5 45%,
-    #3570d4 100%
-  );
-  --token-buttonPrimaryBgHover: linear-gradient(
-    180deg,
-    #6ba3f5 0%,
-    #5a96f7 45%,
-    #4b8bf5 100%
-  );
-  --token-buttonPrimaryBorder: 1px solid #1b4aaf;
-  --token-buttonPrimaryShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
-  --token-buttonPrimaryShadowHover:
-    inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.45);
-  --token-buttonSecondaryBackdrop: none;
-  --token-buttonSecondaryBg: linear-gradient(180deg, #3a3e48 0%, #2e323c 100%);
-  --token-buttonSecondaryBgActive: linear-gradient(
-    180deg,
-    #1e2228 0%,
-    #262a32 8%,
-    #282c34 94%,
-    #2e323c 100%
-  );
-  --token-buttonSecondaryBgHover: linear-gradient(180deg, #444854 0%, #3a3e48 100%);
-  --token-buttonSecondaryBorder: 1px solid #4a4e58;
-  --token-buttonSecondaryBorderHover: 1px solid #5a5e68;
-  --token-buttonSecondaryShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
-    0 1px 2px rgba(0, 0, 0, 0.3);
-  --token-buttonSuccessBg: linear-gradient(
-    180deg,
-    #5cbf60 0%,
-    #4caf50 45%,
-    #43a047 100%
-  );
-  --token-buttonSuccessBgHover: linear-gradient(
-    180deg,
-    #6dcd70 0%,
-    #5cbf60 45%,
-    #4caf50 100%
-  );
-  --token-buttonSuccessBorder: 1px solid #2e7d32;
-  --token-buttonSuccessShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
-  --token-colorBgContainer: #22262e;
-  --token-colorBgElevated: #2a2e38;
-  --token-colorBgLayout: #1a1d24;
-  --token-colorBorder: #3a3e48;
-  --token-colorBorderSecondary: #2e323c;
-  --token-colorError: #ff5c5c;
-  --token-colorFillQuaternary: rgba(255, 255, 255, 0.02);
-  --token-colorFillSecondary: rgba(255, 255, 255, 0.06);
-  --token-colorFillTertiary: rgba(255, 255, 255, 0.04);
-  --token-colorInfo: #4b8bf5;
-  --token-colorLink: #4b8bf5;
-  --token-colorPrimary: #4b8bf5;
-  --token-colorPrimaryActive: #245edc;
-  --token-colorPrimaryBg: rgba(75, 139, 245, 0.12);
-  --token-colorPrimaryBorder: rgba(75, 139, 245, 0.3);
-  --token-colorSuccess: #4caf50;
-  --token-colorSuccessActive: #43a047;
-  --token-colorSuccessBg: rgba(76, 175, 80, 0.12);
-  --token-colorSuccessBorder: rgba(76, 175, 80, 0.4);
-  --token-colorSuccessBorderHover: rgba(76, 175, 80, 0.6);
-  --token-colorSuccessBoxShadow: 0 2px 6px rgba(76, 175, 80, 0.2);
-  --token-colorText: #e8e6e0;
-  --token-colorTextSecondary: #b5b3ac;
-  --token-colorTextTertiary: #908e88;
-  --token-colorWarning: #ffb74d;
-  --token-focusRingColor: #4b8bf5;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-fontFamily:
-    "Tahoma", "Gulim", system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans",
-    "Pretendard Variable", "Segoe UI", Roboto, sans-serif;
-  --token-tabActiveBg: rgba(75, 139, 245, 0.1);
-  --token-tabFocusShadow: 0 0 0 2px rgba(75, 139, 245, 0.2);
-  --token-tabHoverBg: rgba(255, 255, 255, 0.06);
-}

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

@@ -1,123 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: bliss-light
- *
- * 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
- * theme file themselves.
- */
-
-[data-theme="bliss-light"] {
-  --token-boxShadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  --token-boxShadowSecondary: 0 2px 8px rgba(0, 0, 0, 0.15);
-  --token-buttonActiveTransform: translateY(1px);
-  --token-buttonBorderRadius: 3px;
-  --token-buttonDangerBg: linear-gradient(
-    180deg,
-    #e05050 0%,
-    #c00000 45%,
-    #a30000 100%
-  );
-  --token-buttonDangerBgActive: #a30000;
-  --token-buttonDangerBgHover: linear-gradient(
-    180deg,
-    #ea6060 0%,
-    #d01010 45%,
-    #c00000 100%
-  );
-  --token-buttonDangerBorder: 1px solid #8b0000;
-  --token-buttonDangerShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-  --token-buttonDangerText: white;
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgActive: rgba(36, 94, 220, 0.12);
-  --token-buttonGhostBgHover: rgba(36, 94, 220, 0.06);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostBorderHover: 1px solid rgba(36, 94, 220, 0.2);
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonHoverTransform: none;
-  --token-buttonPrimaryBg: linear-gradient(
-    180deg,
-    #4f8fef 0%,
-    #245edc 45%,
-    #1b4aaf 100%
-  );
-  --token-buttonPrimaryBgHover: linear-gradient(
-    180deg,
-    #6ba3f5 0%,
-    #3b7aee 45%,
-    #245edc 100%
-  );
-  --token-buttonPrimaryBorder: 1px solid #003ca0;
-  --token-buttonPrimaryShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-  --token-buttonPrimaryShadowHover:
-    inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
-  --token-buttonSecondaryBackdrop: none;
-  --token-buttonSecondaryBg: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
-  --token-buttonSecondaryBgActive: linear-gradient(
-    180deg,
-    rgba(205, 202, 195, 1) 0%,
-    rgba(227, 227, 219, 1) 8%,
-    rgba(229, 229, 222, 1) 94%,
-    rgba(242, 242, 241, 1) 100%
-  );
-  --token-buttonSecondaryBgHover: linear-gradient(180deg, #ffffff 0%, #f1efe2 100%);
-  --token-buttonSecondaryBorder: 1px solid #aca899;
-  --token-buttonSecondaryBorderHover: 1px solid #8e8b7a;
-  --token-buttonSecondaryShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.08),
-    0 1px 0 rgba(0, 0, 0, 0.05);
-  --token-buttonSuccessBg: linear-gradient(
-    180deg,
-    #5cad4e 0%,
-    #3c8d2f 45%,
-    #2d7a1e 100%
-  );
-  --token-buttonSuccessBgHover: linear-gradient(
-    180deg,
-    #6dbd5e 0%,
-    #4a9d3d 45%,
-    #3c8d2f 100%
-  );
-  --token-buttonSuccessBorder: 1px solid #1f5a14;
-  --token-buttonSuccessShadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-  --token-colorBgContainer: #ffffff;
-  --token-colorBgElevated: #ffffff;
-  --token-colorBgLayout: #ece9d8;
-  --token-colorBorder: #aca899;
-  --token-colorBorderSecondary: #d2cfc3;
-  --token-colorError: #c00000;
-  --token-colorFillQuaternary: #faf9f5;
-  --token-colorFillSecondary: #f1efe2;
-  --token-colorFillTertiary: #f5f3ea;
-  --token-colorInfo: #245edc;
-  --token-colorLink: #245edc;
-  --token-colorPrimary: #245edc;
-  --token-colorPrimaryActive: #1b4aaf;
-  --token-colorPrimaryBg: #d6e4f9;
-  --token-colorPrimaryBorder: rgba(36, 94, 220, 0.25);
-  --token-colorSuccess: #2d7a1e;
-  --token-colorSuccessActive: #1f5a14;
-  --token-colorSuccessBg: rgba(60, 141, 47, 0.06);
-  --token-colorSuccessBorder: rgba(60, 141, 47, 0.4);
-  --token-colorSuccessBorderHover: rgba(60, 141, 47, 0.6);
-  --token-colorSuccessBoxShadow: 0 2px 6px rgba(60, 141, 47, 0.15);
-  --token-colorText: #000000;
-  --token-colorTextSecondary: #4d4d4d;
-  --token-colorTextTertiary: #6e6e6e;
-  --token-colorWarning: #9a5700;
-  --token-focusRingColor: #245edc;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-fontFamily:
-    "Tahoma", "Gulim", system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans",
-    "Pretendard Variable", "Segoe UI", Roboto, sans-serif;
-  --token-tabActiveBg: rgba(36, 94, 220, 0.08);
-  --token-tabFocusShadow: 0 0 0 2px rgba(36, 94, 220, 0.15);
-  --token-tabHoverBg: #f1efe2;
-}

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

@@ -1,124 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: glass-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
- * theme file themselves.
- */
-
-[data-theme="glass-dark"] {
-  --token-boxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
-  --token-boxShadowSecondary:
-    0 4px 12px 0 rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --token-buttonActiveTransform: scale(0.97);
-  --token-buttonBorderRadius: 624.9375rem;
-  --token-buttonDangerBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.15) 0%,
-      rgba(255, 255, 255, 0.04) 40%,
-      transparent 100%
-    ),
-    #ff453a;
-  --token-buttonDangerBgActive: #e03e35;
-  --token-buttonDangerBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    #ff5c54;
-  --token-buttonDangerBorder: 1px solid rgba(255, 255, 255, 0.1);
-  --token-buttonDangerShadow: 0 1px 3px rgba(255, 69, 58, 0.25);
-  --token-buttonDangerText: white;
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgActive: rgba(255, 255, 255, 0.12);
-  --token-buttonGhostBgHover: rgba(255, 255, 255, 0.08);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostBorderHover: 1px solid rgba(255, 255, 255, 0.06);
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonHoverTransform: translateY(-1px);
-  --token-buttonPrimaryBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.15) 0%,
-      rgba(255, 255, 255, 0.04) 40%,
-      transparent 100%
-    ),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    #409cff;
-  --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.1);
-  --token-buttonPrimaryShadow: 0 1px 3px rgba(10, 132, 255, 0.25);
-  --token-buttonPrimaryShadowHover: 0 3px 8px rgba(10, 132, 255, 0.35);
-  --token-buttonSecondaryBackdrop: blur(12px);
-  --token-buttonSecondaryBg: rgba(255, 255, 255, 0.1);
-  --token-buttonSecondaryBgActive: rgba(255, 255, 255, 0.18);
-  --token-buttonSecondaryBgHover: rgba(255, 255, 255, 0.14);
-  --token-buttonSecondaryBorder: 1px solid rgba(255, 255, 255, 0.08);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(255, 255, 255, 0.12);
-  --token-buttonSecondaryShadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-  --token-buttonSuccessBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.15) 0%,
-      rgba(255, 255, 255, 0.04) 40%,
-      transparent 100%
-    ),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    #30db75;
-  --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.1);
-  --token-buttonSuccessShadow: 0 1px 3px rgba(50, 215, 75, 0.25);
-  --token-colorBgContainer: rgba(28, 28, 30, 0.92);
-  --token-colorBgElevated: rgba(44, 44, 46, 0.95);
-  --token-colorBgLayout: rgba(0, 0, 0, 0.95);
-  --token-colorBorder: rgba(255, 255, 255, 0.1);
-  --token-colorBorderSecondary: rgba(255, 255, 255, 0.06);
-  --token-colorError: #ff453a;
-  --token-colorFillQuaternary: rgba(116, 116, 128, 0.08);
-  --token-colorFillSecondary: rgba(120, 120, 128, 0.16);
-  --token-colorFillTertiary: rgba(118, 118, 128, 0.12);
-  --token-colorInfo: #0a84ff;
-  --token-colorLink: #0a84ff;
-  --token-colorPrimary: #0a84ff;
-  --token-colorPrimaryActive: #0062cc;
-  --token-colorPrimaryBg: rgba(10, 132, 255, 0.12);
-  --token-colorPrimaryBorder: rgba(10, 132, 255, 0.3);
-  --token-colorSuccess: #32d74b;
-  --token-colorSuccessActive: #30e078;
-  --token-colorSuccessBg: rgba(50, 215, 75, 0.15);
-  --token-colorSuccessBorder: rgba(50, 215, 75, 0.4);
-  --token-colorSuccessBorderHover: rgba(50, 215, 75, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(50, 215, 75, 0.2);
-  --token-colorText: #f5f5f7;
-  --token-colorTextSecondary: #b8b8bc;
-  --token-colorTextTertiary: #98989d;
-  --token-colorWarning: #ff9f0a;
-  --token-focusRingColor: #409cff;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-fontFamily:
-    system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans", "Pretendard Variable",
-    "Segoe UI", Roboto, sans-serif;
-  --token-tabActiveBg: rgba(10, 132, 255, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
-  --token-tabHoverBg: rgba(120, 120, 128, 0.16);
-}

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

@@ -1,125 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: glass-light
- *
- * 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
- * theme file themselves.
- */
-
-[data-theme="glass-light"] {
-  --token-boxShadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
-  --token-boxShadowSecondary:
-    0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
-  --token-buttonActiveTransform: scale(0.97);
-  --token-buttonBorderRadius: 624.9375rem;
-  --token-buttonDangerBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.18) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    #ff3b30;
-  --token-buttonDangerBgActive: #c22d26;
-  --token-buttonDangerBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.22) 0%,
-      rgba(255, 255, 255, 0.06) 40%,
-      transparent 100%
-    ),
-    #e0342b;
-  --token-buttonDangerBorder: 1px solid rgba(255, 255, 255, 0.15);
-  --token-buttonDangerShadow: 0 1px 3px rgba(255, 59, 48, 0.2);
-  --token-buttonDangerText: white;
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgActive: rgba(142, 142, 147, 0.16);
-  --token-buttonGhostBgHover: rgba(142, 142, 147, 0.1);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostBorderHover: 1px solid rgba(0, 0, 0, 0.04);
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonHoverTransform: translateY(-1px);
-  --token-buttonPrimaryBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.18) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.22) 0%,
-      rgba(255, 255, 255, 0.06) 40%,
-      transparent 100%
-    ),
-    #0062cc;
-  --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.15);
-  --token-buttonPrimaryShadow: 0 1px 3px rgba(0, 122, 255, 0.2);
-  --token-buttonPrimaryShadowHover: 0 3px 8px rgba(0, 122, 255, 0.25);
-  --token-buttonSecondaryBackdrop: blur(12px);
-  --token-buttonSecondaryBg: rgba(142, 142, 147, 0.12);
-  --token-buttonSecondaryBgActive: rgba(142, 142, 147, 0.24);
-  --token-buttonSecondaryBgHover: rgba(142, 142, 147, 0.18);
-  --token-buttonSecondaryBorder: 1px solid rgba(0, 0, 0, 0.04);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(0, 0, 0, 0.06);
-  --token-buttonSecondaryShadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --token-buttonSuccessBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.18) 0%,
-      rgba(255, 255, 255, 0.05) 40%,
-      transparent 100%
-    ),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.22) 0%,
-      rgba(255, 255, 255, 0.06) 40%,
-      transparent 100%
-    ),
-    #1a6d3b;
-  --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.15);
-  --token-buttonSuccessShadow: 0 1px 3px rgba(52, 199, 89, 0.2);
-  --token-colorBgContainer: rgba(255, 255, 255, 0.92);
-  --token-colorBgElevated: rgba(255, 255, 255, 0.95);
-  --token-colorBgLayout: rgba(242, 242, 247, 0.95);
-  --token-colorBorder: rgba(0, 0, 0, 0.08);
-  --token-colorBorderSecondary: rgba(0, 0, 0, 0.05);
-  --token-colorError: #c22d26;
-  --token-colorFillQuaternary: rgba(116, 116, 128, 0.04);
-  --token-colorFillSecondary: rgba(120, 120, 128, 0.08);
-  --token-colorFillTertiary: rgba(118, 118, 128, 0.06);
-  --token-colorInfo: #005eb8;
-  --token-colorLink: #007aff;
-  --token-colorPrimary: #007aff;
-  --token-colorPrimaryActive: #004999;
-  --token-colorPrimaryBg: rgba(0, 122, 255, 0.08);
-  --token-colorPrimaryBorder: rgba(0, 122, 255, 0.2);
-  --token-colorSuccess: #1d7d43;
-  --token-colorSuccessActive: #165c33;
-  --token-colorSuccessBg: rgba(52, 199, 89, 0.05);
-  --token-colorSuccessBorder: rgba(52, 199, 89, 0.4);
-  --token-colorSuccessBorderHover: rgba(52, 199, 89, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(52, 199, 89, 0.15);
-  --token-colorText: #1d1d1f;
-  --token-colorTextSecondary: #545458;
-  --token-colorTextTertiary: #6e6e73;
-  --token-colorWarning: #9a5700;
-  --token-focusRingColor: #007aff;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-fontFamily:
-    system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans", "Pretendard Variable",
-    "Segoe UI", Roboto, sans-serif;
-  --token-tabActiveBg: rgba(0, 122, 255, 0.08);
-  --token-tabFocusShadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
-  --token-tabHoverBg: rgba(120, 120, 128, 0.08);
-}

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

@@ -1,104 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: reverie-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
- * theme file themselves.
- */
-
-[data-theme="reverie-dark"] {
-  --token-boxShadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --token-boxShadowSecondary:
-    0 6px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -4px rgba(0, 0, 0, 0.24),
-    0 9px 28px 8px rgba(0, 0, 0, 0.15);
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: rgba(253, 164, 175, 0.04);
-  --token-buttonGhostBgHover: rgba(253, 164, 175, 0.1);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: 0 0 14px rgba(253, 164, 175, 0.1);
-  --token-buttonPrimaryBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.03) 50%,
-      transparent 100%
-    ),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.06) 50%,
-      transparent 100%
-    ),
-    #fb7185;
-  --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.15);
-  --token-buttonPrimaryShadow:
-    0 2px 8px rgba(253, 164, 175, 0.35), 0 0 20px rgba(253, 164, 175, 0.12),
-    inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-buttonPrimaryShadowHover:
-    0 4px 14px rgba(253, 164, 175, 0.45), 0 0 24px rgba(253, 164, 175, 0.18),
-    inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  --token-buttonSecondaryBackdrop: blur(4px);
-  --token-buttonSecondaryBg: rgba(253, 164, 175, 0.08);
-  --token-buttonSecondaryBgHover: rgba(253, 164, 175, 0.14);
-  --token-buttonSecondaryBorder: 1px solid rgba(253, 164, 175, 0.2);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(253, 164, 175, 0.35);
-  --token-buttonSecondaryShadow:
-    0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  --token-buttonSuccessBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.03) 50%,
-      transparent 100%
-    ),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.06) 50%,
-      transparent 100%
-    ),
-    #04b898;
-  --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.15);
-  --token-buttonSuccessShadow:
-    0 2px 8px rgba(3, 164, 135, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-colorBgContainer: #1f1f1f;
-  --token-colorBgElevated: #262626;
-  --token-colorBgLayout: #121212;
-  --token-colorBorder: #424242;
-  --token-colorBorderSecondary: #303030;
-  --token-colorError: #dc4446;
-  --token-colorFillQuaternary: rgba(255, 255, 255, 0.04);
-  --token-colorFillSecondary: #262626;
-  --token-colorFillTertiary: #1a1a1a;
-  --token-colorInfo: #009bdd;
-  --token-colorLink: #fda4af;
-  --token-colorPrimary: #fda4af;
-  --token-colorPrimaryActive: #f43f5e;
-  --token-colorPrimaryBg: rgba(253, 164, 175, 0.12);
-  --token-colorPrimaryBorder: rgba(253, 164, 175, 0.25);
-  --token-colorSuccess: #03a487;
-  --token-colorSuccessActive: #05cca8;
-  --token-colorSuccessBg: rgba(3, 164, 135, 0.15);
-  --token-colorSuccessBorder: rgba(3, 164, 135, 0.4);
-  --token-colorSuccessBorderHover: rgba(3, 164, 135, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(3, 164, 135, 0.2);
-  --token-colorText: #ffffff;
-  --token-colorTextSecondary: #b3b3b3;
-  --token-colorTextTertiary: #8c8c8c;
-  --token-colorWarning: #d89614;
-  --token-focusRingColor: #fda4af;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-tabActiveBg: rgba(253, 164, 175, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(253, 164, 175, 0.2);
-  --token-tabHoverBg: rgba(255, 255, 255, 0.05);
-}

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

@@ -1,104 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: reverie-light
- *
- * 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
- * theme file themselves.
- */
-
-[data-theme="reverie-light"] {
-  --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);
-  --token-boxShadowSecondary:
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: rgba(251, 113, 133, 0.03);
-  --token-buttonGhostBgHover: rgba(251, 113, 133, 0.08);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: 0 0 12px rgba(251, 113, 133, 0.08);
-  --token-buttonPrimaryBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.05) 50%,
-      transparent 100%
-    ),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.4) 0%,
-      rgba(255, 255, 255, 0.1) 50%,
-      transparent 100%
-    ),
-    #f43f5e;
-  --token-buttonPrimaryBorder: 1px solid rgba(255, 255, 255, 0.25);
-  --token-buttonPrimaryShadow:
-    0 2px 8px rgba(251, 113, 133, 0.3), 0 0 16px rgba(251, 113, 133, 0.1),
-    inset 0 1px 1px rgba(255, 255, 255, 0.3);
-  --token-buttonPrimaryShadowHover:
-    0 4px 12px rgba(251, 113, 133, 0.4), 0 0 20px rgba(251, 113, 133, 0.15),
-    inset 0 1px 1px rgba(255, 255, 255, 0.4);
-  --token-buttonSecondaryBackdrop: blur(4px);
-  --token-buttonSecondaryBg: rgba(251, 113, 133, 0.06);
-  --token-buttonSecondaryBgHover: rgba(251, 113, 133, 0.1);
-  --token-buttonSecondaryBorder: 1px solid rgba(251, 113, 133, 0.2);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(251, 113, 133, 0.35);
-  --token-buttonSecondaryShadow:
-    0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  --token-buttonSuccessBg:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.05) 50%,
-      transparent 100%
-    ),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.4) 0%,
-      rgba(255, 255, 255, 0.1) 50%,
-      transparent 100%
-    ),
-    #006654;
-  --token-buttonSuccessBorder: 1px solid rgba(255, 255, 255, 0.25);
-  --token-buttonSuccessShadow:
-    0 2px 8px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
-  --token-colorBgContainer: #ffffff;
-  --token-colorBgElevated: #ffffff;
-  --token-colorBgLayout: #f5f5f5;
-  --token-colorBorder: #d9d9d9;
-  --token-colorBorderSecondary: #e5e7eb;
-  --token-colorError: #c82333;
-  --token-colorFillQuaternary: #fafafa;
-  --token-colorFillSecondary: #f3f4f6;
-  --token-colorFillTertiary: #f9fafb;
-  --token-colorInfo: #0066cc;
-  --token-colorLink: #fb7185;
-  --token-colorPrimary: #fb7185;
-  --token-colorPrimaryActive: #e11d48;
-  --token-colorPrimaryBg: rgba(251, 113, 133, 0.1);
-  --token-colorPrimaryBorder: rgba(251, 113, 133, 0.2);
-  --token-colorSuccess: #007a63;
-  --token-colorSuccessActive: #005244;
-  --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
-  --token-colorSuccessBorder: rgba(0, 189, 155, 0.4);
-  --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
-  --token-colorText: #141414;
-  --token-colorTextSecondary: #595959;
-  --token-colorTextTertiary: #737373;
-  --token-colorWarning: #9a5d00;
-  --token-focusRingColor: #fb7185;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-tabActiveBg: rgba(251, 113, 133, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(251, 113, 133, 0.15);
-  --token-tabHoverBg: var(--token-colorFillSecondary);
-}

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

@@ -1,80 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: stained-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
- * theme file themselves.
- */
-
-[data-theme="stained-dark"] {
-  --token-boxShadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --token-boxShadowSecondary:
-    0 6px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -4px rgba(0, 0, 0, 0.24),
-    0 9px 28px 8px rgba(0, 0, 0, 0.15);
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgHover: rgba(167, 139, 250, 0.1);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonPrimaryBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #9575fa;
-  --token-buttonPrimaryBorder: none;
-  --token-buttonPrimaryShadow:
-    0 2px 8px rgba(167, 139, 250, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
-  --token-buttonPrimaryShadowHover:
-    0 4px 12px rgba(167, 139, 250, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-buttonSecondaryBackdrop: none;
-  --token-buttonSecondaryBg: rgba(167, 139, 250, 0.08);
-  --token-buttonSecondaryBgHover: rgba(167, 139, 250, 0.12);
-  --token-buttonSecondaryBorder: 1px solid rgba(167, 139, 250, 0.2);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(167, 139, 250, 0.3);
-  --token-buttonSecondaryShadow:
-    0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  --token-buttonSuccessBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #04b898;
-  --token-buttonSuccessBorder: none;
-  --token-buttonSuccessShadow:
-    0 2px 8px rgba(3, 164, 135, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
-  --token-colorBgContainer: #1f1f1f;
-  --token-colorBgElevated: #262626;
-  --token-colorBgLayout: #121212;
-  --token-colorBorder: #424242;
-  --token-colorBorderSecondary: #303030;
-  --token-colorError: #dc4446;
-  --token-colorFillQuaternary: rgba(255, 255, 255, 0.04);
-  --token-colorFillSecondary: #262626;
-  --token-colorFillTertiary: #1a1a1a;
-  --token-colorInfo: #009bdd;
-  --token-colorLink: #a78bfa;
-  --token-colorPrimary: #a78bfa;
-  --token-colorPrimaryActive: #8b5cf6;
-  --token-colorPrimaryBg: rgba(167, 139, 250, 0.12);
-  --token-colorPrimaryBorder: rgba(167, 139, 250, 0.25);
-  --token-colorSuccess: #03a487;
-  --token-colorSuccessActive: #05cca8;
-  --token-colorSuccessBg: rgba(3, 164, 135, 0.15);
-  --token-colorSuccessBorder: rgba(3, 164, 135, 0.4);
-  --token-colorSuccessBorderHover: rgba(3, 164, 135, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(3, 164, 135, 0.2);
-  --token-colorText: #ffffff;
-  --token-colorTextSecondary: #b3b3b3;
-  --token-colorTextTertiary: #8c8c8c;
-  --token-colorWarning: #d89614;
-  --token-focusRingColor: #a78bfa;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-tabActiveBg: rgba(167, 139, 250, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
-  --token-tabHoverBg: rgba(255, 255, 255, 0.05);
-}

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

@@ -1,80 +0,0 @@
-/**
- * @lablup/ui-common theme tokens: stained-light
- *
- * 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
- * theme file themselves.
- */
-
-[data-theme="stained-light"] {
-  --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);
-  --token-boxShadowSecondary:
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --token-buttonGhostBackdrop: none;
-  --token-buttonGhostBg: transparent;
-  --token-buttonGhostBgHover: rgba(139, 92, 246, 0.06);
-  --token-buttonGhostBorder: 1px solid transparent;
-  --token-buttonGhostShadow: none;
-  --token-buttonGhostShadowHover: none;
-  --token-buttonPrimaryBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
-    var(--token-colorPrimary);
-  --token-buttonPrimaryBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #7c3aed;
-  --token-buttonPrimaryBorder: none;
-  --token-buttonPrimaryShadow:
-    0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-buttonPrimaryShadowHover:
-    0 4px 10px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  --token-buttonSecondaryBackdrop: none;
-  --token-buttonSecondaryBg: rgba(139, 92, 246, 0.04);
-  --token-buttonSecondaryBgHover: rgba(139, 92, 246, 0.08);
-  --token-buttonSecondaryBorder: 1px solid rgba(139, 92, 246, 0.2);
-  --token-buttonSecondaryBorderHover: 1px solid rgba(139, 92, 246, 0.3);
-  --token-buttonSecondaryShadow:
-    0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
-  --token-buttonSuccessBg:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
-    var(--token-colorSuccess);
-  --token-buttonSuccessBgHover:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #006654;
-  --token-buttonSuccessBorder: none;
-  --token-buttonSuccessShadow:
-    0 2px 6px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  --token-colorBgContainer: #ffffff;
-  --token-colorBgElevated: #ffffff;
-  --token-colorBgLayout: #f5f5f5;
-  --token-colorBorder: #d9d9d9;
-  --token-colorBorderSecondary: #e5e7eb;
-  --token-colorError: #c82333;
-  --token-colorFillQuaternary: #fafafa;
-  --token-colorFillSecondary: #f3f4f6;
-  --token-colorFillTertiary: #f9fafb;
-  --token-colorInfo: #0066cc;
-  --token-colorLink: #8b5cf6;
-  --token-colorPrimary: #8b5cf6;
-  --token-colorPrimaryActive: #6d28d9;
-  --token-colorPrimaryBg: rgba(139, 92, 246, 0.1);
-  --token-colorPrimaryBorder: rgba(139, 92, 246, 0.2);
-  --token-colorSuccess: #007a63;
-  --token-colorSuccessActive: #005244;
-  --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
-  --token-colorSuccessBorder: rgba(0, 189, 155, 0.4);
-  --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6);
-  --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
-  --token-colorText: #141414;
-  --token-colorTextSecondary: #595959;
-  --token-colorTextTertiary: #737373;
-  --token-colorWarning: #9a5d00;
-  --token-focusRingColor: #8b5cf6;
-  --token-focusRingOffset: 2px;
-  --token-focusRingStyle: solid;
-  --token-focusRingWidth: 2px;
-  --token-tabActiveBg: rgba(139, 92, 246, 0.1);
-  --token-tabFocusShadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
-  --token-tabHoverBg: var(--token-colorFillSecondary);
-}