dagster-io · braunjj · Apr 30, 2024 · Apr 30, 2024
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import {Box} from './Box';
 import {Colors} from './Color';
-import {Body, Subtitle} from './Text';
+import {Body, Subheading} from './Text';
 import {FontFamily} from './styles';
 
 export type ErrorCollectionContextValue = {
@@ -71,7 +71,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
           flex={{direction: 'column', gap: 8}}
           padding={16}
         >
-          <Subtitle>Sorry, {this.props.region} can&apos;t be displayed.</Subtitle>
+          <Subheading>Sorry, {this.props.region} can&apos;t be displayed.</Subheading>
           <Body color={Colors.textLight()}>{errorCollectionMessage}</Body>
           {errorStackIncluded && <Trace>{`${error.message}\n\n${error.stack}`}</Trace>}
         </Box>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
@@ -4,7 +4,7 @@ import {Box} from './Box';
 import {Colors} from './Color';
 import {Icon, IconName} from './Icon';
 import {Spinner} from './Spinner';
-import {Subtitle} from './Text';
+import {Subheading} from './Text';
 
 export type NonIdealStateProps = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -54,7 +54,7 @@ export const NonIdealState = ({
           grow: 1,
         }}
       >
-        {title && <Subtitle style={{color: Colors.textDefault()}}>{title}</Subtitle>}
+        {title && <Subheading style={{color: Colors.textDefault()}}>{title}</Subheading>}
         {description && <div style={{color: Colors.textDefault()}}>{description}</div>}
         {action}
       </Box>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx
@@ -7,7 +7,7 @@ import {Box} from './Box';
 import {Button} from './Button';
 import {Colors} from './Color';
 import {Popover} from './Popover';
-import {Subtitle} from './Text';
+import {Subheading} from './Text';
 
 export enum ProductTourPosition {
   TOP_LEFT = 'top-start',
@@ -89,7 +89,7 @@ export const ProductTour = ({
           <ProductTourContainer flex={{direction: 'column', gap: 4}} padding={16} style={{width}}>
             <Box flex={{direction: 'column', gap: 8}}>
               {media}
-              <Subtitle style={{fontSize: '16px'}}>{title}</Subtitle>
+              <Subheading style={{fontSize: '16px'}}>{title}</Subheading>
             </Box>
             <div>{description}</div>
             {actionsJsx}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx
@@ -12,78 +12,80 @@ const Text = styled.span<TextProps>`
 `;
 
 export const Title = styled(Text)`
-  font-size: 32px;
-  line-height: 36px;
+  font-size: 24px;
   font-weight: 600;
+  line-height: 30px;
   -webkit-font-smoothing: antialiased;
 `;
 
 export const Heading = styled(Text)`
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 18px;
   font-weight: 500;
+  line-height: 24px;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const SubtitleLarge = styled(Text)`
-  font-size: 16px;
-  line-height: 20px;
+export const Headline = styled(Text)`
+  font-size: 18px;
   font-weight: 500;
+  line-height: 24px;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const Subtitle = styled(Text)`
+export const Subheading = styled(Text)`
   font-size: 14px;
+  font-weight: 600;
   line-height: 20px;
-  font-weight: 500;
   -webkit-font-smoothing: antialiased;
 `;
 
-export const SubtitleSmall = styled(Text)`
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
+export const Subtitle1 = styled(Text)`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  -webkit-font-smoothing: antialiased;
 `;
 
-export const BodyLarge = styled(Text)`
-  font-size: 16px;
+export const Subtitle2 = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
   line-height: 20px;
-  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
 `;
 
 export const Body = styled(Text)`
   font-family: ${FontFamily.default};
   font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
 `;
 
-export const BodySmall = styled(Text)`
-  font-family: ${FontFamily.default};
-  font-size: 12px;
-  line-height: 16px;
+export const Body1 = styled(Text)`
+  font-size: 16px;
   font-weight: 400;
+  line-height: 24px;
 `;
 
-export const MonoLarge = styled(Text)`
-  font-family: ${FontFamily.monospace};
-  font-size: 16px;
+export const Body2 = styled(Text)`
+  font-family: ${FontFamily.default};
   line-height: 20px;
+  font-size: 14px;
   font-weight: 400;
 `;
 
-export const Mono = styled(Text)`
-  font-family: ${FontFamily.monospace};
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
+export const Caption = styled(Text)`
+  font-family: ${FontFamily.default};
+  font-size: 12px;
 `;
 
-export const MonoSmall = styled(Text)`
-  font-family: ${FontFamily.monospace};
+export const CaptionSubtitle = styled(Text)`
   font-size: 12px;
+  font-weight: 600;
   line-height: 16px;
-  font-weight: 400;
+`;
+
+export const CaptionBolded = styled(Text)`
+  font-family: ${FontFamily.default};
+  font-size: 12px;
+  font-weight: 900;
 `;
 
 export const Code = styled(Text)`
@@ -94,8 +96,12 @@ export const Code = styled(Text)`
   padding: 2px 4px;
 `;
 
-//Depricated – Use BodySmall moving forward
-export const Caption = styled(Text)`
-  font-family: ${FontFamily.default};
+export const Mono = styled(Text)`
+  font-family: ${FontFamily.monospace};
+  font-size: 14px;
+`;
+
+export const CaptionMono = styled(Text)`
+  font-family: ${FontFamily.monospace};
   font-size: 12px;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Group.stories.tsx
@@ -5,7 +5,7 @@ import {Box} from '../Box';
 import {ButtonLink} from '../ButtonLink';
 import {Colors} from '../Color';
 import {Group} from '../Group';
-import {Body, Code, Heading, Subtitle} from '../Text';
+import {Body, Code, Heading, Subheading} from '../Text';
 import {AlignItems, FlexWrap, Spacing} from '../types';
 
 // eslint-disable-next-line import/no-default-export
@@ -119,7 +119,7 @@ export const PointerEventsTest = () => {
             relevant margins.
           </div>
         </Group>
-        <Subtitle>Subtitle</Subtitle>
+        <Subheading>Subheading</Subheading>
       </Group>
     </div>
   );

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/DagsterPlusLaunchPromotion.tsx
@@ -1,11 +1,4 @@
-import {
-  BodyLarge,
-  Box,
-  Button,
-  Dialog,
-  ExternalAnchorButton,
-  Icon,
-} from '@dagster-io/ui-components';
+import {Body1, Box, Button, Dialog, ExternalAnchorButton, Icon} from '@dagster-io/ui-components';
 import styled from 'styled-components';
 
 import dagster_plus from './dagster_plus.png';
@@ -37,10 +30,10 @@ export const DagsterPlusLaunchPromotion = () => {
       </ImageWrapper>
       <Box flex={{direction: 'column', alignItems: 'center'}} padding={24}>
         <Header>Introducing Dagster+</Header>
-        <BodyLarge>
+        <Body1>
           Join us on <span style={{fontWeight: 600}}>April 17 at 12 ET</span> for the unveiling of
           the next generation of Dagster Cloud.
-        </BodyLarge>
+        </Body1>
         <Box
           flex={{direction: 'row', alignItems: 'center', justifyContent: 'center', gap: 8}}
           padding={{top: 12}}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserPreferences.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserPreferences.oss.tsx
@@ -5,7 +5,7 @@ import {
   DAGSTER_THEME_KEY,
   DagsterTheme,
   Icon,
-  Subtitle,
+  Subheading,
 } from '@dagster-io/ui-components';
 import React from 'react';
 
@@ -64,7 +64,7 @@ export const UserPreferences = ({
   return (
     <>
       <Box padding={{bottom: 4}}>
-        <Subtitle>Preferences</Subtitle>
+        <Subheading>Preferences</Subheading>
       </Box>
       <Box flex={{justifyContent: 'space-between', alignItems: 'center'}}>
         <div>Timezone</div>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx
@@ -5,7 +5,7 @@ import {
   Dialog,
   DialogBody,
   DialogFooter,
-  Subtitle,
+  Subheading,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 
@@ -79,7 +79,7 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps)
         </Box>
         <Box padding={{top: 16}} border="top">
           <Box padding={{bottom: 8}}>
-            <Subtitle>Experimental features</Subtitle>
+            <Subheading>Experimental features</Subheading>
           </Box>
           {visibleFlags.map(({key, label, flagType}) => (
             <Box

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventDetail.tsx
@@ -1,4 +1,4 @@
-import {Box, Colors, Group, Heading, Icon, Mono, Subtitle} from '@dagster-io/ui-components';
+import {Box, Colors, Group, Heading, Icon, Mono, Subheading} from '@dagster-io/ui-components';
 import {Link} from 'react-router-dom';
 
 import {AssetEventMetadataEntriesTable} from './AssetEventMetadataEntriesTable';
@@ -53,7 +53,7 @@ export const AssetEventDetail = ({
         padding={{vertical: 16}}
       >
         <Box flex={{gap: 4, direction: 'column'}}>
-          <Subtitle>Event</Subtitle>
+          <Subheading>Event</Subheading>
           {event.__typename === 'MaterializationEvent' ? (
             <Box flex={{gap: 4}}>
               <Icon name="materialization" />
@@ -68,7 +68,7 @@ export const AssetEventDetail = ({
         </Box>
         {event.partition && (
           <Box flex={{gap: 4, direction: 'column'}}>
-            <Subtitle>Partition</Subtitle>
+            <Subheading>Partition</Subheading>
             {hidePartitionLinks ? (
               event.partition
             ) : (
@@ -95,7 +95,7 @@ export const AssetEventDetail = ({
           </Box>
         )}
         <Box flex={{gap: 4, direction: 'column'}} style={{minHeight: 64}}>
-          <Subtitle>Run</Subtitle>
+          <Subheading>Run</Subheading>
           {run ? (
             <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
               <RunStatusWithStats runId={run.id} status={run.status} />
@@ -108,7 +108,7 @@ export const AssetEventDetail = ({
           )}
         </Box>
         <Box flex={{gap: 4, direction: 'column'}}>
-          <Subtitle>Job</Subtitle>
+          <Subheading>Job</Subheading>
           {run && !isHiddenAssetGroupJob(run.pipelineName) ? (
             <Box>
               <Box>
@@ -133,13 +133,13 @@ export const AssetEventDetail = ({
 
       {event.description && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subtitle>Description</Subtitle>
+          <Subheading>Description</Subheading>
           <Description description={event.description} />
         </Box>
       )}
 
       <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-        <Subtitle>Metadata</Subtitle>
+        <Subheading>Metadata</Subheading>
         <AssetEventMetadataEntriesTable
           repoAddress={repoAddress}
           assetKey={assetKey}
@@ -150,19 +150,19 @@ export const AssetEventDetail = ({
 
       {event.__typename === 'MaterializationEvent' && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subtitle>Source data</Subtitle>
+          <Subheading>Source data</Subheading>
           <AssetMaterializationUpstreamData timestamp={event.timestamp} assetKey={assetKey} />
         </Box>
       )}
 
       <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-        <Subtitle>System tags</Subtitle>
+        <Subheading>System tags</Subheading>
         <AssetEventSystemTags event={event} collapsible />
       </Box>
 
       {assetLineage.length > 0 && (
         <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-          <Subtitle>Parent materializations</Subtitle>
+          <Subheading>Parent materializations</Subheading>
           <AssetLineageElements elements={assetLineage} timestamp={event.timestamp} />
         </Box>
       )}
@@ -185,18 +185,18 @@ export const AssetEventDetailEmpty = () => (
       padding={{vertical: 16}}
     >
       <Box flex={{gap: 4, direction: 'column'}}>
-        <Subtitle>Event</Subtitle>
+        <Subheading>Event</Subheading>
       </Box>
       <Box flex={{gap: 4, direction: 'column'}} style={{minHeight: 64}}>
-        <Subtitle>Run</Subtitle>—
+        <Subheading>Run</Subheading>—
       </Box>
       <Box flex={{gap: 4, direction: 'column'}}>
-        <Subtitle>Job</Subtitle>—
+        <Subheading>Job</Subheading>—
       </Box>
     </Box>
 
     <Box padding={{top: 24}} flex={{direction: 'column', gap: 8}}>
-      <Subtitle>Metadata</Subtitle>
+      <Subheading>Metadata</Subheading>
       <AssetEventMetadataEntriesTable event={null} repoAddress={null} showDescriptions />
     </Box>
   </Box>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEvents.tsx
@@ -10,7 +10,7 @@ import {
   MenuItem,
   Popover,
   Spinner,
-  Subtitle,
+  Subheading,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
 
@@ -124,7 +124,7 @@ export const AssetEvents = ({
           padding={{vertical: 16, horizontal: 24}}
           style={{marginBottom: -1}}
         >
-          <Subtitle>Asset Events</Subtitle>
+          <Subheading>Asset Events</Subheading>
           <div style={{margin: '-6px 0 '}}>
             <ButtonGroup
               activeItems={new Set([xAxis])}