ref(scraps): use new typography tokens

static/app/components/core/alert/alert.chonk.tsx

@@ -137,7 +137,7 @@ export const TrailingItems = chonkStyled('div')<ChonkAlertProps>`
   grid-auto-columns: max-content;
   grid-template-rows: 100%;
   gap: ${p => p.theme.space.md};
-  font-size: ${p => p.theme.fontSize.md};
+  font-size: ${p => p.theme.font.size.md};
   grid-row: 2;
   grid-column: 1 / -1;
   justify-items: start;
@@ -159,7 +159,7 @@ export const TrailingItems = chonkStyled('div')<ChonkAlertProps>`
 `;
 
 export const Message = chonkStyled('div')`
-  line-height: ${p => p.theme.text.lineHeightBody};
+  line-height: ${p => p.theme.font.lineHeight.comfortable};
   place-content: center;
   padding-block: ${p => p.theme.space.xs};
 `;

static/app/components/core/alert/alert.tsx

@@ -187,7 +187,7 @@ const AlertPanel = styled('div')<AlertProps & {hovered: boolean}>`
   grid-template-columns: ${p => getAlertGridLayout(p)};
   gap: ${space(1)};
   color: ${p => getAlertColors(p.theme, p.type).color};
-  font-size: ${p => p.theme.fontSize.md};
+  font-size: ${p => p.theme.font.size.md};
   border-radius: ${p => p.theme.borderRadius};
   border: 1px solid ${p => getAlertColors(p.theme, p.type).border};
   padding: ${space(1.5)} ${space(2)};
@@ -245,22 +245,26 @@ const IconWrapper = withChonk(
   styled('div')<{type: AlertProps['type']}>`
     display: flex;
     align-items: center;
-    height: calc(${p => p.theme.fontSize.md} * ${p => p.theme.text.lineHeightBody});
+    height: calc(
+      ${p => p.theme.font.size.md} * ${p => p.theme.font.lineHeight.comfortable}
+    );
   `,
   ChonkAlert.IconWrapper
 );
 
 const Message = withChonk(
   styled('span')`
     position: relative;
-    line-height: ${p => p.theme.text.lineHeightBody};
+    line-height: ${p => p.theme.font.lineHeight.comfortable};
   `,
   ChonkAlert.Message
 );
 
 const TrailingItems = withChonk(
   styled('div')<{showIcon: boolean}>`
-    height: calc(${p => p.theme.fontSize.md} * ${p => p.theme.text.lineHeightBody});
+    height: calc(
+      ${p => p.theme.font.size.md} * ${p => p.theme.font.lineHeight.comfortable}
+    );
     display: grid;
     grid-auto-flow: column;
     grid-template-rows: 100%;

static/app/components/core/badge/badge.chonk.tsx

@@ -34,13 +34,13 @@ export function ChonkBadge(props: ChonkBadgeProps) {
 const StyledChonkBadge = chonkStyled('span')<ChonkBadgeProps>`
   ${p => ({...makeChonkBadgeTheme(p, p.theme)})};
   border-radius: ${p => p.theme.radius.sm};
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
 
   display: inline-flex;
   align-items: center;
   line-height: initial;
   height: 20px;
-  font-weight: ${p => p.theme.fontWeight.bold};
+  font-weight: ${p => p.theme.font.weight.medium};
   padding: ${p => p.theme.space.xs} ${p => p.theme.space.xs};
 `;
 

static/app/components/core/badge/badge.tsx

@@ -77,8 +77,8 @@ const StyledBadge = styled('span')<BadgeProps>`
   min-width: 20px;
   line-height: 20px;
   border-radius: 20px;
-  font-weight: ${p => p.theme.fontWeight.normal};
-  font-size: ${p => p.theme.fontSize.xs};
+  font-weight: ${p => p.theme.font.weight.regular};
+  font-size: ${p => p.theme.font.size.xs};
   padding: 0 ${space(0.75)};
   transition: background ${p => p.theme.motion.snap.fast};
 

static/app/components/core/badge/tag.chonk.tsx

@@ -30,7 +30,7 @@ export const TagPill = chonkStyled('div')<{
   ${p => ({...makeTagPillTheme(p.type, p.theme)})};
 
   height: 20px;
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   display: inline-flex;
   align-items: center;
   border-radius: ${p => p.theme.radius.xs};

static/app/components/core/badge/tag.tsx

@@ -73,7 +73,7 @@ export function Tag({
 const TagPill = styled('div')<{
   type: NonNullable<TagProps['type']>;
 }>`
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   background-color: ${p => p.theme.tag[p.type].background};
   border: solid 1px ${p => p.theme.tag[p.type].border};
   display: inline-flex;

static/app/components/core/button/styles.chonk.tsx

@@ -67,7 +67,7 @@ export function DO_NOT_USE_getChonkButtonStyles(
     alignItems: 'center',
     justifyContent: 'center',
 
-    fontWeight: p.theme.fontWeight.bold,
+    fontWeight: p.theme.font.weight.medium,
 
     opacity: p.busy || p.disabled ? 0.6 : undefined,
 

static/app/components/core/button/styles.tsx

@@ -184,7 +184,7 @@ export function DO_NOT_USE_getButtonStyles(
     display: inline-block;
     border-radius: ${p.theme.borderRadius};
     text-transform: none;
-    font-weight: ${p.theme.fontWeight.bold};
+    font-weight: ${p.theme.font.weight.medium};
     cursor: ${p.disabled ? 'not-allowed' : p.busy ? 'wait' : 'pointer'};
     opacity: ${(p.busy || p.disabled) && '0.65'};
 

static/app/components/core/code/codeBlock.tsx

@@ -237,10 +237,10 @@ const Header = styled('div')<{isFloating: boolean}>`
   display: flex;
   align-items: center;
 
-  font-family: ${p => p.theme.text.familyMono};
-  font-size: ${p => p.theme.fontSize.sm};
+  font-family: ${p => p.theme.font.family.mono};
+  font-size: ${p => p.theme.font.size.sm};
   color: var(--prism-base);
-  font-weight: ${p => p.theme.fontWeight.bold};
+  font-weight: ${p => p.theme.font.weight.medium};
   z-index: 2;
 
   ${p =>

static/app/components/core/code/inlineCode.tsx

@@ -8,7 +8,7 @@ export const inlineCodeStyles = (theme: Theme) => css`
   padding: 0;
   border: none;
 
-  font-family: ${theme.text.familyMono};
+  font-family: ${theme.font.family.mono};
   /**
    * adjust height of x character to 57% of bounding box
    * to match Rubik's x-height (magic number)

static/app/components/core/compactSelect/control.tsx

@@ -588,10 +588,10 @@ const MenuHeader = styled('div')<{size: NonNullable<ControlProps['size']>}>`
     box-shadow: none;
   }
 
-  line-height: ${p => p.theme.text.lineHeightBody};
+  line-height: ${p => p.theme.font.lineHeight.comfortable};
   z-index: 2;
 
-  font-size: ${p => (p.size === 'xs' ? p.theme.fontSize.xs : p.theme.fontSize.sm)};
+  font-size: ${p => (p.size === 'xs' ? p.theme.font.size.xs : p.theme.font.size.sm)};
   color: ${p => p.theme.headingColor};
 `;
 
@@ -603,7 +603,7 @@ const MenuHeaderTrailingItems = styled('div')`
 
 const MenuTitle = styled('span')`
   font-size: inherit; /* Inherit font size from MenuHeader */
-  font-weight: ${p => p.theme.fontWeight.bold};
+  font-weight: ${p => p.theme.font.weight.medium};
   white-space: nowrap;
   margin-right: ${space(2)};
 `;
@@ -618,7 +618,7 @@ const StyledLoadingIndicator = styled(LoadingIndicator)`
 
 const ClearButton = styled(Button)`
   font-size: inherit; /* Inherit font size from MenuHeader */
-  font-weight: ${p => p.theme.fontWeight.normal};
+  font-weight: ${p => p.theme.font.weight.regular};
   color: ${p => p.theme.subText};
   padding: 0 ${space(0.5)};
   margin: -${space(0.25)} -${space(0.5)};

static/app/components/core/compactSelect/styles.tsx

@@ -48,8 +48,8 @@ export const ListWrap = styled('ul')`
 
 export const ListLabel = styled('p')`
   display: inline-block;
-  font-weight: ${p => p.theme.fontWeight.bold};
-  font-size: ${p => p.theme.fontSize.xs};
+  font-weight: ${p => p.theme.font.weight.medium};
+  font-size: ${p => p.theme.font.size.xs};
   color: ${p => p.theme.subText};
   text-transform: uppercase;
   white-space: nowrap;
@@ -94,8 +94,8 @@ export const SectionHeader = styled('div')`
 
 export const SectionTitle = styled('p')`
   display: inline-block;
-  font-weight: ${p => p.theme.fontWeight.bold};
-  font-size: ${p => p.theme.fontSize.xs};
+  font-weight: ${p => p.theme.font.weight.medium};
+  font-size: ${p => p.theme.font.size.xs};
   color: ${p => p.theme.subText};
   text-transform: uppercase;
   white-space: nowrap;
@@ -107,8 +107,8 @@ export const SectionTitle = styled('p')`
 export const SectionToggleButton = styled(Button)<{visible: boolean}>`
   padding: 0 ${space(0.5)};
   margin: 0 -${space(0.5)} 0 ${space(2)};
-  font-weight: ${p => p.theme.fontWeight.normal};
-  font-size: ${p => p.theme.fontSize.sm};
+  font-weight: ${p => p.theme.font.weight.regular};
+  font-size: ${p => p.theme.font.size.sm};
   color: ${p => p.theme.subText};
   transition: opacity 0.1s;
 
@@ -178,7 +178,7 @@ export const SizeLimitMessage = styled('li')`
   margin: ${space(0.5)} ${space(1.5)} ${space(0.5)};
   padding: ${space(0.75)} ${space(1)} 0;
 
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   color: ${p => p.theme.subText};
   list-style-type: none;
   white-space: nowrap;

static/app/components/core/input/input.chonk.tsx

@@ -18,10 +18,10 @@ export const chonkInputStyles = ({
     ...debossedBackground(theme),
     boxShadow,
     border: `1px solid ${theme.tokens.border.primary}`,
-    fontWeight: theme.fontWeight.normal,
+    fontWeight: theme.font.weight.regular,
     resize: 'vertical',
     transition: `border ${theme.motion.smooth.fast}, box-shadow ${theme.motion.smooth.fast}`,
-    ...(monospace ? {fontFamily: theme.text.familyMono} : {}),
+    ...(monospace ? {fontFamily: theme.font.family.mono} : {}),
     ...(readOnly ? {cursor: 'default'} : {}),
 
     ...theme.form[size],

static/app/components/core/input/input.tsx

@@ -64,7 +64,7 @@ const legacyInputStyles = (p: InputStylesProps & {theme: Theme}) => css`
     border 0.1s,
     box-shadow 0.1s;
 
-  ${p.monospace ? `font-family: ${p.theme.text.familyMono};` : ''}
+  ${p.monospace ? `font-family: ${p.theme.font.family.mono};` : ''}
   ${p.readOnly ? 'cursor: default;' : ''}
 
   ${p.theme.form[p.size ?? 'md']}

static/app/components/core/input/numberDragInput.stories.tsx

@@ -73,6 +73,6 @@ export default Storybook.story('NumberDragInput', (story, APIReference) => {
 });
 
 const Label = styled('div')`
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   color: ${p => p.theme.subText};
 `;

static/app/components/core/menuListItem/menuListItem.chonk.tsx

@@ -142,7 +142,7 @@ export const ChonkLabelWrap = chonkStyled('div')`
 `;
 
 export const ChonkDetails = chonkStyled('div')<{disabled: boolean; priority: Priority}>`
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   color: ${p => p.theme.subText};
   line-height: 1.4;
   margin-bottom: 0;

static/app/components/core/menuListItem/menuListItem.tsx

@@ -434,7 +434,7 @@ const Label = withChonk(
 
 const Details = withChonk(
   styled('div')<{disabled: boolean; priority: Priority}>`
-    font-size: ${p => p.theme.fontSize.sm};
+    font-size: ${p => p.theme.font.size.sm};
     color: ${p => p.theme.subText};
     line-height: 1.2;
     margin-bottom: 0;

static/app/components/core/segmentedControl/segmentedControl.chonk.tsx

@@ -69,7 +69,7 @@ export const ChonkStyledSegmentWrap = chonkStyled('label')<{
   z-index: ${p => (p.isSelected ? 1 : undefined)};
 
   padding: ${p => segmentedWrapPadding[p.size]};
-  font-weight: ${p => p.theme.fontWeight.normal};
+  font-weight: ${p => p.theme.font.weight.regular};
 
   ${p => ({...DO_NOT_USE_getChonkButtonStyles({...p, disabled: p.isDisabled, priority: p.isSelected && p.priority === 'primary' ? 'primary' : 'default'})})}
 
@@ -91,7 +91,7 @@ export const ChonkStyledSegmentWrap = chonkStyled('label')<{
 export const ChonkStyledVisibleLabel = chonkStyled('span')`
   ${p => p.theme.overflowEllipsis}
   user-select: none;
-  font-weight: ${p => p.theme.fontWeight.bold};
+  font-weight: ${p => p.theme.font.weight.medium};
   text-align: center;
 `;
 

static/app/components/core/segmentedControl/segmentedControl.tsx

@@ -286,7 +286,7 @@ const SegmentWrap = withChonk(
     min-width: 0;
 
     padding: ${p => segmentedWrapPadding[p.size]};
-    font-weight: ${p => p.theme.fontWeight.normal};
+    font-weight: ${p => p.theme.font.weight.regular};
 
     ${p =>
       !p.isDisabled &&
@@ -473,7 +473,7 @@ const VisibleLabel = withChonk(
     font-weight: ${p => (p.isSelected ? 600 : 400)};
     letter-spacing: ${p => (p.isSelected ? '-0.015em' : 'inherit')};
     text-align: center;
-    line-height: ${p => p.theme.text.lineHeightBody};
+    line-height: ${p => p.theme.font.lineHeight.comfortable};
     ${getTextColor}
   `,
   ChonkStyledVisibleLabel

static/app/components/core/slider/slider.chonk.tsx

@@ -216,7 +216,7 @@ const SliderOutput = chonkStyled('output')`
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: ${p => p.theme.fontSize.sm};
+    font-size: ${p => p.theme.font.size.sm};
     position: absolute;
     height: 24px;
     width: calc(100% - 16px);

static/app/components/core/tabs/tab.tsx

@@ -216,7 +216,7 @@ const FloatingTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})
   &[aria-selected='true'] {
     ${p => css`
       color: ${p.theme.purple400};
-      font-weight: ${p.theme.fontWeight.bold};
+      font-weight: ${p.theme.font.weight.medium};
       background-color: ${p.theme.purple100};
     `}
   }

static/app/components/core/text/heading.tsx

@@ -51,8 +51,8 @@ export const Heading = styled(
   white-space: ${p => (p.wrap ? p.wrap : p.ellipsis ? 'nowrap' : undefined)};
   text-wrap: ${p => p.textWrap ?? undefined};
 
-  font-family: ${p => (p.monospace ? p.theme.text.familyMono : p.theme.text.family)};
-  font-weight: ${p => p.theme.fontWeight.bold};
+  font-family: ${p => p.theme.font.family[p.monospace ? 'mono' : 'sans']};
+  font-weight: ${p => p.theme.font.weight.medium};
   font-variant-numeric: ${p =>
     [
       p.tabular ? 'tabular-nums' : undefined,

static/app/components/core/text/styles.tsx

@@ -37,7 +37,7 @@ export function getFontSize(
   size: NonNullable<ResponsiveValue<TextProps<any>['size']>>,
   theme: Theme
 ) {
-  return theme.fontSize[size];
+  return theme.font.size[size];
 }
 
 type ResponsiveValue<T> = T extends Responsive<infer U> ? U : T;

static/app/components/core/text/text.tsx

@@ -149,8 +149,8 @@ export const Text = styled(
           : 'block'
         : undefined};
 
-  font-family: ${p => (p.monospace ? p.theme.text.familyMono : p.theme.text.family)};
-  font-weight: ${p => (p.bold ? p.theme.fontWeight.bold : undefined)};
+  font-family: ${p => p.theme.font.family[p.monospace ? 'mono' : 'sans']};
+  font-weight: ${p => (p.bold ? p.theme.font.weight.medium : undefined)};
   font-variant-numeric: ${p =>
     [
       p.tabular ? 'tabular-nums' : undefined,

static/app/components/core/textarea/textarea.tsx

@@ -51,7 +51,7 @@ const StyledTextArea = styled(TextAreaControl, {
   shouldForwardProp: (p: string) => ['autosize', 'maxRows'].includes(p) || isPropValid(p),
 })`
   ${inputStyles};
-  line-height: ${p => p.theme.text.lineHeightBody};
+  line-height: ${p => p.theme.font.lineHeight.comfortable};
   /** Allow react-textarea-autosize to freely control height based on props. */
   ${p =>
     p.autosize &&
@@ -69,12 +69,12 @@ export const TextArea = withChonk(
     /* this calculation reduces padding to account for the line-height, which ensures text is still correctly centered. */
     ${({theme, size = 'md'}) => `padding-top: calc(
       (${theme.form[size].height} -
-        (${theme.form[size].fontSize} * ${theme.text.lineHeightBody})
+        (${theme.form[size].fontSize} * ${theme.font.lineHeight.comfortable})
       ) / 2
     )`};
     ${({theme, size = 'md'}) => `padding-bottom: calc(
       (${theme.form[size].height} -
-        (${theme.form[size].fontSize} * ${theme.text.lineHeightBody})
+        (${theme.form[size].fontSize} * ${theme.font.lineHeight.comfortable})
       ) / 2
     )`};
 `

static/app/components/core/tooltip/tooltip.tsx

@@ -116,7 +116,7 @@ const TooltipContent = styled(Overlay, {
   overflow-wrap: break-word;
   max-width: ${p => p.maxWidth ?? 225}px;
   color: ${p => p.theme.textColor};
-  font-size: ${p => p.theme.fontSize.sm};
+  font-size: ${p => p.theme.font.size.sm};
   line-height: 1.2;
   text-align: center;
 `;