packages/base-styles/_variables.scss - trunk - githubmirror/gutenberg

packages/base-styles/_variables.scss
182 строки6 KB
Marco Ciampini
DS: Name font weight tokens by intent (#80093)
13 июл 2026, 22:20
13 июл 2026, 22:200cf7ede
/**
 * SCSS Variables.
 *
 * Please use variables from this sheet to ensure consistency across the UI.
 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 */

@use "./colors";

/**
 * Fonts & basic variables.
 */

$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;

$default-font: $font-family-body; // 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;

/**
 * Grid System.
 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 */

$grid-unit: 8px;
$grid-unit-05: 0.5 * $grid-unit;	// 4px
$grid-unit-10: 1 * $grid-unit;		// 8px
$grid-unit-15: 1.5 * $grid-unit;	// 12px
$grid-unit-20: 2 * $grid-unit;		// 16px
$grid-unit-30: 3 * $grid-unit;		// 24px
$grid-unit-40: 4 * $grid-unit;		// 32px
$grid-unit-50: 5 * $grid-unit;		// 40px
$grid-unit-60: 6 * $grid-unit;		// 48px
$grid-unit-70: 7 * $grid-unit;		// 56px
$grid-unit-80: 8 * $grid-unit;		// 64px

/**
 * Radius scale.
 */

$radius-x-small: 1px;   // Applied to elements like buttons nested within primitives like inputs.
$radius-small: 2px;     // Applied to most primitives.
$radius-medium: 4px;    // Applied to containers with smaller padding.
$radius-large: 8px;     // Applied to containers with larger padding.
$radius-full: 9999px;   // For pills.
$radius-round: 50%;     // For circles and ovals.

/**
 * Elevation scale.
 */

// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
$elevation-x-small: 0 1px 1px rgba(colors.$black, 0.03), 0 1px 2px rgba(colors.$black, 0.02), 0 3px 3px rgba(colors.$black, 0.02), 0 4px 4px rgba(colors.$black, 0.01);

// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
$elevation-small: 0 1px 2px rgba(colors.$black, 0.05), 0 2px 3px rgba(colors.$black, 0.04), 0 6px 6px rgba(colors.$black, 0.03), 0 8px 8px rgba(colors.$black, 0.02);

// For components that offer additional actions. Example: Menus, Command Palette
$elevation-medium: 0 2px 3px rgba(colors.$black, 0.05), 0 4px 5px rgba(colors.$black, 0.04), 0 12px 12px rgba(colors.$black, 0.03), 0 16px 16px rgba(colors.$black, 0.02);

// For components that confirm decisions or handle necessary interruptions. Example: Modals.
$elevation-large: 0 5px 15px rgba(colors.$black, 0.08), 0 15px 27px rgba(colors.$black, 0.07), 0 30px 36px rgba(colors.$black, 0.04), 0 50px 43px rgba(colors.$black, 0.02);

/**
 * Dimensions.
 */

$icon-size: 24px;
$button-size: 36px;
$button-size-next-default-40px: 40px; // transitionary variable for next default button size
$button-size-small: 24px;
$button-size-compact: 32px;
$header-height: 64px;
$panel-header-height: $grid-unit-60;
$nav-sidebar-width: 300px;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
$admin-sidebar-width-big: 190px;
$admin-sidebar-width-collapsed: 36px;
$spinner-size: 16px;
$canvas-padding: $grid-unit-20;

// Deprecated, please use --wpds-dimension-surface-width-* design tokens instead.
$modal-min-width: 320px;
$modal-width-small: 400px;
$modal-width-medium: 560px;
$modal-width-large: 960px;

/**
 * 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.
 */

$block-toolbar-height: $grid-unit-60;
$border-width: 1px;
$border-width-focus-fallback: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
$border-width-tab: 1.5px;
$helptext-font-size: 12px;
$radio-input-size: 16px;
$radio-input-size-sm: 24px; // Width & height for small viewports.

// Deprecated, please avoid using these.
$block-padding: 14px; // Used to define space between block footprint and surrounding borders.
$radius-block-ui: $radius-small;
$shadow-popover: $elevation-x-small;
$shadow-modal: $elevation-large;
$default-font-size: $font-size-medium;

/**
 * Block paddings.
 */

// Padding for blocks with a background color (e.g. paragraph or group).
$block-bg-padding--v: 1.25em;
$block-bg-padding--h: 2.375em;


/**
 * React Native specific.
 * These variables do not appear to be used anywhere else.
 */

// Dimensions.
$mobile-header-toolbar-height: 44px;
$mobile-header-toolbar-expanded-height: 52px;
$mobile-floating-toolbar-height: 44px;
$mobile-floating-toolbar-margin: 8px;
$mobile-color-swatch: 48px;

// Block UI.
$mobile-block-toolbar-height: 44px;
$dimmed-opacity: 1;
$block-edge-to-content: 16px;
$solid-border-space: 12px;
$dashed-border-space: 6px;
$block-selected-margin: 3px;
$block-selected-border-width: 1px;
$block-selected-padding: 0;
$block-selected-child-margin: 5px;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;