search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

docs: adds color theming controls to styleguide #470

Closed pretzelhammer closed 1 year ago

pretzelhammer commented 1 year ago

Describe the problem this PR addresses

no color theming in styleguide, it's common for devs to overlook certain theming related bugs since most devs still develop the components assuming the background color is light and never check the component against dark colored backgrounds

Describe the changes in this PR

adds a subtle button in the center of the left side of the screen: Pasted_Image_10_20_22__4_55_PM

Which, when clicked, opens up a blade that allows the user or dev to customize the styleguide's colors: Pasted_Image_10_20_22__4_57_PM

And here's an example of changing the background to black and the primary color to hot pink: Pasted_Image_10_20_22__4_58_PM

ALSO, this PR adds a new npm script called styleguide-run which can be run using npm run styleguide-run and it'll open & serve your current branch's styleguide code ASSUMING you have run styleguide-build since your last save. I haven't bothered adding an automatic code watcher & builder yet but will probably do so eventually.

Other information

example: https://square.github.io/maker/styleguide/styleguide-theming-controls/#/Choice

github-actions[bot] commented 1 year ago

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

github-actions[bot] commented 1 year ago

📊 Package size report   0.02%↑

File Before After
package.json 5.3 kB 5%↑5.6 kB
Total (Includes all files) 1.8 MB 0.02%↑1.8 MB
Tarball size 335.9 kB 0.08%↑336.2 kB
Unchanged files | File | Size | | ----------------------------------------------------------------------------------------- | --------: | | `components/Accordion/index.js` | `46 B` | | `components/Accordion/script.js` | `5.2 kB` | | `components/Accordion/styles.css` | `235 B` | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.6 kB` | | `components/ActionBar/styles.css` | `5.7 kB` | | `components/Badge/index.js` | `46 B` | | `components/Badge/script.js` | `5.9 kB` | | `components/Badge/styles.css` | `1.8 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.9 kB` | | `components/Blade/styles.css` | `837 B` | | `components/Button/index.js` | `46 B` | | `components/Button/script.js` | `8.5 kB` | | `components/Button/styles.css` | `6.1 kB` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.4 kB` | | `components/Calendar/styles.css` | `2.1 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `2.4 kB` | | `components/Card/styles.css` | `603 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Checkbox/script.js` | `3.9 kB` | | `components/Checkbox/styles.css` | `1.4 kB` | | `components/Choice/index.js` | `46 B` | | `components/Choice/script.js` | `5.7 kB` | | `components/Choice/styles.css` | `1.7 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.6 kB` | | `components/Container/styles.css` | `1.2 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `9.1 kB` | | `components/Dialog/styles.css` | `1.5 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `170 B` | | `components/Icon/index.js` | `46 B` | | `components/Icon/script.js` | `2.7 kB` | | `components/Icon/styles.css` | `153 B` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `6.7 kB` | | `components/Image/styles.css` | `724 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `10.8 kB` | | `components/ImageUploader/styles.css` | `2.2 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `2.7 kB` | | `components/Link/index.js` | `46 B` | | `components/Link/script.js` | `3.1 kB` | | `components/Link/styles.css` | `220 B` | | `components/Loading/index.js` | `46 B` | | `components/Loading/script.js` | `2.2 kB` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Menu/index.js` | `46 B` | | `components/Menu/script.js` | `11.1 kB` | | `components/Menu/styles.css` | `4.2 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `11.3 kB` | | `components/Modal/styles.css` | `1.1 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.6 kB` | | `components/Notice/styles.css` | `1.1 kB` | | `components/Pill/index.js` | `46 B` | | `components/Pill/script.js` | `2.8 kB` | | `components/Pill/styles.css` | `370 B` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `6.3 kB` | | `components/PinInput/styles.css` | `1.5 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.9 kB` | | `components/Popover/styles.css` | `518 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `3.5 kB` | | `components/ProgressBar/styles.css` | `1.2 kB` | | `components/ProgressCircle/index.js` | `46 B` | | `components/ProgressCircle/script.js` | `3.9 kB` | | `components/ProgressCircle/styles.css` | `760 B` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.6 kB` | | `components/Radio/styles.css` | `1.5 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.2 kB` | | `components/SegmentedControl/styles.css` | `1.4 kB` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Select/styles.css` | `3.6 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.3 kB` | | `components/Skeleton/styles.css` | `978 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `6.2 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/script.js` | `5.7 kB` | | `components/Stepper/styles.css` | `1.2 kB` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.6 kB` | | `components/Text/styles.css` | `4.7 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.6 kB` | | `components/Textarea/styles.css` | `1.9 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.9 kB` | | `components/TextButton/styles.css` | `2.1 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/script.js` | `16.5 kB` | | `components/Theme/styles.css` | `264 B` | | `components/Toast/index.js` | `46 B` | | `components/Toast/script.js` | `9.1 kB` | | `components/Toast/styles.css` | `2.1 kB` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.5 kB` | | `components/Toggle/styles.css` | `2.7 kB` | | `components/VerticalDivider/index.js` | `46 B` | | `components/VerticalDivider/script.js` | `1.7 kB` | | `components/VerticalDivider/styles.css` | `239 B` | | [`LICENSE`](https://github.com/square/maker/blob/styleguide-theming-controls/LICENSE) | `552 B` | | [`README.md`](https://github.com/square/maker/blob/styleguide-theming-controls/README.md) | `357 B` | | `utils/assert.js` | `1.0 kB` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/BlockFormControlLayout/script.js` | `1.8 kB` | | `utils/BlockFormControlLayout/styles.css` | `234 B` | | `utils/constants.js` | `689 B` | | `utils/css-validator.js` | `933 B` | | `utils/debug.js` | `984 B` | | `utils/get-contrast.js` | `1.4 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `315 B` | | `utils/maker-colors.js` | `3.8 kB` | | `utils/RenderFn.js` | `766 B` | | `utils/Row/index.js` | `46 B` | | `utils/Row/script.js` | `2.5 kB` | | `utils/Row/styles.css` | `610 B` | | `utils/TouchCapture/index.js` | `25 B` | | `utils/TouchCapture/script.js` | `3.5 kB` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.4 kB` | | `utils/TransitionCollapse/index.js` | `25 B` | | `utils/TransitionCollapse/script.js` | `3.0 kB` | | `utils/TransitionFadeIn/index.js` | `25 B` | | `utils/TransitionFadeIn/script.js` | `2.3 kB` | | `utils/TransitionResize/index.js` | `25 B` | | `utils/TransitionResize/script.js` | `3.6 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.2 kB` | | `utils/transitions.js` | `4.2 kB` | | `utils/TransitionSpringLeft/index.js` | `25 B` | | `utils/TransitionSpringLeft/script.js` | `2.3 kB` | | `utils/TransitionSpringUp/index.js` | `25 B` | | `utils/TransitionSpringUp/script.js` | `2.3 kB` | | `utils/TransitionStack/index.js` | `25 B` | | `utils/TransitionStack/script.js` | `2.3 kB` | | `utils/TransitionStaggered/index.js` | `25 B` | | `utils/TransitionStaggered/script.js` | `2.5 kB` |
Hidden files | File | Before | After | | ---------------------------------------------- | --------: | --------------------------: | | `components/Accordion/script.js.map` | `21.3 kB` | `21.3 kB` | | `components/Accordion/styles.css.map` | `5.9 kB` | `5.9 kB` | | `components/ActionBar/script.js.map` | `55.9 kB` | `55.9 kB` | | `components/ActionBar/styles.css.map` | `18.9 kB` | `18.9 kB` | | `components/Badge/script.js.map` | `21.6 kB` | `21.6 kB` | | `components/Badge/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Blade/script.js.map` | `26.7 kB` | `26.7 kB` | | `components/Blade/styles.css.map` | `5.0 kB` | `5.0 kB` | | `components/Button/script.js.map` | `32.9 kB` | -0.01%↓`32.9 kB` | | `components/Button/styles.css.map` | `16.6 kB` | 0.01%↑`16.6 kB` | | `components/Calendar/script.js.map` | `28.8 kB` | `28.8 kB` | | `components/Calendar/styles.css.map` | `10.1 kB` | `10.1 kB` | | `components/Card/script.js.map` | `11.8 kB` | `11.8 kB` | | `components/Card/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Checkbox/script.js.map` | `18.6 kB` | `18.6 kB` | | `components/Checkbox/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/Choice/script.js.map` | `25.1 kB` | `25.1 kB` | | `components/Choice/styles.css.map` | `7.7 kB` | `7.7 kB` | | `components/Container/script.js.map` | `18.2 kB` | `18.2 kB` | | `components/Container/styles.css.map` | `5.1 kB` | `5.1 kB` | | `components/Dialog/script.js.map` | `33.1 kB` | `33.1 kB` | | `components/Dialog/styles.css.map` | `9.3 kB` | `9.3 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `708 B` | `708 B` | | `components/Icon/script.js.map` | `12.6 kB` | `12.6 kB` | | `components/Icon/styles.css.map` | `1.6 kB` | `1.6 kB` | | `components/Image/script.js.map` | `23.4 kB` | `23.4 kB` | | `components/Image/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/ImageUploader/script.js.map` | `43.4 kB` | `43.4 kB` | | `components/ImageUploader/styles.css.map` | `19.5 kB` | `19.5 kB` | | `components/Input/script.js.map` | `21.1 kB` | `21.1 kB` | | `components/Input/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Link/script.js.map` | `14.2 kB` | `14.2 kB` | | `components/Link/styles.css.map` | `3.4 kB` | `3.4 kB` | | `components/Loading/script.js.map` | `11.0 kB` | `11.0 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Menu/script.js.map` | `42.4 kB` | `42.4 kB` | | `components/Menu/styles.css.map` | `13.9 kB` | `13.9 kB` | | `components/Modal/script.js.map` | `42.2 kB` | `42.2 kB` | | `components/Modal/styles.css.map` | `16.9 kB` | `16.9 kB` | | `components/Notice/script.js.map` | `18.5 kB` | `18.5 kB` | | `components/Notice/styles.css.map` | `5.1 kB` | `5.1 kB` | | `components/Pill/script.js.map` | `13.3 kB` | `13.3 kB` | | `components/Pill/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/PinInput/script.js.map` | `24.4 kB` | `24.4 kB` | | `components/PinInput/styles.css.map` | `7.9 kB` | `7.9 kB` | | `components/Popover/script.js.map` | `38.7 kB` | `38.7 kB` | | `components/Popover/styles.css.map` | `6.9 kB` | `6.9 kB` | | `components/ProgressBar/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/ProgressBar/styles.css.map` | `3.5 kB` | `3.5 kB` | | `components/ProgressCircle/script.js.map` | `17.2 kB` | `17.2 kB` | | `components/ProgressCircle/styles.css.map` | `4.1 kB` | `4.1 kB` | | `components/Radio/script.js.map` | `17.5 kB` | `17.5 kB` | | `components/Radio/styles.css.map` | `3.6 kB` | `3.6 kB` | | `components/SegmentedControl/script.js.map` | `14.8 kB` | `14.8 kB` | | `components/SegmentedControl/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Select/script.js.map` | `24.0 kB` | `24.0 kB` | | `components/Select/styles.css.map` | `6.6 kB` | `6.6 kB` | | `components/Skeleton/script.js.map` | `17.8 kB` | `17.8 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/StarRating/script.js.map` | `23.6 kB` | `23.6 kB` | | `components/StarRating/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Stepper/script.js.map` | `22.2 kB` | `22.2 kB` | | `components/Stepper/styles.css.map` | `6.5 kB` | `6.5 kB` | | `components/Text/script.js.map` | `22.3 kB` | `22.3 kB` | | `components/Text/styles.css.map` | `11.5 kB` | `11.5 kB` | | `components/Textarea/script.js.map` | `17.9 kB` | `17.9 kB` | | `components/Textarea/styles.css.map` | `4.1 kB` | `4.1 kB` | | `components/TextButton/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/TextButton/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Theme/script.js.map` | `51.5 kB` | `51.5 kB` | | `components/Theme/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/Toast/script.js.map` | `38.7 kB` | `38.7 kB` | | `components/Toast/styles.css.map` | `14.7 kB` | `14.7 kB` | | `components/Toggle/script.js.map` | `18.3 kB` | `18.3 kB` | | `components/Toggle/styles.css.map` | `4.5 kB` | `4.5 kB` | | `components/VerticalDivider/script.js.map` | `8.9 kB` | `8.9 kB` | | `components/VerticalDivider/styles.css.map` | `760 B` | `760 B` | | `utils/assert.js.map` | `3.9 kB` | `3.9 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.4 kB` | `8.4 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `762 B` | `762 B` | | `utils/constants.js.map` | `2.5 kB` | `2.5 kB` | | `utils/css-validator.js.map` | `3.3 kB` | `3.3 kB` | | `utils/debug.js.map` | `3.4 kB` | `3.4 kB` | | `utils/get-contrast.js.map` | `5.7 kB` | `5.7 kB` | | `utils/InlineFormControlLayout/script.js.map` | `12.6 kB` | `12.6 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.4 kB` | `1.4 kB` | | `utils/maker-colors.js.map` | `14.8 kB` | `14.8 kB` | | `utils/RenderFn.js.map` | `2.8 kB` | `2.8 kB` | | `utils/Row/script.js.map` | `11.7 kB` | `11.7 kB` | | `utils/Row/styles.css.map` | `2.0 kB` | `2.0 kB` | | `utils/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `utils/Transition/script.js.map` | `10.7 kB` | `10.7 kB` | | `utils/TransitionCollapse/script.js.map` | `13.4 kB` | `13.4 kB` | | `utils/TransitionFadeIn/script.js.map` | `10.4 kB` | `10.4 kB` | | `utils/TransitionResize/script.js.map` | `14.4 kB` | `14.4 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.9 kB` | `16.9 kB` | | `utils/TransitionSpringLeft/script.js.map` | `10.5 kB` | `10.5 kB` | | `utils/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `utils/TransitionStack/script.js.map` | `10.2 kB` | `10.2 kB` | | `utils/TransitionStaggered/script.js.map` | `11.0 kB` | `11.0 kB` |

🤖 This report was automatically generated by pkg-size-action

laurenhu commented 1 year ago

Could we do something like this? Where its fixed as a drawer over just the examples area with a descriptive label? I think that will make it more discoverable and accessible when looking over the styleguide.

Screen Shot 2022-10-21 at 2 38 36 PM Screen Shot 2022-10-21 at 2 38 27 PM
pretzelhammer commented 1 year ago

@laurenhu i've updated the PR after our discussion on slack, please take another look. styleguide here: https://square.github.io/maker/styleguide/styleguide-theming-controls/#/

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 15.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: