Refactor v2 css variable names into post css variables (#2791)

We don't want to clog up the variables list with every
design token from AirTable. Instead, more efficient to
use Post CSS var's that compile down into the CSS bundle
more efficiently.

CORL-748

.vscode/settings.json

@@ -12,10 +12,10 @@
   },
   "tslint.enable": false,
   "eslint.validate": [
-		{ "language": "javascript", "autoFix": true },
-		{ "language": "typescript", "autoFix": true },
-		{ "language": "typescriptreact", "autoFix": true }
-	],
+    { "language": "javascript", "autoFix": true },
+    { "language": "typescript", "autoFix": true },
+    { "language": "typescriptreact", "autoFix": true }
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "postcss.validate": false,
   "javascript.preferences.importModuleSpecifier": "non-relative",
@@ -44,18 +44,15 @@
     {
       "regex": "^[.]",
       "orderLevel": 50
-    },
+    }
   ],
   "importSorter.importStringConfiguration.maximumNumberOfImportExpressionsPerLine.type": "newLineEachExpressionAfterCountLimitExceptIfOnlyOne",
   "importSorter.importStringConfiguration.trailingComma": "multiLine",
   "importSorter.importStringConfiguration.tabSize": 2,
   "eslint.enable": true,
-  "importSorter.generalConfiguration.exclude": [
-    "d\\.ts$",
-    "__generated__"
-  ],
-  "debug.node.autoAttach": "on",
+  "importSorter.generalConfiguration.exclude": ["d\\.ts$", "__generated__"],
   "search.exclude": {
     "package-lock.json": true
   },
+  "debug.node.autoAttach": "off"
 }

src/core/client/admin/App/DecisionHistory/DecisionList.css

@@ -1,10 +1,12 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+
 .root {
   margin: 0;
   padding: 0;
   list-style-type: none;
 
   & > * {
-    border-bottom: 1px solid var(--v2-palette-decision-history-border);
+    border-bottom: 1px solid $decisionHistoryBorderColor;
   }
   & > *:last-child {
     border-bottom: 0;

src/core/client/admin/App/DecisionHistory/DotDivider.css

@@ -2,6 +2,6 @@
   height: 100%;
   font-size: var(--v2-font-size-1);
   line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-timestamp);
+  color: var(--v2-colors-mono-100);
   padding: 0 var(--v2-spacing-1);
 }

src/core/client/admin/App/DecisionHistory/GoToCommentLink.css

@@ -1,8 +1,10 @@
+$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+
 .root {
   line-height: var(--v2-line-height-reset);
   font-weight: var(--v2-font-weight-primary-bold);
   font-family: var(--v2-font-family-primary);
   font-size: var(--v2-font-size-1);
-  color: var(--v2-palette-link-text);
+  color: $moderateCardDecisionHistoryLinkTextColor;
   font-style: var(--v2-font-style-underline);
 }

src/core/client/admin/App/DecisionHistory/ShowMoreButton.css

@@ -1,12 +1,15 @@
+$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700);
+$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300);
+
 .root {
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-bold);
   font-family: var(--v2-font-family-primary);
   line-height: var(--v2-line-height-reset);
   text-transform: uppercase;
-  color: var(--v2-palette-link-text);
+  color: $moderateCardDecisionHistoryLinkTextColor;
   width: 100%;
-  border-top: 1px solid var(--v2-palette-decision-history-border);
+  border-top: 1px solid $moderateCardDecisionHistoryBorderColor;
   text-align: center;
   padding-top: var(--v2-spacing-1);
   padding-bottom: var(--v2-spacing-1);

src/core/client/admin/App/DecisionHistory/Timestamp.css

@@ -1,5 +1,7 @@
+$timestampColor: var(--v2-colors-mono-100);
+
 .root {
-  color: var(--v2-palette-timestamp);
+  color: $timestampColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-bold);
   font-size: var(--v2-font-size-1);

src/core/client/admin/App/DecisionHistory/Title.css

@@ -1,8 +1,11 @@
+$decisionHistoryBorderColor: var(--v2-colors-grey-300);
+$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200);
+
 .root {
-  background: var(--v2-palette-decision-history-title-background);
+  background: $decisionHistoryTitleBackgroundColor;
   padding: var(--v2-spacing-1);
   color: var(--v2-palette-text-primary);
-  border-bottom: 1px solid var(--v2-palette-decision-history-border);
+  border-bottom: 1px solid $decisionHistoryBorderColor;
   font-size: var(--v2-font-size-icon-medium);
 }
 

src/core/client/admin/App/DecisionHistory/Username.css

@@ -1,5 +1,7 @@
+$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900);
+
 .root {
-  color: var(--v2-palette-username-emphasis);
+  color: $moderateCardDecisionHistoryColor;
   font-weight: var(--v2-font-weight-secondary-bold);
   font-family: var(--v2-font-family-secondary);
   line-height: var(--v2-line-height-body-short);

src/core/client/admin/App/UserMenu/UserMenu.css

@@ -1,3 +1,5 @@
+$userMenuButtonColor: var(--v2-colors-mono-100);
+
 .button {
   padding-top: 0;
   padding-bottom: 0;
@@ -5,12 +7,12 @@
 }
 
 .icon {
-  color: var(--v2-palette-user-menu-button);
+  color: $userMenuButtonColor;
 }
 
 .buttonText {
   font-family: var(--v2-font-family-secondary);
-  color: var(--v2-palette-user-menu-button);
+  color: $userMenuButtonColor;
   font-size: var(--v2-font-size-4);
   margin-left: 2px;
   margin-right: 1px;

src/core/client/admin/components/ModerateCard/ApproveButton.css

@@ -1,5 +1,7 @@
+$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500);
+
 .root {
-  border: 1px solid var(--v2-palette-button-outline-approve);
+  border: 1px solid $moderateCardButtonOutlineApproveColor;
   box-sizing: border-box;
   border-radius: var(--v2-round-corners);
   width: 65px;
@@ -7,15 +9,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--v2-palette-button-outline-approve);
+  color: $moderateCardButtonOutlineApproveColor;
   &:not(:disabled):active {
-    background-color: var(--v2-palette-button-outline-approve);
+    background-color: $moderateCardButtonOutlineApproveColor;
     color: var(--v2-colors-pure-white);
   }
 }
 
 .invert {
-  background-color: var(--v2-palette-button-outline-approve);
+  background-color: $moderateCardButtonOutlineApproveColor;
   color: var(--v2-colors-pure-white);
 }
 

src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css

@@ -1,7 +1,9 @@
+$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);
+
 .category {
   font-size: var(--v2-font-size-4);
   font-weight: var(--v2-font-weight-primary-regular);
   font-family: var(--v2-font-family-primary);
   line-height: var(--v2-line-height-body-short);
-  color: var(--v2-palette-accordion-label);
+  color: $moderateCardFlagsCategoryColor;
 }

src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css

@@ -1,5 +1,8 @@
+$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
+$moderateCardReasonTextColor: var(--v2-colors-mono-500);
+
 .user {
-  color: var(--v2-palette-username-emphasis);
+  color: $moderateCardFlagUsernameColor;
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-secondary-bold);
   font-family: var(--v2-font-family-secondary);
@@ -8,7 +11,7 @@
 }
 
 .details {
-  color: var(--v2-palette-reason-text);
+  color: $moderateCardReasonTextColor;
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-regular);
   font-family: var(--v2-font-family-primary);

src/core/client/admin/components/ModerateCard/InReplyTo.css

@@ -1,15 +1,20 @@
+$moderateCardIconColor: var(--v2-colors-mono-100);
+$moderateCardInReplyToColor: var(--v2-colors-mono-100);
+$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500);
+$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+
 .icon {
-  color: var(--v2-palette-label-regular);
+  color: $moderateCardIconColor;
 }
 .inReplyTo {
-  color: var(--v2-palette-label-regular);
+  color: $moderateCardInReplyToColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-2);
   line-height: var(--v2-line-height-reset);
 }
 .username {
-  color: var(--v2-palette-username-regular);
+  color: $moderateCardInReplyToUsernameColor;
   font-family: var(--v2-font-family-secondary);
   font-weight: var(--v2-font-weight-secondary-bold);
   font-size: var(--v2-font-size-3);
@@ -18,13 +23,13 @@
   padding: var(--spacing-1);
 
   &:hover {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
     border-radius: var(--round-corners);
     border-style: none;
   }
 
   &:active {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
     border-radius: var(--round-corners);
     border-style: none;
   }

src/core/client/admin/components/ModerateCard/Markers.css

@@ -1,3 +1,6 @@
+$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
+$moderateCardDetailsDividerColor: var(--v2-colors-grey-100);
+
 .detailsButton {
   font-size: var(--v2-font-size-1);
   font-family: var(--v2-font-family-primary);
@@ -12,7 +15,7 @@
 }
 
 .detailsButtonColorRegular {
-  border-color: var(--v2-palette-details-header);
+  border-color: $moderateCardDetailsHeaderColor;
 }
 
 .detailsText {
@@ -20,5 +23,5 @@
 }
 
 .detailsDivider {
-  border-color: var(--v2-palette-details-divider);
+  border-color: $moderateCardDetailsDividerColor;
 }

src/core/client/admin/components/ModerateCard/ModerateCard.css

@@ -1,3 +1,11 @@
+$moderateCardTimestampColor: var(--v2-colors-mono-100);
+$moderateCardEditedColor: var(--v2-colors-mono-100);
+$moderateCardAuthorStatusColor: var(--v2-colors-mono-100);
+$moderateCardDecisionColor: var(--v2-colors-mono-500);
+$moderateCardStoryTitleColor: var(--v2-colors-mono-500);
+$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200);
+$moderateCardLinkTextColor: var(--v2-colors-teal-700);
+
 .topBar {
   position: relative;
   margin-bottom: var(--v2-spacing-1);
@@ -15,13 +23,13 @@
   line-height: var(--v2-line-height-reset);
 
   &:hover {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
     border-radius: var(--v2-round-corners);
     border-style: none;
   }
 
   &:active {
-    background-color: var(--v2-palette-username-background-hover);
+    background-color: $moderateCardUsernameBackgroundHover;
     border-radius: var(--v2-round-corners);
     border-style: none;
   }
@@ -76,7 +84,7 @@
 }
 
 .decision {
-  color: var(--v2-palette-label-emphasis);
+  color: $moderateCardDecisionColor;
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-bold);
   font-family: var(--v2-font-family-primary);
@@ -114,7 +122,7 @@
   font-weight: var(--v2-font-weight-primary-semi-bold);
   font-family: var(--v2-font-family-primary);
   line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-link-text);
+  color: $moderateCardLinkTextColor;
   text-transform: uppercase;
 }
 
@@ -133,7 +141,7 @@
 }
 
 .storyTitle {
-  color: var(--v2-palette-story-title);
+  color: $moderateCardStoryTitleColor;
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-regular);
   font-family: var(--v2-font-family-primary);
@@ -157,7 +165,7 @@
 }
 
 .timestamp {
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardTimestampColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-1);
@@ -165,7 +173,7 @@
 }
 
 .edited {
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardEditedColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-1);
@@ -179,7 +187,7 @@
 
 .authorStatus {
   padding-right: var(--spacing-2);
-  color: var(--v2-palette-timestamp);
+  color: $moderateCardAuthorStatusColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-1);

src/core/client/admin/components/ModerateCard/RejectButton.css

@@ -1,5 +1,7 @@
+$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500);
+
 .root {
-  border: 1px solid var(--v2-palette-button-outline-reject);
+  border: 1px solid $moderateCardButtonOutlineRejectColor;
   box-sizing: border-box;
   border-radius: var(--v2-round-corners);
   width: 65px;
@@ -7,15 +9,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--v2-palette-button-outline-reject);
+  color: $moderateCardButtonOutlineRejectColor;
   &:not(:disabled):active {
-    background-color: var(--v2-palette-button-outline-reject);
+    background-color: $moderateCardButtonOutlineRejectColor;
     color: var(--v2-colors-pure-white);
   }
 }
 
 .invert {
-  background-color: var(--v2-palette-button-outline-reject);
+  background-color: $moderateCardButtonOutlineRejectColor;
   color: var(--v2-colors-pure-white);
 }
 

src/core/client/admin/components/ModerateCard/ToxicityLabel.css

@@ -1,11 +1,14 @@
+$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500);
+$moderateCardToxicityColor: var(--v2-colors-mono-500);
+
 .root {
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-semi-bold);
   font-family: var(--v2-font-family-primary);
   line-height: var(--v2-line-height-body-short);
-  color: var(--v2-palette-accordion-label);
+  color: $moderateCardToxicityColor;
 }
 
 .likely {
-  color: var(--v2-palette-counter-badge-background-alert);
+  color: $moderateCardCounterBadgeBackgroundAlert;
 }

src/core/client/admin/components/ModerateCard/Username.css

@@ -1,7 +1,9 @@
+$moderateCardUsernameColor: var(--v2-colors-mono-900);
+
 .root {
   font-size: var(--v2-font-size-3);
   font-weight: var(--v2-font-weight-secondary-bold);
   font-family: var(--v2-font-family-secondary);
   line-height: var(--v2-line-height-reset);
-  color: var(--v2-palette-username-emphasis);
+  color: $moderateCardUsernameColor;
 }

src/core/client/admin/components/NotAvailable.css

@@ -1,3 +1,5 @@
+$tableBodyDisabledColor: var(--v2-colors-mono-100);
+
 .root {
-  color: var(--v2-palette-table-body-disabled);
+  color: $tableBodyDisabledColor;
 }

src/core/client/admin/components/UserRole/UserRoleText.css

@@ -1,10 +1,12 @@
+$tableBodyTextColor: var(--v2-colors-mono-500);
+
 .root {
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-semi-bold);
-  color: var(--v2-palette-table-body-text);
+  color: $tableBodyTextColor;
 }
 
 .commenter {
-  color: var(--v2-palette-table-body-text);
+  color: $tableBodyTextColor;
   font-weight: var(--v2-font-weight-primary-regular);
 }

src/core/client/admin/routes/Configure/ConfigBox.css

@@ -1,8 +1,10 @@
+$configureHeadingBackgroundColor: var(--v2-colors-blue-500);
+
 .root {
 }
 
 .title {
-  background: var(--v2-palette-configure-heading-background);
+  background: $configureHeadingBackgroundColor;
   width: calc(100% - 2 * var(--v2-spacing-2));
   padding: var(--v2-spacing-2);
 }

src/core/client/admin/routes/Configure/Header.css

@@ -1,8 +1,11 @@
+$configureHeadingBackgroundColor: var(--v2-colors-blue-500);
+$configureHeadingForegroundColor: var(--v2-colors-pure-white);
+
 .root {
   border-style: none;
   margin: 0;
-  background: var(--v2-palette-configure-heading-background);
-  color: var(--v2-palette-configure-heading-foreground);
+  background: $configureHeadingBackgroundColor;
+  color: $configureHeadingForegroundColor;
   font-size: var(--v2-font-size-3);
   font-weight: var(--v2-font-weight-primary-bold);
   line-height: var(--v2-line-height-reset);

src/core/client/admin/routes/Configure/HorizontalRule.css

@@ -1,5 +1,7 @@
+$configBoxBorderColor: var(--v2-colors-grey-300);
+
 .root {
   border: 0;
-  border-bottom: 1px solid var(--v2-palette-config-box-border);
+  border-bottom: 1px solid $configBoxBorderColor;
   padding-top: 1px;
 }

src/core/client/admin/routes/Configure/Link.css

@@ -1,5 +1,10 @@
+$sideNavItemColor: var(--v2-colors-mono-100);
+$sideNavBorderColor: var(--v2-colors-grey-300);
+$sideNavIndicatorColor: var(--v2-colors-coral-500);
+$sideNavActiveColor: var(--v2-colors-mono-500);
+
 .link {
-  color: var(--v2-palette-side-nav-item);
+  color: $sideNavItemColor;
   font-family: var(--v2-font-family-primary);
   font-size: var(--v2-font-size-4);
   line-height: var(--v2-line-height-title);
@@ -7,20 +12,20 @@
   display: inline-block;
   padding: var(--v2-spacing-2) var(--v2-spacing-2)
     var(--v2-spacing-2) calc(var(--v2-spacing-3) + 4px);
-  border-left: 1px solid var(--v2-palette-side-nav-border);
+  border-left: 1px solid $sideNavBorderColor;
   text-decoration: none;
 
   &:hover {
     cursor: pointer;
-    border-left: 2px solid var(--v2-palette-side-nav-indicator);
+    border-left: 2px solid $sideNavIndicatorColor;
     padding-left: calc(var(--v2-spacing-3) + 3px);
-    color: var(--v2-palette-side-nav-active);
+    color: $sideNavActiveColor;
   }
 }
 
 .linkActive, .linkActive:hover {
-  border-left: 4px solid var(--v2-palette-side-nav-indicator);
+  border-left: 4px solid $sideNavIndicatorColor;
   padding-left: var(--v2-spacing-3);
-  color: var(--v2-palette-side-nav-active);
+  color: $sideNavActiveColor;
   font-weight: var(--v2-font-weight-primary-bold);
 }

src/core/client/admin/routes/Configure/Subheader.css

@@ -1,6 +1,9 @@
+$configureHeadingForegroundColor: var(--v2-colors-pure-white);
+$configureSubHeadingBorderColor: var(--v2-colors-grey-300);
+
 .root {
-  border-bottom: 1px solid var(--v2-palette-configure-sub-heading-border);
-  color: var(--v2-palette-configure-sub-heading-foreground);
+  border-bottom: 1px solid $configureSubHeadingBorderColor;
+  color: $configureHeadingForegroundColor;
   font-family: var(--v2-font-family-primary);
   font-size: var(--v2-font-size-3);
   font-weight: var(--v2-font-weight-primary-bold);

src/core/client/admin/routes/Stories/StoryStatus/StoryStatusText.css

@@ -1,6 +1,8 @@
+$tableBodyDisabledColor: var(--v2-colors-mono-100);
+
 .root {
   font-weight: var(--v2-font-weight-primary-regular);
-  color: var(--v2-palette-table-body-disabled);
+  color: $tableBodyDisabledColor;
 }
 
 .open {

src/core/client/admin/routes/Stories/StoryTable.css

@@ -1,3 +1,5 @@
+$tableHeaderAltTextColor: var(--v2-colors-mono-100);
+
 .titleColumn {
   width: 50%;
 }
@@ -13,5 +15,5 @@
 .clickToModerate {
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-semi-bold);
-  color: var(--v2-palette-table-header-alt-text);
+  color: $tableHeaderAltTextColor;
 }

src/core/client/ui/components/v2/AppBar/AppBar.css

@@ -1,5 +1,7 @@
+$mainNavBackgroundDefaultColor: var(--v2-colors-pure-white);
+
 .root {
-  background-color: var(--v2-palette-main-nav-background-default);
+  background-color: $mainNavBackgroundDefaultColor;
   border-bottom: 1px solid var(--v2-palette-divider);
 }
 

src/core/client/ui/components/v2/AppBar/Divider.css

@@ -1,4 +1,6 @@
+$mainNavDividerColor: var(--v2-colors-grey-400);
+
 .root {
   height: 32px;
-  border-right: 2px solid var(--v2-palette-main-nav-divider);
+  border-right: 2px solid $mainNavDividerColor;
 }

src/core/client/ui/components/v2/Counter/Counter.css

@@ -1,3 +1,8 @@
+$counterBadgeForegroundColor: var(--v2-colors-pure-white);
+$counterBadgeBackgroundDefaultColor: var(--v2-colors-grey-500);
+$counterBadgeBackgroundEmphasisColor: var(--v2-colors-grey-500);
+$counterBadgeBackgroundAlertColor: var(--v2-colors-grey-500);
+
 .root {
   font-size: var(--v2-font-size-2);
   font-weight: var(--v2-font-weight-primary-bold);
@@ -16,7 +21,7 @@
 }
 
 .text {
-  color: var(--v2-palette-counter-badge-foreground);
+  color: $counterBadgeForegroundColor;
 }
 
 .colorInherit {
@@ -44,13 +49,13 @@
 }
 
 .colorEmphasis {
-  background-color: var(--v2-palette-counter-badge-background-emphasis);
+  background-color: $counterBadgeBackgroundEmphasisColor;
 }
 
 .colorDefault {
-  background-color: var(--v2-palette-counter-badge-background-default);
+  background-color: $counterBadgeBackgroundDefaultColor;
 }
 
 .colorAlert {
-  background-color: var(--v2-palette-counter-badge-background-alert);
+  background-color: $counterBadgeBackgroundAlertColor;
 }

src/core/client/ui/components/v2/Dropdown/Divider.css

@@ -1,6 +1,8 @@
+$dropdownDividerBorderColor: var(--v2-colors-grey-300);
+
 .root {
   border: 0;
-  border-bottom: 1px solid var(--v2-palette-dropdown-divider-border);
+  border-bottom: 1px solid $dropdownDividerBorderColor;
   margin: 0;
   padding: calc(0.5 * var(--mini-unit)) 0 0 0;
 }

src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css

@@ -1,5 +1,7 @@
+$configureDescriptionColor: var(--v2-colors-mono-500);
+
 .root {
-  color: var(--v2-palette-configure-description);
+  color: $configureDescriptionColor;
   line-height: var(--v2-line-height-body-short);
   font-size: var(--v2-font-size-3);
   font-family: var(--v2-font-family-primary);

src/core/client/ui/components/v2/Marker/Marker.css

@@ -1,10 +1,13 @@
+$markerReportedColor: var(--v2-colors-red-500);
+$markerPendingColor: var(--v2-colors-teal-700);
+
 .root {
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-semi-bold);
   font-size: 0.8125rem;
   letter-spacing: calc(-0.35em / 13);
 
-  color: var(--v2-palette-marker-reported);
+  color: $markerReportedColor;
   border: 1px solid currentColor;
   border-radius: 20px;
   padding: 1px var(--mini-unit);
@@ -12,11 +15,11 @@
 }
 
 .colorReported {
-  color: var(--v2-palette-marker-reported);
+  color: $markerReportedColor;
 }
 
 .colorPending {
-  color: var(--v2-palette-marker-pending);
+  color: $markerPendingColor;
 }
 
 .variantRegular {
@@ -25,12 +28,12 @@
 .variantFilled {
   color: var(--v2-colors-pure-white);
   &.colorReported {
-    background-color: var(--v2-palette-marker-reported);
-    border-color: var(--v2-palette-marker-reported);
+    background-color: $markerReportedColor;
+    border-color: $markerReportedColor;
   }
 
   &.colorPending {
-    background-color: var(--v2-palette-marker-pending);
-    border-color: var(--v2-palette-marker-pending);
+    background-color: $markerPendingColor;
+    border-color: $markerPendingColor;
   }
 }

src/core/client/ui/components/v2/Message/Message.css

@@ -1,3 +1,6 @@
+$messageErrorBackgroundColor: var(--v2-colors-red-500);
+$messageErrorForegroundColor: var(--v2-colors-pure-white);
+
 .root {
   position: relative;
   display: inline-flex;
@@ -25,8 +28,8 @@
 }
 
 .colorError {
-  background-color: var(--v2-palette-message-error-background);
-  color: var(--v2-palette-message-error-foreground);
+  background-color: $messageErrorBackgroundColor;
+  color: $messageErrorForegroundColor;
 }
 
 .colorPrimary {

src/core/client/ui/components/v2/Popover/Arrow.css

@@ -1,3 +1,8 @@
+$popoverBorderColor: var(--v2-colors-grey-400);
+$popoverBackgroundColor: var(--v2-colors-pure-white);
+$popoverDarkBackgroundColor: var(--v2-colors-grey-500);
+$popoverDarkBorderColor: var(--v2-colors-grey-500);
+
 .root {
   position: absolute;
   width: 20px;
@@ -12,22 +17,22 @@
     filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
     &::before {
       border-width: 0 10px 6px 10px;
-      border-color: transparent transparent var(--v2-palette-popover-border)
+      border-color: transparent transparent $popoverBorderColor
         transparent;
     }
     &::after {
       margin-top: -5px;
       border-width: 0 10px 6px 10px;
-      border-color: transparent transparent var(--v2-palette-popover-background)
+      border-color: transparent transparent $popoverBackgroundColor
         transparent;
     }
     &.colorDark {
       &::before {
-        border-color: transparent transparent var(--v2-palette-popover-dark-border)
+        border-color: transparent transparent $popoverDarkBorderColor
           transparent;
       }
       &::after {
-        border-color: transparent transparent var(--v2-palette-popover-dark-border)
+        border-color: transparent transparent $popoverDarkBorderColor
           transparent;
       }
     }
@@ -42,22 +47,22 @@
     filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.1));
     &::before {
       border-width: 6px 10px 0 10px;
-      border-color: var(--v2-palette-popover-border) transparent transparent
+      border-color: $popoverBorderColor transparent transparent
         transparent;
     }
     &::after {
       margin-top: -7px;
       border-width: 6px 10px 0 10px;
-      border-color: var(--v2-palette-popover-background) transparent transparent
+      border-color: $popoverBackgroundColor transparent transparent
         transparent;
     }
     &.colorDark {
       &::before {
-        border-color: var(--v2-palette-popover-dark-border) transparent transparent
+        border-color: $popoverDarkBorderColor transparent transparent
           transparent;
       }
       &::after {
-        border-color: var(--v2-palette-popover-dark-border) transparent transparent
+        border-color: $popoverDarkBorderColor transparent transparent
           transparent;
       }
     }
@@ -71,23 +76,23 @@
     filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.1));
     &::before {
       border-width: 10px 6px 10px 0;
-      border-color: transparent var(--v2-palette-popover-border) transparent
+      border-color: transparent $popoverBorderColor transparent
         transparent;
     }
     &::after {
       margin-top: -20px;
       margin-right: -1px;
       border-width: 10px 6px 10px 0;
-      border-color: transparent var(--v2-palette-popover-background) transparent
+      border-color: transparent $popoverBackgroundColor transparent
         transparent;
     }
     &.colorDark {
       &::before {
-        border-color: transparent var(--v2-palette-popover-dark-border) transparent
+        border-color: transparent $popoverDarkBorderColor transparent
           transparent;
       }
       &::after {
-        border-color: transparent var(--v2-palette-popover-dark-border) transparent
+        border-color: transparent $popoverDarkBorderColor transparent
           transparent;
       }
     }
@@ -102,23 +107,23 @@
     &::before {
       border-width: 10px 0 10px 6px;
       border-color: transparent transparent transparent
-        var(--v2-palette-popover-border);
+        $popoverBorderColor;
     }
     &::after {
       margin-top: -20px;
       margin-left: -1px;
       border-width: 10px 0 10px 6px;
       border-color: transparent transparent transparent
-        var(--v2-palette-popover-background);
+        $popoverBackgroundColor;
     }
     &.colorDark {
       &::before {
         border-color: transparent transparent transparent
-          var(--v2-palette-popover-dark-border);
+          $popoverDarkBorderColor;
       }
       &::after {
         border-color: transparent transparent transparent
-          var(--v2-palette-popover-dark-border);
+          $popoverDarkBorderColor;
       }
     }
   }

src/core/client/ui/components/v2/Popover/Popover.css

@@ -1,9 +1,14 @@
+$popoverBorderColor: var(--v2-colors-grey-400);
+$popoverBackgroundColor: var(--v2-colors-pure-white);
+$popoverDarkBackgroundColor: var(--v2-colors-grey-500);
+$popoverDarkBorderColor: var(--v2-colors-grey-500);
+
 .root {
 }
 
 .popover {
-  background: var(--v2-palette-popover-background);
-  border: 1px solid var(--v2-palette-popover-border);
+  background: $popoverBackgroundColor;
+  border: 1px solid $popoverBorderColor;
   box-sizing: border-box;
   box-shadow: var(--elevation-main);
   border-radius: var(--round-corners);
@@ -12,8 +17,8 @@
 }
 
 .colorDark {
-  background: var(--v2-palette-popover-dark-background);
-  border-color: var(--v2-palette-popover-dark-border);
+  background: $popoverDarkBackgroundColor;
+  border-color: $popoverDarkBorderColor;
 }
 
 .top {

src/core/client/ui/components/v2/Table/TableCell.css

@@ -1,3 +1,6 @@
+$tableBodyTextColor: var(--v2-colors-mono-500);
+$tableHeaderTextColor: var(--v2-colors-mono-500);
+
 .root {
   /* acts like min-width in a cell */
   height: calc(4.5 * var(--mini-unit));
@@ -11,7 +14,7 @@
   line-height: var(--v2-line-height-reset);
   font-weight: var(--v2-font-weight-primary-bold);
   font-size: var(--v2-font-size-2);
-  color: var(--v2-palette-table-header-text);
+  color: $tableHeaderTextColor;
   padding: var(--v2-spacing-3);
 }
 
@@ -20,7 +23,7 @@
   line-height: var(--v2-line-height-title);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-2);
-  color: var(--v2-palette-table-body-text);
+  color: $tableBodyTextColor;
 }
 
 .alignCenter {

src/core/client/ui/components/v2/Table/TableHead.css

@@ -1,4 +1,6 @@
+$tableHeaderBackgroundColor: var(--v2-colors-grey-200);
+
 .root {
-  background: var(--v2-palette-table-header-background);
+  background: $tableHeaderBackgroundColor;
   box-sizing: border-box;
 }

src/core/client/ui/components/v2/Table/TableRow.css

@@ -1,11 +1,14 @@
+$tableHighlightColor: var(--v2-colors-grey-100);
+$tableHoverColor: var(--v2-colors-teal-100);
+
 .root {
   box-sizing: border-box;
 }
 
 .body:nth-child(even) {
-  background-color: var(--v2-palette-table-highlight);
+  background-color: $tableHighlightColor;
 }
 
 .body:hover {
-  background-color: var(--v2-palette-table-hover);
+  background-color: $tableHoverColor;
 }

src/core/client/ui/components/v2/Tabs/TabBar.css

@@ -1,3 +1,7 @@
+$moderateCardTabDefaultColor: var(--v2-colors-grey-100);
+$moderateCardTabPrimaryColor: var(--v2-colors-grey-300);
+$moderateCardTabSecondaryColor: var(--v2-palette-divider);
+
 .root {
   display: flex;
   padding: 0;
@@ -5,13 +9,13 @@
 }
 
 .default {
-  border-bottom: 1px solid var(--v2-palette-tab-divider);
+  border-bottom: 1px solid $moderateCardTabDefaultColor;
 }
 
 .primary {
-  border-bottom: 1px solid var(--palette-grey-lighter);
+  border-bottom: 1px solid $moderateCardTabPrimaryColor;
 }
 
 .secondary {
-  border-bottom: 1px solid var(--palette-divider);
+  border-bottom: 1px solid $moderateCardTabSecondaryColor;
 }

src/core/client/ui/components/v2/Timestamp/Timestamp.css

@@ -1,9 +1,11 @@
+$timestampColor: var(--v2-colors-mono-100);
+
 .root {
   cursor: default;
 }
 
 .text {
-  color: var(--v2-palette-timestamp);
+  color: $timestampColor;
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-regular);
   font-size: var(--v2-font-size-2);

src/core/client/ui/theme/variables2.ts

@@ -102,117 +102,6 @@ const variables2 = {
       main: colors.green500,
     },
     divider: "rgba(0, 0, 0, 0.12)",
-    // New Tokens
-    timestamp: colors.mono100,
-    label: {
-      regular: colors.mono100,
-      emphasis: colors.mono500,
-    },
-    storyTitle: colors.mono500,
-    username: {
-      regular: colors.mono500,
-      emphasis: colors.mono900,
-      background: {
-        hover: colors.grey200,
-      },
-    },
-    commentText: colors.mono900,
-    linkText: colors.teal700,
-    marker: {
-      reported: colors.red500,
-      pending: colors.teal700,
-    },
-    counterBadge: {
-      background: {
-        default: colors.grey500,
-        emphasis: colors.teal600,
-        alert: colors.red500,
-      },
-      foreground: colors.pure.white,
-    },
-    button: {
-      outline: {
-        approve: colors.green500,
-        reject: colors.red500,
-        labelSecondary: colors.mono100,
-      },
-    },
-    accordionLabel: colors.mono500,
-    reasonText: colors.mono500,
-    details: {
-      header: colors.mono500,
-      divider: colors.grey100,
-    },
-    tab: {
-      default: colors.mono100,
-      active: colors.teal600,
-      divider: colors.grey100,
-    },
-    table: {
-      header: {
-        background: colors.grey200,
-        text: colors.mono500,
-        altText: colors.mono100,
-      },
-      body: {
-        text: colors.mono500,
-        disabled: colors.mono100,
-      },
-      highlight: colors.grey100,
-      hover: colors.teal100,
-    },
-    mainNav: {
-      text: {
-        default: colors.mono100,
-        active: colors.pure.white,
-      },
-      background: {
-        default: colors.pure.white,
-        active: colors.coral500,
-        hover: colors.coral200,
-      },
-      divider: colors.grey400,
-    },
-    storySearch: {
-      storyTitle: colors.mono900,
-      results: {
-        heading: colors.white500,
-        headingBackground: colors.grey500,
-        seeAllLabel: colors.white500,
-        seeAllBackground: colors.blue500,
-        border: colors.grey400,
-        divider: colors.grey300,
-      },
-      background: colors.teal600,
-      input: {
-        text: colors.mono500,
-        label: colors.mono500,
-        background: colors.pure.white,
-      },
-    },
-    popover: {
-      border: colors.grey400,
-      background: colors.pure.white,
-      dark: {
-        background: colors.grey500,
-        border: colors.grey500,
-      },
-    },
-    dropdown: {
-      background: colors.pure.white,
-      divider: {
-        border: colors.grey300,
-      },
-    },
-    userMenu: {
-      button: colors.mono100,
-    },
-    decisionHistory: {
-      border: colors.grey300,
-      title: {
-        background: colors.grey200,
-      },
-    },
     input: {
       value: colors.mono500,
       placeholder: colors.mono100,
@@ -232,41 +121,6 @@ const variables2 = {
         border: colors.red500,
       },
     },
-    searchButton: {
-      icon: colors.white500,
-      background: colors.blue500,
-    },
-    sideNav: {
-      item: colors.mono100,
-      border: colors.grey300,
-      indicator: colors.coral500,
-      active: colors.mono500,
-    },
-    configure: {
-      heading: {
-        background: colors.blue500,
-        foreground: colors.pure.white,
-      },
-      description: colors.mono500,
-      subHeading: {
-        foreground: colors.mono500,
-        border: colors.grey300,
-      },
-      subDescription: colors.mono500,
-    },
-    configHeading: {
-      background: colors.blue500,
-      foreground: colors.pure.white,
-    },
-    configBox: {
-      border: colors.grey300,
-    },
-    message: {
-      error: {
-        background: colors.red500,
-        foreground: colors.pure.white,
-      },
-    },
   },
   fontFamily: {
     primary: "Open Sans",