Add type tokens

packages/base-styles/_mixins.scss

@@ -1,6 +1,73 @@
 @import "./functions";
 @import "./long-content-fade";
 
+/**
+ * Typography
+ */
+
+@mixin heading-small() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-semi-bold;
+	font-size: $font-size-x-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin heading-medium() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-semi-bold;
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin heading-large() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-semi-bold;
+	font-size: $font-size-large;
+	line-height: $line-height-small;
+}
+
+@mixin heading-x-large() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-semi-bold;
+	font-size: $font-size-x-large;
+	line-height: $line-height-medium;
+}
+
+@mixin heading-2x-large() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-semi-bold;
+	font-size: $font-size-2x-large;
+	line-height: $font-line-height-2x-large;
+}
+
+@mixin body-small() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+	font-size: $font-size-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin body-medium() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin body-large() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+	font-size: $font-size-large;
+	line-height: $line-height-medium;
+}
+
+@mixin body-x-large() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+	font-size: $font-size-x-large;
+	line-height: $line-height-x-large;
+}
+
 /**
  * Breakpoint mixins
  */

packages/base-styles/_variables.scss

@@ -12,15 +12,37 @@
  * Fonts & basic variables.
  */
 
-$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
-$default-font-size: 13px;
-$default-line-height: 1.4;
-$editor-html-font: Menlo, Consolas, monaco, monospace;
-$editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
-$text-editor-font-size: 15px;
-$editor-line-height: 1.8;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables
+$default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens
+
+/**
+ * Typography
+ */
+
+// Sizes
+$font-size-x-small: 11px;
+$font-size-small: 12px;
+$font-size-medium: 13px;
+$font-size-large: 15px;
+$font-size-x-large: 20px;
+$font-size-2x-large: 32px;
+
+// Line heights
+$font-line-height-x-small: 16px;
+$font-line-height-small: 20px;
+$font-line-height-medium: 24px;
+$font-line-height-large: 28px;
+$font-line-height-x-large: 32px;
+$font-line-height-2x-large: 40px;
+
+// Weights
+$font-weight-regular: 400;
+$font-weight-semi-bold: 500;
+
+// Families
+$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-mono: Menlo, Consolas, monaco, monospace;
 
 /**
  * Grid System.
@@ -91,14 +113,24 @@ $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+
+/**
+ * Editor styles.
  */
 
 $sidebar-width: 280px;
 $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
 $secondary-sidebar-width: 350px;
+$editor-font-size: 16px;
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
+$text-editor-font-size: 15px;
+$editor-line-height: 1.8;
+$editor-html-font: $font-family-mono;
 
 /**
  * Block & Editor UI.
@@ -117,7 +149,7 @@ $block-padding: 14px; // Used to define space between block footprint and surrou
 $radius-block-ui: $radius-small;
 $shadow-popover: $elevation-x-small;
 $shadow-modal: $elevation-large;
-
+$default-font-size: $font-size-medium;
 
 /**
  * Block paddings.

packages/components/src/custom-select-control-v2/styles.ts

@@ -158,7 +158,7 @@ export const SelectItem = styled( Ariakit.SelectItem )(
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		font-size: ${ CONFIG.fontSize };
+		font-size: ${ CONFIG.fontSizeMedium };
 		// TODO: reassess line-height for non-legacy v2
 		line-height: 28px;
 		padding-block: ${ space( 2 ) };

packages/components/src/date-time/date/styles.ts

@@ -21,11 +21,11 @@ export const Navigator = styled( HStack )`
 `;
 
 export const NavigatorHeading = styled( Heading )`
-	font-size: ${ CONFIG.fontSize };
-	font-weight: ${ CONFIG.fontWeight };
+	font-size: ${ CONFIG.fontSizeMedium };
+	font-weight: ${ CONFIG.fontWeightRegular };
 
 	strong {
-		font-weight: ${ CONFIG.fontWeightHeading };
+		font-weight: ${ CONFIG.fontWeightSemiBold };
 	}
 `;
 
@@ -39,7 +39,7 @@ export const Calendar = styled.div`
 
 export const DayOfWeek = styled.div`
 	color: ${ COLORS.theme.gray[ 700 ] };
-	font-size: ${ CONFIG.fontSize };
+	font-size: ${ CONFIG.fontSizeMedium };
 	line-height: ${ CONFIG.fontLineHeightBase };
 
 	&:nth-of-type( 1 ) {

packages/components/src/date-time/time/styles.ts

@@ -17,7 +17,7 @@ import NumberControl from '../../number-control';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
-	font-size: ${ CONFIG.fontSize };
+	font-size: ${ CONFIG.fontSizeMedium };
 `;
 
 export const Fieldset = styled.fieldset`
@@ -62,7 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
-	font-size: ${ CONFIG.fontSize };
+	font-size: ${ CONFIG.fontSizeMedium };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);

packages/components/src/heading/hook.ts

@@ -16,7 +16,7 @@ export function useHeading(
 		level = 2,
 		color = COLORS.gray[ 900 ],
 		isBlock = true,
-		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
+		weight = CONFIG.fontWeightSemiBold as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 

packages/components/src/item-group/styles.ts

@@ -90,7 +90,7 @@ export const rounded = css`
 	}
 `;
 
-const baseFontHeight = `calc(${ CONFIG.fontSize } * ${ CONFIG.fontLineHeightBase })`;
+const baseFontHeight = `calc(${ CONFIG.fontSizeMedium } * ${ CONFIG.fontLineHeightBase })`;
 
 /*
  * Math:

packages/components/src/text/hook.ts

@@ -52,7 +52,7 @@ export default function useText(
 		truncate = false,
 		upperCase = false,
 		variant,
-		weight = CONFIG.fontWeight,
+		weight = CONFIG.fontWeightRegular,
 		...otherProps
 	} = useContextSystem( props, 'Text' );
 

packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -99,7 +99,7 @@ const deselectable = css`
 
 export const ButtonContentView = styled.div`
 	display: flex;
-	font-size: ${ CONFIG.fontSize };
+	font-size: ${ CONFIG.fontSizeMedium };
 	line-height: 1;
 `;
 

packages/components/src/utils/config-values.js

@@ -53,20 +53,33 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
 	spinnerSize: 16,
-	fontSize: '13px',
-	fontSizeH1: 'calc(2.44 * 13px)',
-	fontSizeH2: 'calc(1.95 * 13px)',
-	fontSizeH3: 'calc(1.56 * 13px)',
-	fontSizeH4: 'calc(1.25 * 13px)',
-	fontSizeH5: '13px',
-	fontSizeH6: 'calc(0.8 * 13px)',
+	fontSizeXSmall: '11px',
+	fontSizeSmall: '12px',
+	fontSizeMedium: '13px',
+	fontSizeLarge: '15px',
+	fontSizeXLarge: '20px',
+	fontSize2XLarge: '32px',
+	fontSizeH1: '32px', // Todo: consolidate with fontSize properties
+	fontSizeH2: '20px', // Todo: consolidate with fontSize properties
+	fontSizeH3: '15px', // Todo: consolidate with fontSize properties
+	fontSizeH4: '13px', // Todo: consolidate with fontSize properties
+	fontSizeH5: '12px', // Todo: consolidate with fontSize properties
+	fontSizeH6: '11px', // Todo: consolidate with fontSize properties
 	fontSizeInputMobile: '16px',
-	fontSizeMobile: '15px',
-	fontSizeSmall: 'calc(0.92 * 13px)',
-	fontSizeXSmall: 'calc(0.75 * 13px)',
-	fontLineHeightBase: '1.4',
-	fontWeight: 'normal',
-	fontWeightHeading: '600',
+	fontLineHeightBase: '1.4', // Todo: Deprecate in favor of fontLineHeight tokens
+	fontLineHeightXSmall: '16px',
+	fontLineHeightSmall: '20px',
+	fontLineHeightMedium: '24px',
+	fontLineHeightLarge: '28px',
+	fontLineHeightXLarge: '32px',
+	fontLineHeight2XLarge: '40px',
+	fontWeightRegular: '400',
+	fontWeightSemiBold: '500',
+	fontFamilyHeadings:
+		'-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+	fontFamilyBody:
+		'-apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+	fontFamilyMono: 'Menlo, Consolas, monaco, monospace',
 	gridBase: '4px',
 	cardPaddingXSmall: `${ space( 2 ) }`,
 	cardPaddingSmall: `${ space( 4 ) }`,

packages/components/src/utils/font-size.ts

@@ -57,8 +57,8 @@ export function getFontSize(
 		size = parsed;
 	}
 
-	const ratio = `(${ size } / ${ BASE_FONT_SIZE })`;
-	return `calc(${ ratio } * ${ CONFIG.fontSize })`;
+	//const ratio = `(${ size } / ${ BASE_FONT_SIZE })`;
+	return `${ size }px`;
 }
 
 export function getHeadingFontSize( size: ReactText = 3 ): string {