@lablup/ui-common 0.1.0-alpha.0

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

@@ -0,0 +1,104 @@
+/**
+ * @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

@@ -0,0 +1,80 @@
+/**
+ * @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

@@ -0,0 +1,80 @@
+/**
+ * @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);
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@lablup/ui-common",
+  "version": "0.1.0-alpha.0",
+  "description": "Shared, product-neutral UI components and design tokens for Lablup products",
+  "license": "Apache-2.0",
+  "author": "Lablup Inc.",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lablup/ui-common.git"
+  },
+  "homepage": "https://github.com/lablup/ui-common#readme",
+  "bugs": {
+    "url": "https://github.com/lablup/ui-common/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@11.19.0",
+  "files": [
+    "dist",
+    "NOTICE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./styles/base.css": "./dist/styles/base.css",
+    "./styles/themes/*.css": "./dist/styles/themes/*.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:pack": "node scripts/check-pack.mjs",
+    "check:boundary": "node scripts/check-boundary.mjs",
+    "verify": "pnpm run typecheck && pnpm run lint && pnpm run format:check && pnpm run check:boundary && pnpm run test && pnpm run build && pnpm run check:pack"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.0",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^9.39.0",
+    "eslint-plugin-react-hooks": "6.0.0-rc.1",
+    "globals": "^16.5.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.8"
+  }
+}