Update border variables

Author: rsanteri

src/components/Collapsable/index.tsx

@@ -74,7 +74,7 @@ const CollapsableHeader = styled.div`
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.5rem;
-  border-bottom: var(--border-1-thin);
+  border-bottom: var(--border-thin-1);
   cursor: pointer;
 
   svg path {

src/components/DAG/components/DAGContent.tsx

@@ -281,7 +281,7 @@ const NormalItem = styled.div<{ state: TaskStatus }>`
 `;
 
 const BaseContainerStyle = css`
-  border: var(--border-2-thin);
+  border: var(--border-thin-2);
   background: #f6f6f6;
   display: flex;
   border-radius: var(--radius-secondary);

src/components/HelpMenu/index.tsx

@@ -144,7 +144,7 @@ const TimezoneSelectorContainer = styled.div`
 
 const HelpMenuTitle = styled.div`
   align-items: center;
-  border-bottom: var(--border-1-thin);
+  border-bottom: var(--border-thin-1);
   display: flex;
   justify-content: space-between;
   margin: 0 -0.5rem 0.5rem;

src/components/Tabs/index.tsx

@@ -83,7 +83,7 @@ const TabsContainer = styled.div`
 
 export const TabsHeading = styled.div<{ widen?: boolean }>`
   display: flex;
-  border-bottom: var(--border-1-medium);
+  border-bottom: var(--border-medium-1);
   margin: ${(p) => (p.widen ? '0 calc(var(--layout-page-padding-y) * -1)' : 'initial')};
   padding: ${(p) => (p.widen ? '0 var(--layout-page-padding-x)' : 'initial')};
   color: var(--color-text-secondary);

src/components/TaskListingHeader/TaskListingHeader.tsx

@@ -179,7 +179,7 @@ export function getMode(settings: TaskSettingsState): TaskListMode {
 //
 
 const TaskListingContainer = styled.div`
-  border-bottom: var(--border-1-medium);
+  border-bottom: var(--border-medium-1);
   font-size: 0.875rem;
   position: relative;
 `;

src/components/Timeline/Footer/MinimapActiveSection.tsx

@@ -62,8 +62,8 @@ const MiniTimelineActiveSection = styled.div<{ dragging: boolean }>`
   position: relative;
   height: 3.0625rem;
   background var(--color-bg-primary);
-  border-left: var(--border-1-thin);
-  border-right: var(--border-1-thin);
+  border-left: var(--border-thin-1);
+  border-right: var(--border-thin-1);
   border-bottom: 0.5rem solid var(--color-border-1);
   cursor: grab;
   transition: ${(p) => (p.dragging ? 'none' : '0.5s left, 0.5s width')};

src/components/Timeline/Footer/MinimapFooter.tsx

@@ -187,7 +187,7 @@ const MinimapFooterContent = styled.div`
   position: relative;
   flex: 1;
   background: var(--color-bg-secondary);
-  border-bottom: var(--border-1-thin);
+  border-bottom: var(--border-thin-1);
   height: 3.0625rem;
 `;
 

src/components/Timeline/Footer/index.tsx

@@ -34,7 +34,7 @@ const TimelineFooterContainer = styled.div`
   width: 100%;
   height: 2.5rem;
   margin-bottom: 1.5625rem;
-  border-top: var(--border-1-medium);
+  border-top: var(--border-medium-1);
 `;
 
 const TimelineFooterLeft = styled.div`

src/components/Timeline/TaskListLabel.tsx

@@ -128,7 +128,7 @@ const RowLabel = styled.div<{ type: 'step' | 'task'; isOpen?: boolean; group?: b
   font-size: ${(p) => (p.type === 'task' ? '0.75rem' : '0.875rem')};
   font-weight: ${(p) => (p.type === 'step' ? '600' : 'normal')};
   line-height: 1.6875rem;
-  border-left: var(--border-1-thin);
+  border-left: var(--border-thin-1);
   padding-left: ${(p) => (p.type === 'task' ? '0.5rem' : undefined)};
 
   a {

src/components/Timeline/TimelineRow/index.tsx

@@ -134,7 +134,7 @@ const StyledRow = styled.div`
   display: flex;
   width: 100%;
   min-height: 1.75rem;
-  border-bottom: var(--border-1-thin);
+  border-bottom: var(--border-thin-1);
   transition: background 0.15s;
 
   &:hover {
@@ -158,7 +158,7 @@ const StickyStyledRow = styled(StyledRow)`
 const RowContainerStyles = css`
   position: relative;
   width: 100%;
-  border-left: var(--border-1-thin);
+  border-left: var(--border-thin-1);
   overflow-x: hidden;
 `;
 

src/pages/Home/ResultGroup/ResultGroupRow.tsx

@@ -148,8 +148,8 @@ const StyledTD = styled.td`
 const StyledSection = styled(Section)<{ closing: boolean }>`
   padding: 0.5rem 0.5rem 0;
   margin-bottom 0;
-  border-right: var(--border-1-thin);
-  border-bottom: var(--border-1-thin);
+  border-right: var(--border-thin-1);
+  border-bottom: var(--border-thin-1);
   ${(p) => p.closing && 'position: absolute;'}
   width: 100%;
 `;

src/pages/Home/ResultGroup/TimelinePreview.tsx

@@ -74,7 +74,7 @@ const TimelinePreview: React.FC<TimelinePreviewProps> = ({ run }) => {
 const TimelinePreviewContainer = styled.div`
   max-height: 30rem;
   margin-top: 1rem;
-  border-top: var(--border-1-medium);
+  border-top: var(--border-medium-1);
 `;
 
 export default TimelinePreview;

src/pages/Task/components/TaskListRow.tsx

@@ -63,7 +63,7 @@ const TaskListRow: React.FC<Props> = ({
 };
 
 const TaskListRowContainer = styled.div<{ active: boolean }>`
-  border-bottom: var(--border-1-thin);
+  border-bottom: var(--border-thin-1);
 
   transition: 0.15s background;
   background: ${(p) => (p.active ? 'var(--color-bg-secondary-highlight)' : 'transparent')};

src/theme/theme.css

@@ -110,15 +110,15 @@
     /* Borders */
 
     --border-primary-thin: 1px solid var(--color-border-primary);
-    --border-1-thin: 1px solid var(--color-border-1);
-    --border-2-thin: 1px solid var(--color-border-2);
-    --border-3-thin: 1px solid var(--color-border-3);
+    --border-thin-1: 1px solid var(--color-border-1);
+    --border-thin-2: 1px solid var(--color-border-2);
+    --border-thin-3: 1px solid var(--color-border-3);
     --border-highlight-thin: 1px solid var(--color-text-highlight);
 
     --border-primary-medium: 2px solid var(--color-border-primary);
-    --border-1-medium: 2px solid var(--color-border-1);
-    --border-2-medium: 2px solid var(--color-border-2);
-    --border-3-medium: 2px solid var(--color-border-3);
+    --border-medium-1: 2px solid var(--color-border-1);
+    --border-medium-2: 2px solid var(--color-border-2);
+    --border-medium-3: 2px solid var(--color-border-3);
     --border-alternative-medium: 2px solid var(--color-text-alternative);
 
     /* Border radius */
@@ -255,7 +255,7 @@
     --tooltip-bg: rgba(51, 51, 51, 0.7);
 
     /* Input */
-    --input-border: var(--border-1-thin);
+    --input-border: var(--border-thin-1);
     --input-border-danger: 1px solid var(--color-bg-danger);
     --input-text-color: var(--color-text-primary);
     --input-bg: var(--color-bg-primary);