Netflix · rsanteri · Feb 27, 2025 · Feb 26, 2025 · Feb 27, 2025
diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -55,8 +55,18 @@ const globalCSS = css`
   }
 
   code {
-    font-family: var(--font-family-code);
-    font-size: var(--font-size-4);
+    display: block;
+    background: var(--code-bg);
+    color: var(--code-text-color);
+    font-size: var(--code-font-size);
+    font-family: var(--code-font-family);
+    font-weight: var(--code-font-weight);
+    padding: var(--code-padding);
+    border-bottom: var(--code-border-bottom);
+    border-top: var(--code-border-top);
+    border-left: var(--code-border-left);
+    border-right: var(--code-border-right);
+    border-radius: var(--code-border-radius);
   }
 `;
 

diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx
@@ -380,6 +380,8 @@ const ContainerBaseStyle = css`
   border: var(--breadcrumb-border);
   height: var(--breadcrumb-height);
   background: var(--breadcrumb-bg);
+  box-shadow: var(--breadcrumb-shadow);
+  border-radius: var(--breadcrumb-border-radius);
 `;
 
 const BreadcrumbGroup = styled.div`
@@ -417,7 +419,8 @@ const ButtonCrumb = styled(BigButton)`
 
   padding-left: var(--spacing-3);
   padding-right: var(--spacing-3);
-  color: var(--color-text-primary);
+  font-weight: var(--breadcrumb-font-weight);
+  color: var(--breadcrumb-text-color);
 
   overflow-x: hidden;
   max-width: 18.75rem;
@@ -426,6 +429,8 @@ const ButtonCrumb = styled(BigButton)`
 
   &.active {
     background: transparent;
+    font-weight: var(--breadcrumb-highlight-font-weight);
+    color: var(--breadcrumb-highlight-text-color);
   }
 
   &:hover {
@@ -437,7 +442,7 @@ const ButtonCrumb = styled(BigButton)`
 const BreadcrumbDivider = styled.div`
   display: inline-block;
   pointer-events: none;
-  color: var(--color-text-primary);
+  color: var(--breadcrumb-text-color);
   font-weight: bold;
   &:after {
     content: '/';
@@ -465,9 +470,11 @@ const StyledBreadcrumb = styled(ItemRow)`
 
 const BreadcrumbInputWrapper = styled(InputWrapper)`
   ${ContainerBaseStyle}
+  box-shadow: none;
 `;
 
 const GoToHolder = styled.div`
+  margin-right: 0;
   position: relative;
   font-size: var(--font-size-primary);
   height: var(--breadcrumb-height);
@@ -480,7 +487,7 @@ const GoToContainer = styled.div`
   top: calc(var(--spacing-3) * -1);
   left: calc(var(--spacing-3) * -1);
   ${PopoverStyles}
-  width: 100%;
+  width: calc(100% + var(--spacing-3));
 `;
 
 const GotoClose = styled.div`

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -155,7 +155,7 @@ export const ButtonCSS = css`
 
 const StyledButton = styled.button<StyledButtonProps>`
   ${ButtonCSS};
-  padding: var(--spacing-1) ${(p) => (p.iconOnly ? 'var(--spacing-1)' : 'var(--spacing-3)')};
+  padding: ${(p) => (p.iconOnly ? 'var(--icon-button-padding)' : 'var(--button-padding)')};
   ${(p) => getButtonColors(p.variant)};
   ${(p) => p.active && ActiveButtonCSS};
   ${(p) => p.disabled && DisabledButtonCSS};

diff --git a/src/components/Collapsable/index.tsx b/src/components/Collapsable/index.tsx
@@ -38,6 +38,7 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
     <CollapseContainer>
       <Container active={transitioning}>
         <CollapsableHeader
+          open={open}
           onClick={() => {
             setTransitioning(true);
             setOpen(!open);
@@ -65,15 +66,17 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
 //
 
 const CollapseContainer = styled.div`
-  margin: 0.5rem 0 1rem 0;
+  margin: var(--collapsable-margin);
+  border-bottom: var(--collapsable-content-border-bottom);
 `;
 
-const CollapsableHeader = styled.div`
+const CollapsableHeader = styled.div<{ open: boolean }>`
   display: flex;
   justify-content: flex-start;
+  font-family: var(--collapsable-header-font-family);
   font-size: var(--font-size-primary);
-  color: var(--collapsable-header-text-color);
   font-weight: 500;
+  color: ${(p) => (p.open ? 'var(--collapsable-header-open-text-color)' : 'var(--collapsable-header-text-color)')};
   line-height: 1.5rem;
   padding: var(--collapsable-header-padding);
   border-bottom: var(--collapsable-header-border-bottom);
@@ -86,7 +89,6 @@ const CollapsableHeader = styled.div`
 
 const ContentContainer = styled.div`
   position: relative;
-  border-bottom: var(--collapsable-content-border-bottom);
 `;
 
 const Content = styled.div<{ open: boolean; visible: boolean }>`

diff --git a/src/components/DataHeader/index.tsx b/src/components/DataHeader/index.tsx
@@ -44,7 +44,7 @@ const DataHeaderContainer = styled.div<{ isWide: boolean }>`
   font-size: var(--data-header-font-size);
   color: var(--data-header-text-color);
   margin: 0 ${(p) => (p.isWide ? 'calc(var(--layout-page-padding-x) * -1)' : '0')};
-  padding: 1rem ${(p) => (p.isWide ? 'var(--layout-page-padding-x)' : '0.5rem')};
+  padding: ${(p) => (p.isWide ? 'var(--data-header-padding-wide)' : 'var(--data-header-padding)')};
 `;
 
 const DataHeaderContent = styled.div`

diff --git a/src/components/Form/InputLabel.tsx b/src/components/Form/InputLabel.tsx
@@ -7,7 +7,7 @@ import { AsyncStatus } from '../../types';
 //
 
 export const InputLabel = styled(ForceNoWrapText)<{ active: boolean; status?: AsyncStatus }>`
-  background: var(--color-bg-primary);
+  background: inherit;
   font-size: var(--input-label-font-size);
   font-weight: var(--input-label-font-weight);
   padding: 0 0.25rem;

diff --git a/src/components/LogList/LogActionBar.tsx b/src/components/LogList/LogActionBar.tsx
@@ -127,6 +127,7 @@ const SearchContainer = styled.div`
 const LogActionBarContainer = styled.div<{ spaceAround: boolean }>`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-bottom: 1rem;
   padding: ${(p) => (p.spaceAround ? '0 1rem' : '0')};
 `;

diff --git a/src/components/LogList/index.tsx b/src/components/LogList/index.tsx
@@ -293,12 +293,9 @@ const PollLoader: React.FC<PollLoaderProps> = ({ status, preloadStatus }) => {
 // Style
 //
 
-const LogListContainer = styled.div`
-  background: var(--color-bg-secondary);
-  border-bottom: var(--border-primary-thin);
-  font-family: monospace;
-  border-radius: var(--radius-primary);
+const LogListContainer = styled.code`
   font-size: var(--font-size-primary);
+  padding: 0.25rem;
   position: relative;
   overflow: hidden;
   white-space: pre-wrap;
@@ -326,6 +323,7 @@ const LogLineText = styled.div`
   word-break: break-all;
   flex: 1;
   padding-right: 0.5rem;
+  line-height: 1rem;
 `;
 
 const ScrollToBottomButton = styled.div`

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
+import InputWrapper from '../Form/InputWrapper';
 
 //
 // Fixed container for popups
@@ -23,6 +24,10 @@ export const PopoverStyles = css`
   padding: var(--popover-padding);
   background: var(--popover-background);
   border-radius: var(--popover-border-radius);
+
+  ${InputWrapper} {
+    background: var(--popover-background);
+  }
 `;
 
 export const PopoverWrapper = styled.div<{ show: boolean; alignment?: 'left' | 'right' }>`

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -154,8 +154,17 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
     >
       <HeaderColumnWrapper>
         {label}
-        {sortable && <SortIcon active={active} direction={direction} padLeft />}
+        {sortable && (
+          <SortIconContainer>
+            <SortIcon active={active} direction={direction} padLeft />
+          </SortIconContainer>
+        )}
       </HeaderColumnWrapper>
     </TH>
   );
 };
+
+const SortIconContainer = styled.div`
+  display: inline-flex;
+  margin-left: var(--spacing-1);
+`;
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -37,7 +37,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, widen }) => {
 
   return (
     <TabsContainer>
-      <Scrollbars style={{ height: '2.875rem', width: '100%' }} autoHide>
+      <Scrollbars style={{ height: 'var(--tab-heading-height)', width: '100%' }} autoHide>
         <TabsHeading widen={widen}>
           {tabs.map((tab) =>
             tab.linkTo ? (
@@ -108,10 +108,12 @@ export const TabsHeadingItem = styled.div<{ active: boolean; temporary?: boolean
     p.active ? 'var(--tab-heading-item-active-border-bottom)' : 'var(--tab-heading-item-border-bottom)'};
   background: ${(p) =>
     p.temporary && p.active
-      ? 'var(--color-bg-secondary-highlight)'
+      ? 'var(--tab-heading-active-bg)'
       : p.temporary
         ? '#f6f6f6'
-        : 'var(--tab-heading-bg)'};
+        : p.active
+          ? 'var(--tab-heading-active-bg)'
+          : 'var(--tab-heading-bg)'};
   color: ${(p) => (p.active ? 'var(--tab-heading-active-text-color)' : 'var(--tab-heading-text-color)')};
   font-weight: ${(p) => (p.active ? 'var(--tab-heading-active-font-weight)' : 'var(--tab-heading-font-weight)')};
   cursor: pointer;

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -276,7 +276,7 @@ const StickyHeader: React.FC<{
 // Style
 //
 
-const ListContainer = styled.div<{ customMinHeight: number }>`
+export const ListContainer = styled.div<{ customMinHeight: number }>`
   flex: 1;
   min-height: ${(p) => `${p.customMinHeight}rem`};
   max-width: 100%;

diff --git a/src/components/TitledRow/index.tsx b/src/components/TitledRow/index.tsx
@@ -85,7 +85,7 @@ export function valueToRenderableType(
 //
 
 const StyledTitledRow = styled.div`
-  margin: 1rem 0 0.5rem 0;
+  margin: var(--titled-row-margin);
 `;
 
 const TitledRowTitle = styled.div`
@@ -112,13 +112,21 @@ const Row = styled.div`
   display: flex;
 
   &:not(:last-child) {
-    border-bottom: 2px solid #fff;
+    border-bottom: var(--titled-row-table-border-bottom);
   }
 
   div:first-child {
-    width: 200px;
-    min-width: 200px;
-    border-right: 2px solid #fff;
+    width: var(--titled-row-table-title-cell-width);
+    min-width: var(--titled-row-table-title-cell-width);
+    border-right: var(--titled-row-table-separator-border);
+  }
+
+  div:nth-child(2) {
+    flex: 1;
+    font-size: var(--titled-row-table-value-font-size);
+    font-weight: var(--titled-row-table-value-font-weight);
+    padding: var(--titled-row-table-value-padding);
+    color: var(--titled-row-table-value-text-color);
   }
 `;
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,4 @@
 import { FeatureFlags } from './utils/FEATURE';
-import { toRelativeSize } from './utils/style';
 
 declare global {
   interface Window {
@@ -37,9 +36,6 @@ export const formatUrl = (base: string, path: string): string => `${base}/${path
 export const apiHttp = (path: string): string => formatUrl(METAFLOW_SERVICE, path);
 export const apiWs = (path: string): string => formatUrl(METAFLOW_SERVICE_WS, path);
 
-export const HEADER_SIZE_PX = 112;
-export const HEADER_SIZE_REM = toRelativeSize(112 / 16);
-
 /**
  * Look for number of days to display in following order:
  *