feat(patterns): user defined theme level patterns #302
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat(text)!: theme variants * refactor(heading)!: removes heading component after merging it into text component * refactor!: changes mtext theme defaults & theme prop resolution algo * docs(text): variant docs * feat(button)!: user defined theme variants
* fix!: typography defaults * docs: theme lab typo controls (#286) * docs: adds basic typography controls to ThemeTest lab * docs: adds typography variants controls to ThemeTest lab * docs: moves typography controls to top of themetest lab
… with local 'variant' props (#293)
* feat(input): theme input component text style * feat(textarea): themes textarea text style * feat(actionbarbutton): themes actionbarbutton's text style * feat(button): themes button text style * feat(calendar): themes calendar text styles * feat(choice): themes Choice text style * feat(container): themes container's label & content text styles * docs: more spacing in ThemeTest lab * feat(notice): themes notice's text content * feat(pininput): themes pininput text content * feat: themes SegmentedControl & Select text content * feat(stepper): themes stepper text content * feat(textbutton): themes textbutton's text content * feat: themes labels & sublabels in inline form controls * fix(container): fixes which global text styles are applied to container * docs: adds title family & weight to ThemeTest lab * feat: themes text content in Blades, Dialogs, Modals * fix: headlines have same font family as titles * fix: themed colors for Calendar, Container, & Inline Form components * refactor!: renames heading & body colors to title & paragraph * fix: title & paragraph color theming * fix: label default theme * feat: more typography css inheritance * docs: updates ThemeTest docs & Text docs * refactor: minimizes paragraph css in calendar * refactor: minimizes css styles in container * refactor: minimizes typo css in modal, dialog, blade * refactor: minimizes typo css in input * refactor: minimizes typo css in notice * refactor: minimizes typo css in select * refactor: minimizes typo css in inline form controls
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
📊 Package size report -1.85%↓
Unchanged files
Hidden files
🤖 This report was automatically generated by pkg-size-action |
There was a problem hiding this comment.
Please don't merge this as-is. I have suggested changes to the data structure I'll submit as a PR against beta.
Also some brief testing with the theme lab and things aren't working as expected, not all the of code has been been converted correctly to work with these changes and it appears that are bugs with some of the default output.
This comment was marked as resolved.
This comment was marked as resolved.
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
* refactor!: prefix public css vars * docs: update themes lab to use public css var
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
* refactor!: renames font-related color, family, & weight vars * docs(theme): updates after font-related var renames * docs(themetest): updates themetest lab after font-related var renames * docs: adds table of reusable theme vars to theme docs * refactor!: rename css vars again
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
landondurnan
suggested changes
May 10, 2022
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
|
@landondurnan Themes lab has been fixed |
|
Styleguide deployed to https://square.github.io/maker/styleguide/beta/#/ |
landondurnan
approved these changes
May 10, 2022
|
🎉 This PR is included in version 9.8.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
pretzelhammer
added a commit
that referenced
this pull request
May 11, 2022
This reverts commit 65647d4.
pretzelhammer
added a commit
that referenced
this pull request
May 11, 2022
|
🎉 This PR is included in version 10.0.0-beta.15 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe the problem this PR addresses
#269
Describe the changes in this PR
headline,title,paragraph,labelprimary,secondary,tertiaryelementproppelement)textAlign,textTransform,fontSize,fontStyle,fontFamily,lineHeight, andcolorprops to accept all valid CSS values for those propertiesmaker--color-headingto--maker-color-heading--color-textto--maker-color-bodyheading,body, andlabelobjects tofontsobject in theme definition which supportfontFamilyandfontWeightfields, customizing these fields customizes the default MText patterns as well as customizing how typography is rendered in all Maker components, e.g. MButton, MCalendar, MContainer, MModal, MSelect, MChoice, etc etcMigration Guide: v9 -> v11
''(empty string) no longer works for that use-case, you must now explicitly passundefined<m-heading>s to<m-text pattern="title">s, copy over any other props & values as-isfonts.headingpart of the theme, e.g. change this:to this:
fonts.body, e.g. copy this:to this:
<m-text element="p">(pis the default element)<m-button variant="primary">to<m-button pattern="primary">(for all button variants)