From 7a6d693032b02f8ffd4bcbdfc16f8a397f0afa90 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 11 Nov 2024 19:43:14 +0530
Subject: [PATCH 01/13] Replace one-off hardcoded color values with color
 tokens pt3

---
 .../manager/src/assets/icons/monitor-disabled.svg    |  2 +-
 packages/manager/src/components/Dialog/Dialog.tsx    |  6 +++---
 .../src/components/Placeholder/Placeholder.tsx       | 12 ++++++++++--
 packages/manager/src/components/Tag/Tag.styles.ts    |  4 +++-
 packages/manager/src/features/TopMenu/TopMenu.tsx    |  6 +++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/assets/icons/monitor-disabled.svg b/packages/manager/src/assets/icons/monitor-disabled.svg
index 2f730c7a332..7be1239b37c 100644
--- a/packages/manager/src/assets/icons/monitor-disabled.svg
+++ b/packages/manager/src/assets/icons/monitor-disabled.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
   <g fill="none" fill-rule="evenodd">
-    <circle cx="32" cy="32" r="32" fill="#E3E5E8"/>
+    <circle cx="32" cy="32" r="32" fill="#E5E5EA"/>
     <rect width="4" height="35" x="16" y="-14.501" fill="#FFF" rx="2" transform="rotate(90 10.5 24.499)"/>
   </g>
 </svg>
diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx
index fbbb76cfaa1..1504ef243ce 100644
--- a/packages/manager/src/components/Dialog/Dialog.tsx
+++ b/packages/manager/src/components/Dialog/Dialog.tsx
@@ -115,10 +115,10 @@ const StyledDialog = styled(_Dialog, {
   },
 }));
 
-const StyledHr = styled('hr')({
-  backgroundColor: '#e3e5e8',
+const StyledHr = styled('hr', { label: 'StyledHr' })(({ theme }) => ({
+  backgroundColor: theme.tokens.color.Neutrals[20],
   border: 'none',
   height: 1,
   margin: '-2em 8px 0px 8px',
   width: '100%',
-});
+}));
diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx
index 891cc6dddf6..25662fe8936 100644
--- a/packages/manager/src/components/Placeholder/Placeholder.tsx
+++ b/packages/manager/src/components/Placeholder/Placeholder.tsx
@@ -218,12 +218,20 @@ const StyledButtonWrapper = styled('div')(({ theme }) => ({
 const StyledLinksSection = styled('div')<
   Pick<PlaceholderProps, 'showTransferDisplay'>
 >(({ theme, ...props }) => ({
-  borderTop: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+  borderTop: `1px solid ${
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[20]
+      : theme.tokens.color.Neutrals[100]
+  }`,
   gridArea: 'links',
   paddingTop: '38px',
 
   ...(props.showTransferDisplay && {
-    borderBottom: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+    borderBottom: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[20]
+        : theme.tokens.color.Neutrals[100]
+    }`,
     paddingBottom: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       paddingBottom: theme.spacing(4),
diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
index 77a491cc8cb..b9c8cef2b11 100644
--- a/packages/manager/src/components/Tag/Tag.styles.ts
+++ b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -92,7 +92,9 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
   },
   borderBottomRightRadius: 3,
   borderLeft: `1px solid ${
-    theme.name === 'light' ? theme.tokens.color.Neutrals.White : '#2e3238'
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals.White
+      : theme.tokens.color.Neutrals[100]
   }`,
   borderRadius: theme.tokens.borderRadius.None,
   borderTopRightRadius: 3,
diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx
index 00802f82ebb..32d23d5fc3f 100644
--- a/packages/manager/src/features/TopMenu/TopMenu.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenu.tsx
@@ -39,7 +39,11 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
   return (
     <React.Fragment>
       {loggedInAsCustomer && (
-        <Box bgcolor="pink" padding="1em" textAlign="center">
+        <Box
+          bgcolor={(theme) => theme.tokens.color.Pink[40]}
+          padding="1em"
+          textAlign="center"
+        >
           <Typography
             color={(theme) => theme.tokens.color.Neutrals.Black}
             fontSize="1.2em"

From b0c16d7a42cf416c01314b7470515e6b2e8c9b90 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 11 Nov 2024 19:56:09 +0530
Subject: [PATCH 02/13] Replace #c9c7c7 with theme.tokens.color.Neutrals[40]

---
 .../features/TopMenu/NotificationMenu/NotificationMenu.tsx    | 4 +++-
 .../src/features/TopMenu/SearchBar/SearchBar.styles.ts        | 2 +-
 packages/manager/src/features/TopMenu/TopMenuTooltip.tsx      | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
index 063ca7d533c..1e9360ac60e 100644
--- a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
+++ b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
@@ -88,7 +88,9 @@ export const NotificationMenu = () => {
         <IconButton
           sx={(theme) => ({
             ...topMenuIconButtonSx(theme),
-            color: notificationContext.menuOpen ? '#606469' : '#c9c7c7',
+            color: notificationContext.menuOpen
+              ? '#606469'
+              : theme.tokens.color.Neutrals[40],
           })}
           aria-describedby={id}
           aria-haspopup="true"
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
index f23d19daff8..d53c91af154 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
@@ -16,7 +16,7 @@ export const StyledIconButton = styled(IconButton, {
   },
   backgroundColor: 'inherit',
   border: 'none',
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   cursor: 'pointer',
   padding: theme.spacing(),
   position: 'relative',
diff --git a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
index 43bff6c2967..7a87250dc07 100644
--- a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
@@ -26,7 +26,7 @@ export const topMenuIconButtonSx = (theme: Theme) => ({
   '&:hover, &:focus': {
     color: '#606469',
   },
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   height: `50px`,
   [theme.breakpoints.down('sm')]: {
     padding: 1,

From 29f2c36964ddbe97faeea8e4f7d8096f20eec738 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 11 Nov 2024 20:18:52 +0530
Subject: [PATCH 03/13] Replace #606469 with theme.tokens.color.Neutrals[70]

---
 packages/manager/src/components/AreaChart/AreaChart.tsx       | 4 ++--
 packages/manager/src/components/LineGraph/LineGraph.tsx       | 2 +-
 .../features/TopMenu/NotificationMenu/NotificationMenu.tsx    | 2 +-
 packages/manager/src/features/TopMenu/TopMenuTooltip.tsx      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx
index 70dcabf72b4..ff43f4793ef 100644
--- a/packages/manager/src/components/AreaChart/AreaChart.tsx
+++ b/packages/manager/src/components/AreaChart/AreaChart.tsx
@@ -241,10 +241,10 @@ export const AreaChart = (props: AreaChartProps) => {
           <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
           <Tooltip
             contentStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
             }}
             itemStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
               fontFamily: theme.font.bold,
             }}
             content={<CustomTooltip />}
diff --git a/packages/manager/src/components/LineGraph/LineGraph.tsx b/packages/manager/src/components/LineGraph/LineGraph.tsx
index cde35ce4004..745e6a27af1 100644
--- a/packages/manager/src/components/LineGraph/LineGraph.tsx
+++ b/packages/manager/src/components/LineGraph/LineGraph.tsx
@@ -284,7 +284,7 @@ export const LineGraph = (props: LineGraphProps) => {
         intersect: false,
         mode: 'index',
         position: 'nearest',
-        titleFontColor: '#606469',
+        titleFontColor: theme.tokens.color.Neutrals[70],
         xPadding: 8,
         yPadding: 10,
       },
diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
index 1e9360ac60e..86b74c64b6b 100644
--- a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
+++ b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
@@ -89,7 +89,7 @@ export const NotificationMenu = () => {
           sx={(theme) => ({
             ...topMenuIconButtonSx(theme),
             color: notificationContext.menuOpen
-              ? '#606469'
+              ? theme.tokens.color.Neutrals[70]
               : theme.tokens.color.Neutrals[40],
           })}
           aria-describedby={id}
diff --git a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
index 7a87250dc07..22afe494a88 100644
--- a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
@@ -24,7 +24,7 @@ export const TopMenuTooltip = React.memo(({ children, title }: Props) => {
 
 export const topMenuIconButtonSx = (theme: Theme) => ({
   '&:hover, &:focus': {
-    color: '#606469',
+    color: theme.tokens.color.Neutrals[70],
   },
   color: theme.tokens.color.Neutrals[40],
   height: `50px`,

From 6941e73aec85dee3d01fa70c242655f9d6505199 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 11 Nov 2024 20:26:46 +0530
Subject: [PATCH 04/13] Replace #555 with theme.tokens.color.Neutrals[80]

---
 .../PhoneVerification/PhoneVerification.styles.ts               | 2 +-
 packages/ui/src/components/Notice/Notice.styles.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index cd5b9f75a26..65cbe8e180e 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -21,7 +21,7 @@ export const StyledPhoneNumberTitle = styled(Typography, {
 export const StyledLabel = styled(Typography, {
   label: 'StyledLabel',
 })(({ theme }) => ({
-  color: theme.name === 'light' ? '#555' : '#c9cacb',
+  color: theme.name === 'light' ? theme.tokens.color.Neutrals[80] : '#c9cacb',
   fontSize: '.875rem',
   lineHeight: '1',
   marginBottom: '8px',
diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index 440ca58a017..1e6b45ca9d3 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -77,7 +77,7 @@ export const useStyles = makeStyles<
   },
   warning: {
     [`& .${classes.icon}`]: {
-      color: '#555',
+      color: theme.tokens.color.Neutrals[80],
     },
     [`&.${classes.important}`]: {
       borderLeftWidth: 32,

From 5c9290f3ab8bd37f3f6339cfdaf5d8e2f5796d2f Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Mon, 11 Nov 2024 20:39:45 +0530
Subject: [PATCH 05/13] Replace #c9cacb with theme.tokens.color.Neutrals[40] or
 equivalent

---
 packages/manager/src/assets/icons/toggleOff.svg              | 2 +-
 .../src/components/PasswordInput/StrengthIndicator.tsx       | 2 +-
 .../PhoneVerification/PhoneVerification.styles.ts            | 5 ++++-
 .../manager/src/features/TopMenu/SearchBar/SearchBar.tsx     | 5 ++++-
 packages/ui/src/foundations/themes/light.ts                  | 2 +-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/assets/icons/toggleOff.svg b/packages/manager/src/assets/icons/toggleOff.svg
index 79a13065668..433629a5f01 100644
--- a/packages/manager/src/assets/icons/toggleOff.svg
+++ b/packages/manager/src/assets/icons/toggleOff.svg
@@ -6,7 +6,7 @@
   class="icon"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g stroke="none" stroke-width="0" fill="#C9CACB" fill-rule="evenodd">
+  <g stroke="none" stroke-width="0" fill="#C2C2CA" fill-rule="evenodd">
     <rect class="square" x="0" y="0" width="16" height="16" rx="1"></rect>
   </g>
 </svg>
\ No newline at end of file
diff --git a/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx b/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
index 5eb0b75f3b0..d64a2d4e88b 100644
--- a/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
+++ b/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     '&[class*="strength-"]': {
       backgroundColor: theme.palette.primary.main,
     },
-    backgroundColor: '#C9CACB',
+    backgroundColor: theme.tokens.color.Neutrals[40],
     height: '4px',
     transition: 'background-color .5s ease-in-out',
   },
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 65cbe8e180e..3194d85c90f 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -21,7 +21,10 @@ export const StyledPhoneNumberTitle = styled(Typography, {
 export const StyledLabel = styled(Typography, {
   label: 'StyledLabel',
 })(({ theme }) => ({
-  color: theme.name === 'light' ? theme.tokens.color.Neutrals[80] : '#c9cacb',
+  color:
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[80]
+      : theme.tokens.color.Neutrals[40],
   fontSize: '.875rem',
   lineHeight: '1',
   marginBottom: '8px',
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
index b6a53bb8130..18bf5642e0b 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
@@ -323,8 +323,11 @@ const SearchBar = (props: SearchProps) => {
       </StyledIconButton>
       <StyledSearchBarWrapperDiv className={searchActive ? 'active' : ''}>
         <Search
+          sx={(theme) => ({
+            color: theme.tokens.color.Neutrals[40],
+            fontSize: '2rem',
+          })}
           data-qa-search-icon
-          sx={{ color: '#c9cacb', fontSize: '2rem' }}
         />
         <label className="visually-hidden" htmlFor="main-search">
           Main search
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index 1bc3375a7ae..62d79ec487d 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -485,7 +485,7 @@ export const lightTheme: ThemeOptions = {
             color: Button.Secondary.Hover.Text,
           },
           '&[aria-disabled="true"]': {
-            color: '#c9cacb',
+            color: Color.Neutrals[40],
           },
           backgroundColor: 'transparent',
           color: Button.Secondary.Default.Text,

From a5b30f694d9f9d2efe94a5e817255810e2e72ee7 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 11:42:05 +0530
Subject: [PATCH 06/13] Added changeset: Replace one-off hardcoded color values
 with color tokens pt3

---
 .../.changeset/pr-11241-upcoming-features-1731391925729.md   | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md

diff --git a/packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md b/packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md
new file mode 100644
index 00000000000..a9ba998b172
--- /dev/null
+++ b/packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Replace one-off hardcoded color values with color tokens pt3 ([#11241](https://github.com/linode/manager/pull/11241))

From dd40ab3c7bfcb6d30ec709f88b24d1a0d9857423 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 14:15:11 +0530
Subject: [PATCH 07/13] Replace '#9ea4ae' with theme.tokens.color.Neutrals[50]

---
 packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 7ad661fdc8e..07a60e5927c 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -181,7 +181,9 @@ export const UserMenu = React.memo(() => {
     return matchesSmDown ? undefined : open ? (
       <KeyboardArrowUp sx={sx} />
     ) : (
-      <KeyboardArrowDown sx={{ color: '#9ea4ae', ...sx }} />
+      <KeyboardArrowDown
+        sx={(theme) => ({ color: theme.tokens.color.Neutrals[50], ...sx })}
+      />
     );
   };
 

From 7907073071abd7d003000c7e6883054059c15d10 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 14:30:01 +0530
Subject: [PATCH 08/13] Replace `#cdd0d5` with
 `theme.tokens.color.Neutrals[30]`

---
 .../DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts | 4 ++--
 .../legacy/DatabaseSummaryConnectionDetailsLegacy.tsx         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
index a61db9661f8..c6224958cce 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
@@ -19,7 +19,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
@@ -27,7 +27,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
index 2f9288bddd3..28d10506d3b 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,

From f08a5c70d3fdd0c80bfe8940d3a826491fd4587e Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 16:14:22 +0530
Subject: [PATCH 09/13] Replace `#ccc` with `theme.tokens.color.Neutrals[40]`

---
 packages/manager/src/components/Checkbox.tsx              | 4 ++--
 .../components/CopyableTextField/CopyableTextField.tsx    | 6 ++++--
 .../src/components/EnhancedSelect/Select.styles.ts        | 8 ++++----
 .../DatabaseSummaryConnectionDetails.style.ts             | 4 +++-
 .../legacy/DatabaseSummaryConnectionDetailsLegacy.tsx     | 4 +++-
 .../ObjectStorage/AccessKeyLanding/HostNamesList.tsx      | 4 +++-
 .../PhoneVerification/PhoneVerification.styles.ts         | 5 ++++-
 7 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/manager/src/components/Checkbox.tsx b/packages/manager/src/components/Checkbox.tsx
index 036779e0a61..bb7820f3769 100644
--- a/packages/manager/src/components/Checkbox.tsx
+++ b/packages/manager/src/components/Checkbox.tsx
@@ -78,7 +78,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
   '&:hover': {
     color: theme.palette.primary.main,
   },
-  color: '#ccc',
+  color: theme.tokens.color.Neutrals[40],
   transition: theme.transitions.create(['color']),
   ...(props.checked && {
     color: theme.palette.primary.main,
@@ -88,7 +88,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
       fill: `${theme.bg.main}`,
       opacity: 0.5,
     },
-    color: '#ccc !important',
+    color: `${theme.tokens.color.Neutrals[40]} !important`,
     fill: `${theme.bg.main} !important`,
     pointerEvents: 'none',
   }),
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index fc03b58f186..04fc8f87766 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -60,7 +60,8 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   '.removeDisabledStyles': {
     '& .MuiInput-input': {
       WebkitTextFillColor: 'unset !important',
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222',
       color:
         theme.name === 'light'
           ? `${theme.palette.text.primary} !important`
@@ -68,7 +69,8 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222',
       opacity: 1,
     },
   },
diff --git a/packages/manager/src/components/EnhancedSelect/Select.styles.ts b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
index def55c13e51..3d1b2d4260f 100644
--- a/packages/manager/src/components/EnhancedSelect/Select.styles.ts
+++ b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
@@ -86,7 +86,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& .react-select__control': {
       '&:hover': {
-        border: `1px dotted #ccc`,
+        border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
         cursor: 'text',
       },
       '&--is-focused, &--is-focused:hover': {
@@ -136,7 +136,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
         width: 8,
       },
       '&::-webkit-scrollbar-thumb': {
-        backgroundColor: '#ccc',
+        backgroundColor: theme.tokens.color.Neutrals[40],
         borderRadius: 8,
       },
       backgroundColor: theme.bg.white,
@@ -290,7 +290,7 @@ export const reactSelectStyles = (theme: Theme) => ({
   control: (base: any) => ({
     ...base,
     '&:hover': {
-      border: `1px dotted #ccc`,
+      border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
       cursor: 'text',
     },
     '&--is-focused, &--is-focused:hover': {
@@ -349,7 +349,7 @@ export const reactSelectStyles = (theme: Theme) => ({
       width: 8,
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '#ccc',
+      backgroundColor: theme.tokens.color.Neutrals[40],
       borderRadius: 8,
     },
     backgroundColor: theme.bg.white,
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
index c6224958cce..a030ea39c21 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
@@ -47,7 +47,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.tokens.interaction.Background.Secondary,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+    }`,
     padding: `${theme.spacing(1)} 15px`,
   },
   copyToolTip: {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
index 28d10506d3b..3f7978033a5 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
@@ -64,7 +64,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.bg.bgAccessRowTransparentGradient,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+    }`,
     padding: '8px 15px',
   },
   copyToolTip: {
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
index 7229f67a0fd..66644b831ee 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
@@ -27,7 +27,9 @@ export const HostNamesList = ({ objectStorageKey }: Props) => {
       <StyledBoxShadowWrapper
         sx={(theme) => ({
           backgroundColor: theme.bg.main,
-          border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+          border: `1px solid ${
+            theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+          }`,
           minHeight: '34px',
         })}
         displayShadow={currentListHeight > maxHeight}
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 3194d85c90f..b9e4e94ba22 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -37,7 +37,10 @@ export const StyledInputContainer = styled(Box, {
   shouldForwardProp: omittedProps(['isPhoneInputFocused']),
 })<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
   backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
-  border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
+  border:
+    theme.name === 'light'
+      ? `1px solid ${theme.tokens.color.Neutrals[40]}`
+      : '1px solid #222',
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
   ...(isPhoneInputFocused &&

From 8fab5fd3339f35f80fe00cb74e05fd48ddcf85a6 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 16:29:13 +0530
Subject: [PATCH 10/13] Replace `#222` with `theme.tokens.color.Neutrals.Black`

---
 .../components/CopyableTextField/CopyableTextField.tsx    | 8 ++++++--
 .../DatabaseSummaryConnectionDetails.style.ts             | 4 +++-
 .../legacy/DatabaseSummaryConnectionDetailsLegacy.tsx     | 4 +++-
 .../manager/src/features/Events/FormattedEventMessage.tsx | 3 ++-
 .../ObjectStorage/AccessKeyLanding/HostNamesList.tsx      | 4 +++-
 .../PhoneVerification/PhoneVerification.styles.ts         | 4 ++--
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index 04fc8f87766..7d3f057975f 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -61,7 +61,9 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
     '& .MuiInput-input': {
       WebkitTextFillColor: 'unset !important',
       borderColor:
-        theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222',
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       color:
         theme.name === 'light'
           ? `${theme.palette.text.primary} !important`
@@ -70,7 +72,9 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
     },
     '&& .MuiInput-root': {
       borderColor:
-        theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222',
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       opacity: 1,
     },
   },
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
index a030ea39c21..582873cb1a6 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
@@ -48,7 +48,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     background: theme.tokens.interaction.Background.Secondary,
     border: `1px solid ${
-      theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
     }`,
     padding: `${theme.spacing(1)} 15px`,
   },
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
index 3f7978033a5..849f5924418 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
@@ -65,7 +65,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     background: theme.bg.bgAccessRowTransparentGradient,
     border: `1px solid ${
-      theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
     }`,
     padding: '8px 15px',
   },
diff --git a/packages/manager/src/features/Events/FormattedEventMessage.tsx b/packages/manager/src/features/Events/FormattedEventMessage.tsx
index 6a0677a7d75..6dbc9201a5f 100644
--- a/packages/manager/src/features/Events/FormattedEventMessage.tsx
+++ b/packages/manager/src/features/Events/FormattedEventMessage.tsx
@@ -58,7 +58,8 @@ const formatMessage = (message: string): JSX.Element => {
 };
 
 const StyledPre = styled('pre')(({ theme }) => ({
-  backgroundColor: theme.name === 'dark' ? '#222' : '#f4f4f4',
+  backgroundColor:
+    theme.name === 'dark' ? theme.tokens.color.Neutrals.Black : '#f4f4f4',
   borderRadius: 4,
   display: 'inline',
   fontSize: '0.75rem',
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
index 66644b831ee..5591b4c05f1 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
@@ -28,7 +28,9 @@ export const HostNamesList = ({ objectStorageKey }: Props) => {
         sx={(theme) => ({
           backgroundColor: theme.bg.main,
           border: `1px solid ${
-            theme.name === 'light' ? theme.tokens.color.Neutrals[40] : '#222'
+            theme.name === 'light'
+              ? theme.tokens.color.Neutrals[40]
+              : theme.tokens.color.Neutrals.Black
           }`,
           minHeight: '34px',
         })}
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index b9e4e94ba22..d017870775b 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -40,7 +40,7 @@ export const StyledInputContainer = styled(Box, {
   border:
     theme.name === 'light'
       ? `1px solid ${theme.tokens.color.Neutrals[40]}`
-      : '1px solid #222',
+      : `1px solid ${theme.tokens.color.Neutrals.Black}`,
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
   ...(isPhoneInputFocused &&
@@ -51,7 +51,7 @@ export const StyledInputContainer = styled(Box, {
         }
       : {
           borderColor: '#3683dc',
-          boxShadow: '0 0 2px 1px #222',
+          boxShadow: `0 0 2px 1px ${theme.tokens.color.Neutrals.Black}`,
         })),
 }));
 

From 015169c21b9ce6f0d81758182f00cf05937a2231 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 12 Nov 2024 16:42:15 +0530
Subject: [PATCH 11/13] Replace `#f4f4f4` with `theme.tokens.color.Neutrals[5]`
 or equivalent

---
 .../manager/src/features/Events/FormattedEventMessage.tsx     | 4 +++-
 packages/ui/src/foundations/themes/light.ts                   | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Events/FormattedEventMessage.tsx b/packages/manager/src/features/Events/FormattedEventMessage.tsx
index 6dbc9201a5f..f378c933be1 100644
--- a/packages/manager/src/features/Events/FormattedEventMessage.tsx
+++ b/packages/manager/src/features/Events/FormattedEventMessage.tsx
@@ -59,7 +59,9 @@ const formatMessage = (message: string): JSX.Element => {
 
 const StyledPre = styled('pre')(({ theme }) => ({
   backgroundColor:
-    theme.name === 'dark' ? theme.tokens.color.Neutrals.Black : '#f4f4f4',
+    theme.name === 'dark'
+      ? theme.tokens.color.Neutrals.Black
+      : theme.tokens.color.Neutrals[5],
   borderRadius: 4,
   display: 'inline',
   fontSize: '0.75rem',
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index 62d79ec487d..78381da15ab 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -832,7 +832,7 @@ export const lightTheme: ThemeOptions = {
             fontSize: 18,
           },
           '&.Mui-disabled': {
-            backgroundColor: '#f4f4f4',
+            backgroundColor: Color.Neutrals[5],
             borderColor: Color.Neutrals[40],
             color: 'rgba(0, 0, 0, 0.75)',
             input: {

From 8d8dc90663cf86805ec3d1a3afbd4a996e4d4fff Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Fri, 15 Nov 2024 12:51:17 +0530
Subject: [PATCH 12/13] Update changeset file

---
 ...-1731391925729.md => pr-11241-tech-stories-1731391925729.md} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/manager/.changeset/{pr-11241-upcoming-features-1731391925729.md => pr-11241-tech-stories-1731391925729.md} (77%)

diff --git a/packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md b/packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md
similarity index 77%
rename from packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md
rename to packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md
index a9ba998b172..6cbf2765331 100644
--- a/packages/manager/.changeset/pr-11241-upcoming-features-1731391925729.md
+++ b/packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md
@@ -1,5 +1,5 @@
 ---
-"@linode/manager": Upcoming Features
+'@linode/manager': Tech Stories
 ---
 
 Replace one-off hardcoded color values with color tokens pt3 ([#11241](https://github.com/linode/manager/pull/11241))

From 3db71fd89e5ed8c34a661be1dcc61c9c2cb03315 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Fri, 15 Nov 2024 12:54:59 +0530
Subject: [PATCH 13/13] Remove color instances from Divider component

---
 packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 07a60e5927c..4ee1b13ba4f 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -290,7 +290,7 @@ export const UserMenu = React.memo(() => {
           )}
           <Box>
             <Heading>My Profile</Heading>
-            <Divider color="#9ea4ae" />
+            <Divider />
             <Grid columnSpacing={2} container rowSpacing={1}>
               <Grid container direction="column" wrap="nowrap" xs={6}>
                 {profileLinks.slice(0, 4).map(renderLink)}
@@ -303,7 +303,7 @@ export const UserMenu = React.memo(() => {
           {hasAccountAccess && (
             <Box>
               <Heading>Account</Heading>
-              <Divider color="#9ea4ae" />
+              <Divider />
               <Stack mt={1} spacing={1.5}>
                 {accountLinks.map((menuLink) =>
                   menuLink.hide ? null : (