From 89170295da68b6fa4836282a37e67a4b2adec8c8 Mon Sep 17 00:00:00 2001
From: Jeongkyu Shin <inureyes@gmail.com>
Date: Wed, 5 Aug 2026 21:59:42 +0900
Subject: [PATCH] refactor(styles): ship the theming mechanism and one default
 palette

The package carried ten stylesheets covering five theme families, which are
one product's visual identities rather than anything shared. They were
byte-identical copies of files that product already owns, so a consumer with
its own identity gained nothing from them and every future family would have
had to land here first.

`styles/themes/` now keeps `orange-light` and `orange-dark`, the Lablup brand
default, and `styles/base.css` carries the orange-light values for the 55
tokens a theme defines so the default palette and the shipped theme agree. The
113 token names, the structural values, and every component are unchanged. A
product defines its own `[data-theme]` blocks over the same names and ships
them itself.

Choosing orange is a brand decision, not a technical one, and the obvious
technical argument for it does not hold: the components' inline var()
fallbacks match orange-light in 135 of the 252 references to a theme-defined
token and stained-light in 168, and `--token-colorPrimary` alone appears as
`#ff7a00` in some components and `#8b5cf6` in others. No default makes those
fallbacks agree, so the header comment now states the measurement instead of
the earlier claim that one divergence was the visible one.

Also closes a hole in the disclosure guard. A product name that wraps across
two comment lines reads and ships as one name but arrives at a line-by-line
scan as two harmless halves, which is exactly how one got into the token
stylesheet in this change and past the check. The scan now blanks comment
markers in place, so a pattern spans the wrap while every offset still maps
back to its line.

Removing a stylesheet path is breaking under the versioning policy, which is
why it lands now, while the package is an alpha with one consumer mid
migration.
---
 CHANGELOG.md                        |  22 ++++-
 README.md                           |  11 ++-
 package.json                        |   2 +-
 scripts/check-boundary.mjs          |  49 ++++++++---
 src/index.ts                        |   8 +-
 src/styles/base.css                 |  90 ++++++++++----------
 src/styles/themes/bliss-dark.css    | 123 ---------------------------
 src/styles/themes/bliss-light.css   | 123 ---------------------------
 src/styles/themes/glass-dark.css    | 124 ---------------------------
 src/styles/themes/glass-light.css   | 125 ----------------------------
 src/styles/themes/reverie-dark.css  | 104 -----------------------
 src/styles/themes/reverie-light.css | 104 -----------------------
 src/styles/themes/stained-dark.css  |  80 ------------------
 src/styles/themes/stained-light.css |  80 ------------------
 vite.config.ts                      |   4 +-
 15 files changed, 120 insertions(+), 929 deletions(-)
 delete mode 100644 src/styles/themes/bliss-dark.css
 delete mode 100644 src/styles/themes/bliss-light.css
 delete mode 100644 src/styles/themes/glass-dark.css
 delete mode 100644 src/styles/themes/glass-light.css
 delete mode 100644 src/styles/themes/reverie-dark.css
 delete mode 100644 src/styles/themes/reverie-light.css
 delete mode 100644 src/styles/themes/stained-dark.css
 delete mode 100644 src/styles/themes/stained-light.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c61c0c..0f44446 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,25 @@ Versioning follows the policy in [CONTRIBUTING.md](CONTRIBUTING.md#versioning).
 
 ## [Unreleased]
 
+## [0.1.0-alpha.2]
+
+### Changed
+
+- The package ships the theming mechanism and one default palette rather than
+  a catalogue of one product's palettes. `styles/themes/` keeps `orange-light`
+  and `orange-dark`, the Lablup brand default; the eight `bliss`, `glass`,
+  `reverie` and `stained` stylesheets are removed. They were byte-identical
+  copies of files the source product already owns, so nothing is lost: a
+  product with its own visual identity defines its own `[data-theme]` blocks
+  over the same 113 token names and ships them itself.
+- `styles/base.css` now carries the orange-light values for the 55 tokens a
+  theme defines, so the default palette and the one shipped theme agree. The
+  113 token names, the structural values, and every component are unchanged.
+
+Removing a stylesheet path is a breaking change under the versioning policy,
+which is why it lands while the package is still an alpha with one consumer
+mid-migration.
+
 ## [0.1.0-alpha.1]
 
 ### Fixed
@@ -31,6 +50,7 @@ Versioning follows the policy in [CONTRIBUTING.md](CONTRIBUTING.md#versioning).
   validation, and a clean external React install fixture.
 - Apache-2.0 license and the initial public boundary rules.
 
-[Unreleased]: https://github.com/lablup/ui-common/compare/v0.1.0-alpha.1...HEAD
+[Unreleased]: https://github.com/lablup/ui-common/compare/v0.1.0-alpha.2...HEAD
+[0.1.0-alpha.2]: https://github.com/lablup/ui-common/compare/v0.1.0-alpha.1...v0.1.0-alpha.2
 [0.1.0-alpha.1]: https://github.com/lablup/ui-common/compare/v0.1.0-alpha.0...v0.1.0-alpha.1
 [0.1.0-alpha.0]: https://github.com/lablup/ui-common/releases/tag/v0.1.0-alpha.0
diff --git a/README.md b/README.md
index df1fbf1..e75f9ba 100644
--- a/README.md
+++ b/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,
diff --git a/package.json b/package.json
index 08cc307..ce713a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lablup/ui-common",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Shared, product-neutral UI components and design tokens for Lablup products",
   "license": "Apache-2.0",
   "author": "Lablup Inc.",
diff --git a/scripts/check-boundary.mjs b/scripts/check-boundary.mjs
index 6e013b6..1676832 100644
--- a/scripts/check-boundary.mjs
+++ b/scripts/check-boundary.mjs
@@ -116,20 +116,47 @@ const docFiles = globSync(["*.md", "NOTICE", ".github/**/*.yml"], {
   absolute: true,
 });
 
+/**
+ * Blank out comment markers without moving anything.
+ *
+ * A name that wraps across two comment lines reads as one name and ships as
+ * one name, but arrives at a line-by-line scan as "Backend.AI" and "GO does",
+ * neither of which matches. That is not hypothetical: it is how a product
+ * edition got into this file's own token stylesheet and past this guard.
+ * Replacing each marker with the same number of spaces lets a pattern span the
+ * wrap while every offset still maps back to its original line.
+ */
+function blankCommentMarkers(text) {
+  return text.replace(/^[ \t]*(?:\/\/+|\/?\*+|#+)[ \t]?/gm, (marker) =>
+    " ".repeat(marker.length),
+  );
+}
+
+function lineOf(text, index) {
+  return text.slice(0, index).split("\n").length;
+}
+
 for (const file of [...files, ...docFiles]) {
   const contents = await readFile(file, "utf8");
-  contents.split("\n").forEach((line, index) => {
-    for (const { pattern, reason } of DISCLOSURE) {
-      if (pattern.test(line)) {
-        violations.push({
-          file: relative(root, file),
-          line: index + 1,
-          text: line.trim(),
-          reason: `${reason}; this repository is published publicly`,
-        });
-      }
+  const scannable = blankCommentMarkers(contents);
+  const lines = contents.split("\n");
+
+  for (const { pattern, reason } of DISCLOSURE) {
+    const global = new RegExp(
+      pattern.source,
+      pattern.flags.includes("g") ? pattern.flags : `${pattern.flags}g`,
+    );
+    for (const match of scannable.matchAll(global)) {
+      const line = lineOf(scannable, match.index);
+      violations.push({
+        file: relative(root, file),
+        line,
+        // The match rather than the line, since it may span two of them.
+        text: `${lines[line - 1].trim()}  [matched: ${match[0].replace(/\s+/g, " ")}]`,
+        reason: `${reason}; this repository is published publicly`,
+      });
     }
-  });
+  }
 }
 
 if (violations.length > 0) {
diff --git a/src/index.ts b/src/index.ts
index eab5423..bbd2c5d 100644
--- a/src/index.ts
+++ b/src/index.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";
diff --git a/src/styles/base.css b/src/styles/base.css
index 7727d3e..02432be 100644
--- a/src/styles/base.css
+++ b/src/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;
diff --git a/src/styles/themes/bliss-dark.css b/src/styles/themes/bliss-dark.css
deleted file mode 100644
index 54c7f59..0000000
--- a/src/styles/themes/bliss-dark.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/bliss-light.css b/src/styles/themes/bliss-light.css
deleted file mode 100644
index d3642be..0000000
--- a/src/styles/themes/bliss-light.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/styles/themes/glass-dark.css b/src/styles/themes/glass-dark.css
deleted file mode 100644
index 3b474c2..0000000
--- a/src/styles/themes/glass-dark.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/glass-light.css b/src/styles/themes/glass-light.css
deleted file mode 100644
index 9106fca..0000000
--- a/src/styles/themes/glass-light.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/reverie-dark.css b/src/styles/themes/reverie-dark.css
deleted file mode 100644
index 6eb0f14..0000000
--- a/src/styles/themes/reverie-dark.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/reverie-light.css b/src/styles/themes/reverie-light.css
deleted file mode 100644
index 9d658dd..0000000
--- a/src/styles/themes/reverie-light.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/stained-dark.css b/src/styles/themes/stained-dark.css
deleted file mode 100644
index d534d9d..0000000
--- a/src/styles/themes/stained-dark.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/styles/themes/stained-light.css b/src/styles/themes/stained-light.css
deleted file mode 100644
index 94a6178..0000000
--- a/src/styles/themes/stained-light.css
+++ /dev/null
@@ -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);
-}
diff --git a/vite.config.ts b/vite.config.ts
index ce11a20..7d4c448 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,8 +32,8 @@ function entryPoints(): Record<string, string> {
 
 /**
  * Design tokens are standalone stylesheets that no component imports, so
- * Rollup never sees them. They are copied verbatim so each theme family stays
- * an opt-in entry point rather than being folded into a single bundle.
+ * Rollup never sees them. They are copied verbatim so the palette stays an
+ * opt-in entry point rather than being folded into a single bundle.
  */
 function copyStyles(): Plugin {
   return {