Add type tokens (WordPress#65418)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
MaxMood96 · Sep 26, 2024 · 5df9613 · 5df9613
1 parent 76448ee
commit 5df9613
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 11 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -1,6 +1,74 @@
 @import "./functions";
 @import "./long-content-fade";
 
+/**
+ * Typography
+ */
+
+@mixin _text-heading() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-medium;
+}
+
+@mixin _text-body() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+}
+
+@mixin heading-small() {
+	@include _text-heading();
+	font-size: $font-size-x-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin heading-medium() {
+	@include _text-heading();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin heading-large() {
+	@include _text-heading();
+	font-size: $font-size-large;
+	line-height: $line-height-small;
+}
+
+@mixin heading-x-large() {
+	@include _text-heading();
+	font-size: $font-size-x-large;
+	line-height: $line-height-medium;
+}
+
+@mixin heading-2x-large() {
+	@include _text-heading();
+	font-size: $font-size-2x-large;
+	line-height: $font-line-height-2x-large;
+}
+
+@mixin body-small() {
+	@include _text-body();
+	font-size: $font-size-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin body-medium() {
+	@include _text-body();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin body-large() {
+	@include _text-body();
+	font-size: $font-size-large;
+	line-height: $line-height-medium;
+}
+
+@mixin body-x-large() {
+	@include _text-body();
+	font-size: $font-size-x-large;
+	line-height: $line-height-x-large;
+}
+
 /**
  * Breakpoint mixins
  */

diff --git a/packages/base-styles/_variables.scss b/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-medium: 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.