Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Base styles: Add type tokens. #65418

Merged
merged 9 commits into from
Sep 26, 2024
Merged

Base styles: Add type tokens. #65418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
823a569
Add type tokens
jameskoster Sep 17, 2024
42e4152
Revert "Add type tokens"
jameskoster Sep 18, 2024
bd6da6d
Add font style tokens & mixins
jameskoster Sep 18, 2024
2bb3c3e
Merge branch 'trunk' into add/type-tokens
jameskoster Sep 20, 2024
b0da1fe
Merge branch 'trunk' into add/type-tokens
jameskoster Sep 25, 2024
e457c85
semi-bold -> medium
jameskoster Sep 25, 2024
bdd6950
Mixins for heading/body text
jameskoster Sep 25, 2024
a533871
Tidy up
jameskoster Sep 25, 2024
e719972
Denote private nature of heading/body mixins
jameskoster Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
*/
Expand Down
54 changes: 43 additions & 11 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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;
ciampo marked this conversation as resolved.
Show resolved Hide resolved
$editor-line-height: 1.8;
$editor-html-font: $font-family-mono;

/**
* Block & Editor UI.
Expand All @@ -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.
Expand Down
Loading