diff --git a/web/invite-links/copy-invite-link-button.css b/web/invite-links/copy-invite-link-button.css
index 66dcd59dd..24fb10a49 100644
--- a/web/invite-links/copy-invite-link-button.css
+++ b/web/invite-links/copy-invite-link-button.css
@@ -1,24 +1,24 @@
 .linkContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background: var(--text-input-bg);
+  background: var(--inputField-background-secondary-default);
   padding: 12px 16px;
   border-radius: 20px;
 }
 
 .linkUrl {
   font-size: var(--m-font-16);
-  color: var(--label-default-color);
+  color: var(--text-background-secondary-default);
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .linkCopyButton {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   font-size: var(--xs-font-12);
   display: flex;
   flex-direction: row;
   gap: 8px;
 }
diff --git a/web/invite-links/manage/empty-link-content.react.js b/web/invite-links/manage/empty-link-content.react.js
index 0ab80a7eb..e99bb9e9c 100644
--- a/web/invite-links/manage/empty-link-content.react.js
+++ b/web/invite-links/manage/empty-link-content.react.js
@@ -1,28 +1,28 @@
 // @flow
 
 import * as React from 'react';
 
 import css from './manage-invite-links-modal.css';
 import Button from '../../components/button.react.js';
 
 const buttonColor = {
-  color: 'var(--purple-link)',
+  color: 'var(--link-background-primary-default)',
 };
 
 type Props = {
   +enterEditMode: () => mixed,
 };
 
 function EmptyLinkContent(props: Props): React.Node {
   const { enterEditMode } = props;
   return (
     <div className={css.sectionHeaderRow}>
       <div className={css.sectionHeaderText}>Public link</div>
       <Button variant="text" buttonColor={buttonColor} onClick={enterEditMode}>
         Enable
       </Button>
     </div>
   );
 }
 
 export default EmptyLinkContent;
diff --git a/web/invite-links/manage/existing-link-content.react.js b/web/invite-links/manage/existing-link-content.react.js
index 6d32e0e35..504a6616d 100644
--- a/web/invite-links/manage/existing-link-content.react.js
+++ b/web/invite-links/manage/existing-link-content.react.js
@@ -1,44 +1,44 @@
 // @flow
 
 import * as React from 'react';
 
 import type { InviteLink } from 'lib/types/link-types.js';
 
 import css from './manage-invite-links-modal.css';
 import Button from '../../components/button.react.js';
 import CopyInviteLinkButton from '../copy-invite-link-button.react.js';
 
 const buttonColor = {
-  color: 'var(--purple-link)',
+  color: 'var(--link-background-primary-default)',
 };
 
 type Props = {
   +inviteLink: InviteLink,
   +enterEditMode: () => mixed,
 };
 function ExistingLinkContent(props: Props): React.Node {
   const { inviteLink, enterEditMode } = props;
   return (
     <>
       <div className={css.sectionHeaderRow}>
         <div className={css.sectionHeaderText}>Public link</div>
       </div>
       <div>
         <CopyInviteLinkButton inviteLink={inviteLink} />
         <div className={css.description}>
           {'Public links allow unlimited uses and never expire. '}
           <Button
             variant="text"
             buttonColor={buttonColor}
             className={css.inlineButton}
             onClick={enterEditMode}
           >
             Edit public link
           </Button>
         </div>
       </div>
     </>
   );
 }
 
 export default ExistingLinkContent;
diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css
index d06a8c92f..71413201f 100644
--- a/web/invite-links/manage/manage-invite-links-modal.css
+++ b/web/invite-links/manage/manage-invite-links-modal.css
@@ -1,97 +1,97 @@
 .container {
   font-size: var(--m-font-16);
   padding: 24px 32px;
 }
 
 .sectionHeaderRow {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
 
 .sectionHeaderText {
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   margin-bottom: 16px;
 }
 
 .description {
   font-size: var(--s-font-14);
-  color: var(--fg);
+  color: var(--text-background-primary-default);
   margin-top: 8px;
 }
 
 .inlineButton {
   display: inline;
   font-size: var(--s-font-14);
 }
 
 .editLinkContainer {
   display: flex;
   flex-direction: column;
   gap: 32px;
   color: var(--modal-fg);
   font-size: var(--s-font-14);
 }
 
 .editLinkDescription {
   font-weight: var(--semi-bold);
   color: var(--modal-fg);
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .editLinkDescription p {
   font-size: var(--s-font-14);
 }
 
 .separator {
   border-color: var(--border-color);
   margin: 0;
 }
 
 .linkSection {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .linkRow {
   display: flex;
   font-size: var(--m-font-16);
   align-items: center;
   gap: 8px;
 }
 
 .buttonRow {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
 }
 
 .buttonRowWithError {
   margin-top: 8px;
 }
 
 .errorContainer {
   display: flex;
   justify-content: center;
   font-size: var(--s-font-14);
   color: var(--error-primary);
 }
 
 .disableLinkRow {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   font-size: var(--s-font-14);
 }
 
 .disableLinkButtons {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }