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.

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

chore(www): Align more design tokens with system-ui spec (refactor breakpoints to contain raw values, add presets.mediaQueries derived from it for convenience) #13388

Merged

Conversation

fk
Copy link
Contributor

@fk fk commented Apr 16, 2019

Following up on #13107 and #13107 (comment), this refactors www/src/utils/tokens/breakpoints.js to contain the "raw" breakpoint values, and moves the former breakpoints convenience strings (ready to be used as CSS media queries) to www.src/utils/tokens/media-queries.js and presets.mediaQueries.

Ref. https://system-ui.com/theme/
/cc @jxnblk @johno

…eakpoints to contain raw values, add `presets.mediaQueries` derived from it for convenience)
@fk fk requested a review from a team as a code owner April 16, 2019 11:14
…diaQueries

# Conflicts:
#	www/src/views/creators/creators-header.js
Copy link
Contributor

@KyleAMathews KyleAMathews left a comment

Choose a reason for hiding this comment

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

Looks good to me!

@KyleAMathews KyleAMathews merged commit b15920e into master Apr 24, 2019
@KyleAMathews KyleAMathews deleted the topics/www-design-tokens-mv-breakpoints-mediaQueries branch April 24, 2019 17:23
@fk
Copy link
Contributor Author

fk commented Apr 24, 2019

Ah sweet, thank you!

fk added a commit that referenced this pull request Apr 25, 2019
@fk fk mentioned this pull request Apr 25, 2019
marcysutton pushed a commit that referenced this pull request May 14, 2019
* initial feedback widget integration

* update widget with greg's fabulous styles + state

* add emotion plugin to jest-preprocess

* improve focus management in screens

* remove widget from features page

* Use design tokens (1/2)

There’s more to do, but this is a start…

- remove `font-family: sans-serif` along the way
- remove components/feedback-widget/presets in favor of utils/presets.breakpoints

* fix: height of widget

* Use design tokens (2/2)

- chose to reduce the border around the „emoji toggle buttons“ from 3 to 1px
- add horizontal margin for screens below desktop/lg

* Fix max-width, overlapping navigation button for small screens

* Swap `breakpoints` -> `mediaQueries

Ref. #13388

* fix(www): improve feedback-widget toggle button and hover state (#13923)

* fix focus style in Safari

* fix React submit issue for keyboard entry

* remove unused code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants