search

square / maker

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

feat(shape): shape support for theme component #314

Closed laurenhu closed 2 years ago

laurenhu commented 2 years ago

Adds theming support for shape across multiple maker components.

  1. Defines a shapes prop on default theme where global shape presets and their border radius values are defined:
        shapes: {
            squared: {
                defaultBorderRadius: '0px',
                buttonBorderRadius: '0px',
                imageBorderRadius: '0px',
            },
            rounded: {
                defaultBorderRadius: '4px',
                buttonBorderRadius: '8px',
                imageBorderRadius: '16px',
            },
            pill: {
                defaultBorderRadius: '4px',
                buttonBorderRadius: '100px',
                imageBorderRadius: '16px',
            },
            global: 'rounded',
        },
        ...
        button: {
            shape: '@shapes.global',
        },
        card: {
            shape: '@shapes.global',
        },
  1. Adds global maker border radius variables to Theme to be used by components that don't have a local shape prop override and for use to apply shape similarly to our color variables:
    • --maker-shape-default-border-radius
    • --maker-shape-button-border-radius
  2. Update component styles to reflect new shape updates.
  3. Update ThemeTest lab to demo shape presets as well as custom border radius values
github-actions[bot] commented 2 years ago

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

github-actions[bot] commented 2 years ago

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

github-actions[bot] commented 2 years ago

📊 Package size report   0.6%↑

File Before After
components/ActionBar/script.js 14.5 kB -0.28%↓14.5 kB
components/ActionBar/styles.css 5.5 kB -2.49%↓5.3 kB
components/Button/script.js 6.2 kB -0.11%↓6.2 kB
components/Button/styles.css 3.6 kB -3.02%↓3.5 kB
components/Calendar/styles.css 2.0 kB 4%↑2.1 kB
components/Card/script.js 1.7 kB 41%↑2.4 kB
components/Card/styles.css 196 B 27%↑249 B
components/Choice/styles.css 1.2 kB 0.3%↑1.2 kB
components/Image/script.js 3.3 kB 16%↑3.8 kB
components/Image/styles.css 208 B 18%↑245 B
components/ImageUploader/styles.css 2.3 kB 4%↑2.4 kB
components/Input/styles.css 2.1 kB 0.2%↑2.1 kB
components/Menu/styles.css 2.9 kB 0.1%↑2.9 kB
components/Notice/styles.css 1.1 kB 4%↑1.1 kB
components/PinInput/styles.css 1.2 kB 3%↑1.3 kB
components/Popover/styles.css 490 B 8%↑531 B
components/ProgressBar/script.js 2.9 kB -8.75%↓2.7 kB
components/ProgressBar/styles.css 1.1 kB -38.8%↓666 B
components/SegmentedControl/script.js 3.1 kB 3%↑3.2 kB
components/SegmentedControl/styles.css 870 B 21%↑1.1 kB
components/Select/styles.css 2.4 kB 0.2%↑2.4 kB
components/Skeleton/styles.css 889 B 5%↑930 B
components/Textarea/styles.css 1.4 kB 0.3%↑1.4 kB
components/TextButton/styles.css 1.4 kB 3%↑1.5 kB
components/Theme/script.js 5.5 kB 9%↑6.0 kB
Total (Includes all files) 1.4 MB 0.6%↑1.4 MB
Tarball size 255.6 kB 0.3%↑256.4 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/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.3 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.5 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/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/script.js` | `4.2 kB` | | `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/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-2/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/theme-shape-2/package.json) | `5.1 kB` | | [`README.md`](https://github.com/square/maker/blob/theme-shape-2/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.37%↓`55.2 kB` | | `components/ActionBar/styles.css.map` | `18.3 kB` | 0.09%↑`18.4 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` | -0.72%↓`24.6 kB` | | `components/Button/styles.css.map` | `10.6 kB` | 0.04%↑`10.6 kB` | | `components/Calendar/script.js.map` | `29.5 kB` | 0.3%↑`29.6 kB` | | `components/Calendar/styles.css.map` | `10.3 kB` | 0.8%↑`10.4 kB` | | `components/Card/script.js.map` | `8.8 kB` | 30%↑`11.5 kB` | | `components/Card/styles.css.map` | `711 B` | 97%↑`1.4 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` | `20.6 kB` | | `components/Choice/styles.css.map` | `6.3 kB` | -0.09%↓`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` | 8%↑`15.3 kB` | | `components/Image/styles.css.map` | `2.9 kB` | 23%↑`3.5 kB` | | `components/ImageUploader/script.js.map` | `45.9 kB` | 0.2%↑`46.0 kB` | | `components/ImageUploader/styles.css.map` | `20.2 kB` | 0.4%↑`20.3 kB` | | `components/Input/script.js.map` | `20.3 kB` | `20.3 kB` | | `components/Input/styles.css.map` | `4.9 kB` | -0.12%↓`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` | `41.2 kB` | | `components/Menu/styles.css.map` | `13.1 kB` | -0.05%↓`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.2%↑`18.7 kB` | | `components/Notice/styles.css.map` | `4.3 kB` | 1%↑`4.3 kB` | | `components/PinInput/script.js.map` | `18.2 kB` | 0.2%↑`18.2 kB` | | `components/PinInput/styles.css.map` | `6.8 kB` | 0.6%↑`6.9 kB` | | `components/Popover/script.js.map` | `37.6 kB` | 0.1%↑`37.6 kB` | | `components/Popover/styles.css.map` | `6.8 kB` | 0.6%↑`6.8 kB` | | `components/ProgressBar/script.js.map` | `13.3 kB` | -5.49%↓`12.5 kB` | | `components/ProgressBar/styles.css.map` | `2.6 kB` | -17.7%↓`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` | 2%↑`14.4 kB` | | `components/SegmentedControl/styles.css.map` | `3.3 kB` | 6%↑`3.5 kB` | | `components/Select/script.js.map` | `23.9 kB` | `23.9 kB` | | `components/Select/styles.css.map` | `6.1 kB` | -0.1%↓`6.0 kB` | | `components/Skeleton/script.js.map` | `17.7 kB` | 0.2%↑`17.8 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | 1%↑`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` | `17.3 kB` | | `components/Stepper/styles.css.map` | `3.8 kB` | `3.8 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` | `17.6 kB` | | `components/Textarea/styles.css.map` | `3.8 kB` | -0.16%↓`3.8 kB` | | `components/TextButton/script.js.map` | `16.8 kB` | 0.2%↑`16.9 kB` | | `components/TextButton/styles.css.map` | `4.2 kB` | 1%↑`4.2 kB` | | `components/Theme/script.js.map` | `22.0 kB` | 5%↑`23.2 kB` | | `components/Theme/styles.css.map` | `2.2 kB` | 9%↑`2.4 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

github-actions[bot] commented 2 years ago

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