Visitar URL original
USWDS - Utilities: Custom breakpoints by mahoneycm · Pull Request #6048 · uswds/uswds · GitHub
Skip to content

USWDS - Utilities: Custom breakpoints #6048

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

Merged
thisisdano merged 20 commits into from
Oct 3, 2024
Merged

USWDS - Utilities: Custom breakpoints #6048

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b40b9ab
add $theme-utility-breakpoints-custom setting
jamigibbs Jul 19, 2024
e6c7682
run prettier
jamigibbs Jul 19, 2024
47a5d0a
Revert "run prettier"
jamigibbs Jul 19, 2024
5abc90c
run prettier again and fix mapping error
jamigibbs Jul 19, 2024
0e59b9f
Remove theme token from system-spacing tokens
mahoneycm Sep 4, 2024
fa93556
Merge all breakpoint maps into 'complete' map
mahoneycm Sep 4, 2024
a03b062
Restore utility breakpoint builder to simpler structure now that cust…
mahoneycm Sep 4, 2024
333a726
Add error message to rem-to-user-em function
mahoneycm Sep 4, 2024
0ea2129
Move custom breakpoints from standard to extended; refactor utility b…
mahoneycm Sep 13, 2024
5169607
Run prettier
mahoneycm Sep 13, 2024
6354d4e
Create and implement px-to-user-em sass function
mahoneycm Sep 18, 2024
eea0ec4
Add unit test and error message to px-to-user-em
mahoneycm Sep 18, 2024
3c6e0fa
Remove period from warning valid value list
mahoneycm Sep 18, 2024
4d3c318
Remove unsuded settings at-rule from spacing tokens
mahoneycm Sep 18, 2024
6b22e0a
Merge branch 'develop' of github.com:uswds/uswds into cm-custom-break…
mahoneycm Sep 19, 2024
f319030
Add "and can not be generated" to warning message
Sep 24, 2024
6fb3bcb
Add custom breakpoints to grid-gap, col, & offset
Sep 26, 2024
4a93553
Add custom breakpoints for grid-container
Sep 26, 2024
9c6fbd7
Merge pull request #6083 from uswds/al-custom-breakpoints
amyleadem Oct 1, 2024
3261823
Add more context to breakpoint units warning
thisisdano Oct 3, 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
2 changes: 1 addition & 1 deletion packages/uswds-core/src/styles/_properties.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ $system-properties: (
map.get($system-spacing, "larger"),
map.get($system-spacing, "largest")
),
extended: (),
extended: $theme-utility-breakpoints-custom,
),
circle: (
standard:
Expand Down
3 changes: 3 additions & 0 deletions packages/uswds-core/src/styles/functions/units/rem-to-user-em.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ queries
@use "sass:math";

@function rem-to-user-em($grid-in-rem) {
@if unit($grid-in-rem) != "rem" {
@error 'This value must be in rem';
}
Comment on lines +14 to +16

@mahoneycm mahoneycm Sep 18, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: Added error to match other conversion functions

$rem-to-user-em: (math.div($grid-in-rem, 1rem)) * 1em;

@return $rem-to-user-em;
Expand Down
6 changes: 4 additions & 2 deletions packages/uswds-core/src/styles/mixins/_utility-builder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,8 +354,10 @@ through all possible variants
@include these-utilities($utilities);

$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
@each $media-key, $media-value in $our-breakpoints {
@if map.get($theme-utility-breakpoints-complete, $media-key) {
$custom-breakpoints: map-deep-get($system-properties, breakpoints, extended);
$all-breakpoints: map-collect($our-breakpoints, $custom-breakpoints);
@each $media-key, $media-value in $all-breakpoints {
@if (map.get($theme-utility-breakpoints-complete, $media-key)) {
@include at-media($media-key) {
@include these-utilities($utilities, $media-key);
}
Expand Down
37 changes: 32 additions & 5 deletions packages/uswds-core/src/styles/mixins/helpers/at-media.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@

// Mobile-first media query helper

$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
$custom-breakpoints: map-deep-get($system-properties, breakpoints, extended);

Comment on lines +8 to +10

@mahoneycm mahoneycm Sep 18, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: Moved variable declaration out of mixin since they are used in both at-media and at-media-max

@mixin at-media($bp) {
$quoted-bp: smart-quote($bp);
$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
@if $quoted-bp == "none" {
@content;
} @else if map.has-key($our-breakpoints, $quoted-bp) {
Expand All @@ -19,6 +21,19 @@
@media all and (min-width: #{$bp}) {
@content;
}
} @else if map.has-key($custom-breakpoints, $quoted-bp) {
@if unit(map.get($custom-breakpoints, $quoted-bp)) ==
"rem" or
unit(map.get($custom-breakpoints, $quoted-bp)) ==
"px"
{
$bp: map.get($custom-breakpoints, $quoted-bp);
@media all and (min-width: #{$bp}) {
@content;
}
} @else {
@warn 'Custom breakpoint `#{$quoted-bp}` has the unit #{unit(map.get($custom-breakpoints, $quoted-bp))}. Custom breakpoints must be either rem or px.';
Comment thread
amyleadem marked this conversation as resolved.
Resolved
}
} @else {
@warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map.keys($our-breakpoints)}';
}
Expand All @@ -27,17 +42,29 @@
// Max-width media query
@mixin at-media-max($bp) {
$quoted-bp: smart-quote($bp);
$our-breakpoints: map-deep-get($system-properties, breakpoints, standard);
@if map-has-key($our-breakpoints, $quoted-bp) {
@if $theme-respect-user-font-size {
$bp: rem-to-user-em(map.get($our-breakpoints, $quoted-bp)) - 0.01em;
} @else {
$bp: rem-to-px(map.get($our-breakpoints, $quoted-bp)) - 1px;
}
@media all and (max-width: #{$bp}) {
@content;
}
} @else if map.has-key($custom-breakpoints, $quoted-bp) {
@if unit(map.get($custom-breakpoints, $quoted-bp)) ==
"rem" or
unit(map.get($custom-breakpoints, $quoted-bp)) ==
"px"
{
$bp: map.get($custom-breakpoints, $quoted-bp) - 0.1;
@media all and (max-width: #{$bp}) {
@content;
}
} @else {
@warn 'Custom breakpoint `#{$quoted-bp}` has the unit #{unit(map.get($custom-breakpoints, $quoted-bp))}. Custom breakpoints must be either rem or px.';
}
} @else {
@warn '`#{$bp}` is not a valid USWDS project breakpoint. Valid values: #{map-keys($our-breakpoints)}';
}
@media all and (max-width: #{$bp}) {
@content;
}
}
7 changes: 5 additions & 2 deletions packages/uswds-core/src/styles/settings/_settings-utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ https://designsystem.digital.gov/utilities
*/

@use "sass:map";
@use "../functions/general/map-collect" as *;

$utilities-use-important: false !default;
$output-these-utilities: default !default;
Expand All @@ -31,7 +32,8 @@ used by utilities or layout grid
*/

$theme-utility-breakpoints: () !default;
$theme-utility-breakpoints-complete: map.merge(
$theme-utility-breakpoints-custom: () !default;
$theme-utility-breakpoints-complete: map-collect(
(
// 160px:
"card": false,
Expand All @@ -52,7 +54,8 @@ $theme-utility-breakpoints-complete: map.merge(
// 1400px:
"widescreen": false
),
$theme-utility-breakpoints
$theme-utility-breakpoints,
$theme-utility-breakpoints-custom
) !default;

/*
Expand Down
1 change: 1 addition & 0 deletions packages/uswds-core/src/styles/tokens/units/spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use "neg-prefix" as *;
@use "../../functions/units/spacing-multiple" as *;
@use "../../settings" as *;

$system-spacing: (
"smaller": (
Expand Down