feat(shapes): theming support for shapes

laurenhu commented 2 years ago

Adds theming support for shape across multiple maker components.

shapes prop on default theme where default component shape and theme border radius sizes are defined

    shapes: {
        default: 'rounded',
        radii: {
            small: '8px',
            medium: '16px',
            large: '32px',
        },
    },

Add global maker border radius variables to Theme, --maker-border-radius and --maker-border-radius-button for all shape components that don't have a local shape override.
Update component styles to reflect new shape updates.
Update ThemeTest lab to demo changes in shape controls

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/theme-shape/#/

github-actions[bot] commented 2 years ago

📊 Package size report `0.5%↑`

File	Before	After
`components/ActionBar/script.js`	`14.5 kB`	^0.8%↑`14.6 kB`
`components/ActionBar/styles.css`	`5.5 kB`	^0.6%↑`5.5 kB`
`components/Button/script.js`	`6.2 kB`	^3%↑`6.4 kB`
`components/Button/styles.css`	`3.6 kB`	^3%↑`3.7 kB`
`components/Card/script.js`	`1.7 kB`	^47%↑`2.5 kB`
`components/Card/styles.css`	`196 B`	^121%↑`434 B`
`components/Choice/styles.css`	`1.2 kB`	^-0.83%↓`1.2 kB`
`components/Image/script.js`	`3.3 kB`	^17%↑`3.9 kB`
`components/Image/styles.css`	`208 B`	^93%↑`401 B`
`components/ImageUploader/styles.css`	`2.3 kB`	^2%↑`2.3 kB`
`components/Input/styles.css`	`2.1 kB`	^-0.48%↓`2.1 kB`
`components/Menu/styles.css`	`2.9 kB`	^-0.34%↓`2.9 kB`
`components/Notice/styles.css`	`1.1 kB`	^3%↑`1.1 kB`
`components/PinInput/styles.css`	`1.2 kB`	^2%↑`1.2 kB`
`components/Popover/styles.css`	`490 B`	^6%↑`517 B`
`components/ProgressBar/script.js`	`2.9 kB`	^-7.97%↓`2.7 kB`
`components/ProgressBar/styles.css`	`1.1 kB`	^-40.3%↓`650 B`
`components/SegmentedControl/script.js`	`3.1 kB`	^-11.9%↓`2.7 kB`
`components/SegmentedControl/styles.css`	`870 B`	^-15.4%↓`736 B`
`components/Select/styles.css`	`2.4 kB`	^-0.41%↓`2.4 kB`
`components/Stepper/script.js`	`4.2 kB`	^-3.37%↓`4.0 kB`
`components/Textarea/styles.css`	`1.4 kB`	^-0.74%↓`1.3 kB`
`components/Theme/script.js`	`5.5 kB`	^6%↑`5.8 kB`
Total _{(Includes all files)}	`1.4 MB`	^0.5%↑`1.4 MB`
Tarball size	`255.8 kB`	^0.1%↑`256.1 kB`

Unchanged files

| File | Size | | ------------------------------------------------------------------------------- | --------: | | `components/ActionBar/index.js` | `46 B` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `6.2 kB` | | `components/Blade/styles.css` | `740 B` | | `components/Button/index.js` | `46 B` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.7 kB` | | `components/Calendar/styles.css` | `2.0 kB` | | `components/Card/index.js` | `46 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` | `4.7 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.5 kB` | | `components/Container/styles.css` | `1.0 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `7.4 kB` | | `components/Dialog/styles.css` | `1.2 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `1.7 kB` | | `components/Divider/styles.css` | `160 B` | | `components/Heading/index.js` | `46 B` | | `components/Heading/script.js` | `4.7 kB` | | `components/Heading/styles.css` | `5.1 kB` | | `components/Image/index.js` | `46 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `11.7 kB` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.2 kB` | | `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` | `10.9 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `9.8 kB` | | `components/Modal/styles.css` | `1.0 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.7 kB` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `4.6 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.6 kB` | | `components/ProgressBar/index.js` | `46 B` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.6 kB` | | `components/Radio/styles.css` | `1.4 kB` | | `components/SegmentedControl/index.js` | `46 B` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.3 kB` | | `components/Skeleton/styles.css` | `889 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `5.9 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/styles.css` | `402 B` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.5 kB` | | `components/Text/styles.css` | `5.1 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.6 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.7 kB` | | `components/TextButton/styles.css` | `1.4 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/styles.css` | `136 B` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.7 kB` | | `components/Toggle/styles.css` | `3.5 kB` | | `components/TouchCapture/index.js` | `25 B` | | `components/TouchCapture/script.js` | `3.5 kB` | | `components/TransitionFadeIn/index.js` | `25 B` | | `components/TransitionFadeIn/script.js` | `2.3 kB` | | `components/TransitionResize/index.js` | `25 B` | | `components/TransitionResize/script.js` | `3.6 kB` | | `components/TransitionSpringLeft/index.js` | `25 B` | | `components/TransitionSpringLeft/script.js` | `2.3 kB` | | `components/TransitionSpringUp/index.js` | `25 B` | | `components/TransitionSpringUp/script.js` | `2.3 kB` | | `components/TransitionStaggered/index.js` | `25 B` | | `components/TransitionStaggered/script.js` | `2.5 kB` | | [`LICENSE`](https://github.com/square/maker/blob/theme-shape/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/theme-shape/package.json) | `5.1 kB` | | [`README.md`](https://github.com/square/maker/blob/theme-shape/README.md) | `327 B` | | `utils/assert.js` | `1.1 kB` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/BlockFormControlLayout/script.js` | `1.8 kB` | | `utils/BlockFormControlLayout/styles.css` | `234 B` | | `utils/debug.js` | `1.0 kB` | | `utils/get-contrast.js` | `1.1 kB` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/script.js` | `2.5 kB` | | `utils/InlineFormControlLayout/styles.css` | `380 B` | | `utils/Row/index.js` | `46 B` | | `utils/Row/script.js` | `2.4 kB` | | `utils/Row/styles.css` | `610 B` | | `utils/Transition/index.js` | `25 B` | | `utils/Transition/script.js` | `2.4 kB` | | `utils/TransitionResponsive/index.js` | `25 B` | | `utils/TransitionResponsive/script.js` | `2.2 kB` | | `utils/transitions.js` | `4.2 kB` |

Hidden files

| File | Before | After | | ----------------------------------------------- | --------: | --------------------------: | | `components/ActionBar/script.js.map` | `55.4 kB` | ^0.4%↑`55.6 kB` | | `components/ActionBar/styles.css.map` | `18.3 kB` | ^1%↑`18.5 kB` | | `components/Blade/script.js.map` | `23.3 kB` | `23.3 kB` | | `components/Blade/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Button/script.js.map` | `24.7 kB` | ^1%↑`25.1 kB` | | `components/Button/styles.css.map` | `10.6 kB` | ^2%↑`10.9 kB` | | `components/Calendar/script.js.map` | `29.5 kB` | `29.5 kB` | | `components/Calendar/styles.css.map` | `10.3 kB` | `10.3 kB` | | `components/Card/script.js.map` | `8.8 kB` | ^34%↑`11.8 kB` | | `components/Card/styles.css.map` | `711 B` | ^111%↑`1.5 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` | `20.6 kB` | ^-0.07%↓`20.6 kB` | | `components/Choice/styles.css.map` | `6.3 kB` | ^-0.32%↓`6.3 kB` | | `components/Container/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/Container/styles.css.map` | `4.9 kB` | `4.9 kB` | | `components/Dialog/script.js.map` | `28.6 kB` | `28.6 kB` | | `components/Dialog/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Divider/script.js.map` | `8.8 kB` | `8.8 kB` | | `components/Divider/styles.css.map` | `723 B` | `723 B` | | `components/Heading/script.js.map` | `22.4 kB` | `22.4 kB` | | `components/Heading/styles.css.map` | `11.6 kB` | `11.6 kB` | | `components/Image/script.js.map` | `14.1 kB` | ^11%↑`15.6 kB` | | `components/Image/styles.css.map` | `2.9 kB` | ^28%↑`3.7 kB` | | `components/ImageUploader/script.js.map` | `45.9 kB` | ^0.1%↑`46.0 kB` | | `components/ImageUploader/styles.css.map` | `20.2 kB` | ^0.3%↑`20.2 kB` | | `components/Input/script.js.map` | `20.1 kB` | ^-0.07%↓`20.1 kB` | | `components/Input/styles.css.map` | `4.9 kB` | ^-0.41%↓`4.9 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` | `41.2 kB` | ^-0.03%↓`41.2 kB` | | `components/Menu/styles.css.map` | `13.1 kB` | ^-0.15%↓`13.1 kB` | | `components/Modal/script.js.map` | `34.9 kB` | `34.9 kB` | | `components/Modal/styles.css.map` | `10.7 kB` | `10.7 kB` | | `components/Notice/script.js.map` | `18.7 kB` | ^0.1%↑`18.7 kB` | | `components/Notice/styles.css.map` | `4.3 kB` | ^0.7%↑`4.3 kB` | | `components/PinInput/script.js.map` | `18.5 kB` | ^0.2%↑`18.5 kB` | | `components/PinInput/styles.css.map` | `7.0 kB` | ^0.4%↑`7.0 kB` | | `components/Popover/script.js.map` | `37.6 kB` | ^0.07%↑`37.6 kB` | | `components/Popover/styles.css.map` | `6.8 kB` | ^0.4%↑`6.8 kB` | | `components/ProgressBar/script.js.map` | `13.3 kB` | ^-4.81%↓`12.6 kB` | | `components/ProgressBar/styles.css.map` | `2.6 kB` | ^-17.2%↓`2.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.1 kB` | ^-6.3%↓`13.3 kB` | | `components/SegmentedControl/styles.css.map` | `3.3 kB` | ^-14.5%↓`2.9 kB` | | `components/Select/script.js.map` | `23.9 kB` | ^-0.06%↓`23.9 kB` | | `components/Select/styles.css.map` | `6.1 kB` | ^-0.33%↓`6.0 kB` | | `components/Skeleton/script.js.map` | `17.7 kB` | `17.7 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/StarRating/script.js.map` | `22.3 kB` | `22.3 kB` | | `components/StarRating/styles.css.map` | `6.3 kB` | `6.3 kB` | | `components/Stepper/script.js.map` | `17.3 kB` | ^-2.3%↓`16.9 kB` | | `components/Stepper/styles.css.map` | `3.8 kB` | ^-7.08%↓`3.5 kB` | | `components/Text/script.js.map` | `21.5 kB` | `21.5 kB` | | `components/Text/styles.css.map` | `10.9 kB` | `10.9 kB` | | `components/Textarea/script.js.map` | `17.6 kB` | ^-0.08%↓`17.6 kB` | | `components/Textarea/styles.css.map` | `3.8 kB` | ^-0.53%↓`3.7 kB` | | `components/TextButton/script.js.map` | `16.8 kB` | `16.8 kB` | | `components/TextButton/styles.css.map` | `4.2 kB` | `4.2 kB` | | `components/Theme/script.js.map` | `22.0 kB` | ^4%↑`22.9 kB` | | `components/Theme/styles.css.map` | `2.2 kB` | ^16%↑`2.5 kB` | | `components/Toggle/script.js.map` | `19.6 kB` | `19.6 kB` | | `components/Toggle/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `components/TransitionFadeIn/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionResize/script.js.map` | `14.4 kB` | `14.4 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionStaggered/script.js.map` | `11.1 kB` | `11.1 kB` | | `utils/assert.js.map` | `4.2 kB` | `4.2 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.4 kB` | `8.4 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `762 B` | `762 B` | | `utils/debug.js.map` | `3.6 kB` | `3.6 kB` | | `utils/get-contrast.js.map` | `4.9 kB` | `4.9 kB` | | `utils/InlineFormControlLayout/script.js.map` | `12.8 kB` | `12.8 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.5 kB` | `1.5 kB` | | `utils/Row/script.js.map` | `11.5 kB` | `11.5 kB` | | `utils/Row/styles.css.map` | `1.8 kB` | `1.8 kB` | | `utils/Transition/script.js.map` | `10.7 kB` | `10.7 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `utils/transitions.js.map` | `16.8 kB` | `16.8 kB` |

_{🤖 This report was automatically generated by pkg-size-action}

square / maker