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

Add radius scale #64007

Merged
merged 5 commits into from
Jul 30, 2024
Merged

Add radius scale #64007

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
34f214d
Add radius scale
jameskoster Jul 26, 2024
97f0225
Update names
jameskoster Jul 29, 2024
f4b1154
Guidelines
jameskoster Jul 29, 2024
ea32b33
Deprecate $radius-block-ui
jameskoster Jul 30, 2024
0b5bead
Simplify guidelines
jameskoster Jul 30, 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
14 changes: 12 additions & 2 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,17 @@ $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 lozenges.
$radius-round: 50%; // For circles and ovals.

/**
* Dimensions.
*/
Expand Down Expand Up @@ -91,13 +102,12 @@ $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;
$radius-round: 50%;
$radius-block-ui: 2px;
$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 surrouding borders.
$radius-block-ui: $radius-small;


/**
Expand Down
Loading