@lablup/ui-common 0.1.0-alpha.0

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

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

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

@@ -0,0 +1,125 @@
+/**
+ * @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/orange-dark.css

@@ -0,0 +1,70 @@
+/**
+ * @lablup/ui-common theme tokens: orange-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="orange-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(220, 107, 3, 0.1);
+  --token-buttonGhostBorder: 1px solid transparent;
+  --token-buttonGhostShadow: none;
+  --token-buttonGhostShadowHover: none;
+  --token-buttonPrimaryBg: var(--token-colorPrimary);
+  --token-buttonPrimaryBgHover: #e87c1c;
+  --token-buttonPrimaryBorder: none;
+  --token-buttonPrimaryShadow: 0 2px 6px rgba(220, 107, 3, 0.3);
+  --token-buttonPrimaryShadowHover: 0 4px 10px rgba(220, 107, 3, 0.4);
+  --token-buttonSecondaryBackdrop: none;
+  --token-buttonSecondaryBg: transparent;
+  --token-buttonSecondaryBgHover: rgba(220, 107, 3, 0.1);
+  --token-buttonSecondaryBorder: 1px solid var(--token-colorBorder);
+  --token-buttonSecondaryBorderHover: 1px solid rgba(220, 107, 3, 0.4);
+  --token-buttonSecondaryShadow: none;
+  --token-buttonSuccessBg: var(--token-colorSuccess);
+  --token-buttonSuccessBgHover: #04b898;
+  --token-buttonSuccessBorder: none;
+  --token-buttonSuccessShadow: 0 2px 6px rgba(3, 164, 135, 0.3);
+  --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: #dc6b03;
+  --token-colorPrimary: #dc6b03;
+  --token-colorPrimaryActive: #c05d00;
+  --token-colorPrimaryBg: rgba(220, 107, 3, 0.12);
+  --token-colorPrimaryBorder: rgba(220, 107, 3, 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: #ff9729;
+  --token-focusRingOffset: 2px;
+  --token-focusRingStyle: solid;
+  --token-focusRingWidth: 2px;
+  --token-tabActiveBg: rgba(255, 122, 0, 0.1);
+  --token-tabFocusShadow: 0 0 0 3px rgba(255, 122, 0, 0.2);
+  --token-tabHoverBg: rgba(255, 255, 255, 0.05);
+}

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

@@ -0,0 +1,70 @@
+/**
+ * @lablup/ui-common theme tokens: orange-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="orange-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(255, 122, 0, 0.06);
+  --token-buttonGhostBorder: 1px solid transparent;
+  --token-buttonGhostShadow: none;
+  --token-buttonGhostShadowHover: none;
+  --token-buttonPrimaryBg: var(--token-colorPrimary);
+  --token-buttonPrimaryBgHover: #e86e00;
+  --token-buttonPrimaryBorder: none;
+  --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: transparent;
+  --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-buttonSuccessBg: var(--token-colorSuccess);
+  --token-buttonSuccessBgHover: #006654;
+  --token-buttonSuccessBorder: none;
+  --token-buttonSuccessShadow: 0 2px 4px rgba(0, 189, 155, 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: #ff7a00;
+  --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);
+  --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: #ff7a00;
+  --token-focusRingOffset: 2px;
+  --token-focusRingStyle: solid;
+  --token-focusRingWidth: 2px;
+  --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);
+}

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

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