diff --git a/packages/react-components/src/foundations/design-token.ts b/packages/react-components/src/foundations/design-token.ts
index 6c8bff1f0..87f2e2cfa 100644
--- a/packages/react-components/src/foundations/design-token.ts
+++ b/packages/react-components/src/foundations/design-token.ts
@@ -375,6 +375,8 @@ export const DesignToken = {
     '--one-popover-message-background-default',
   OnePopoverBorderDefault: '--one-popover-border-default',
   OnePopoverBorderActive: '--one-popover-border-active',
+  OneTooltipBackground: '--one-tooltip-background',
+  ContentBasicAutofill: '--content-basic-autofill',
 };
 
 export type DesignTokenKey = keyof typeof DesignToken;
diff --git a/packages/react-components/src/stories/foundations/Color/data.ts b/packages/react-components/src/stories/foundations/Color/data.ts
index 8e0a4ace5..ad93e49fd 100644
--- a/packages/react-components/src/stories/foundations/Color/data.ts
+++ b/packages/react-components/src/stories/foundations/Color/data.ts
@@ -1611,4 +1611,14 @@ export const ColorsData: Record<
     desc: '',
     deprecated: undefined,
   },
+  OneTooltipBackground: {
+    group: ColorGroup.Products,
+    desc: '',
+    deprecated: undefined,
+  },
+  ContentBasicAutofill: {
+    group: ColorGroup.ContentBasic,
+    desc: '',
+    deprecated: undefined,
+  },
 };
diff --git a/packages/react-components/src/themes/dark.scss b/packages/react-components/src/themes/dark.scss
index 619676c09..d06c11fbd 100644
--- a/packages/react-components/src/themes/dark.scss
+++ b/packages/react-components/src/themes/dark.scss
@@ -83,8 +83,8 @@ $surface-invert-primary: #e2e2e4;
   --surface-accent-emphasis-high-warning: #e8bb00;
   --surface-accent-emphasis-high-positive: #01833a;
   --surface-accent-emphasis-high-purple: #9146ff;
-  --surface-opacity-basic-hover: rgb(255 255 255 / 8%);
-  --surface-opacity-basic-active: rgb(255 255 255 / 12%);
+  --surface-opacity-basic-hover: hsl(0deg 0% 100% / 11%);
+  --surface-opacity-basic-active: hsl(0deg 0% 100% / 15%);
   --surface-opacity-invert-hover: rgb(255 255 255 / 10%);
   --surface-opacity-invert-active: rgb(255 255 255 / 12%);
   --surface-overlay: rgb(19 19 23 / 90%); // deprecated
@@ -384,4 +384,10 @@ $surface-invert-primary: #e2e2e4;
     #c930ff 313.12deg,
     #7000ff 360.45deg
   );
+  --one-tooltip-background: linear-gradient(
+    254.49deg,
+    #3c364c -0.38%,
+    #2d3a4c 94.44%
+  );
+  --content-basic-autofill: hsl(240deg 6% 97% / 59%);
 }
diff --git a/packages/react-components/src/themes/legacy.scss b/packages/react-components/src/themes/legacy.scss
index 3bb60c01b..f252e25f3 100644
--- a/packages/react-components/src/themes/legacy.scss
+++ b/packages/react-components/src/themes/legacy.scss
@@ -374,4 +374,10 @@ $decor-gray800: #29292f;
     #c930ff 313.12deg,
     #7000ff 360.45deg
   );
+  --one-tooltip-background: linear-gradient(
+    254.49deg,
+    #3c364c -0.38%,
+    #1b2b46 96.36%
+  );
+  --content-basic-autofill: hsl(240deg 10% 8% / 59%);
 }
diff --git a/packages/react-components/src/themes/light.scss b/packages/react-components/src/themes/light.scss
index 3625137fd..83b95720f 100644
--- a/packages/react-components/src/themes/light.scss
+++ b/packages/react-components/src/themes/light.scss
@@ -385,4 +385,10 @@ $content-basic-internal-note: #3a310c;
     #c930ff 313.12deg,
     #7000ff 360.45deg
   );
+  --one-tooltip-background: linear-gradient(
+    254.49deg,
+    #3c364c -0.38%,
+    #1b2b46 96.36%
+  );
+  --content-basic-autofill: hsl(240deg 10% 8% / 59%);
 }