diff --git a/.changeset/hip-students-care.md b/.changeset/hip-students-care.md new file mode 100644 index 0000000000..d25249ed76 --- /dev/null +++ b/.changeset/hip-students-care.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": patch +--- + +Minify the CSS output. diff --git a/.changeset/thirty-dodos-push.md b/.changeset/thirty-dodos-push.md new file mode 100644 index 0000000000..af066a906f --- /dev/null +++ b/.changeset/thirty-dodos-push.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": minor +--- + +Rename the `style.css` file to `styles.css`. diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 5f3425238e..8580ad9514 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -105,6 +105,7 @@ "eslint-plugin-storybook": "^0.6.13", "identity-obj-proxy": "^3.0.0", "jest-styled-components": "^7.1.1", + "lightningcss": "^1.22.1", "paths.macro": "^3.0.1", "postcss-preset-env": "^9.3.0", "react": "^18.2.0", diff --git a/packages/bezier-react/rollup.config.mjs b/packages/bezier-react/rollup.config.mjs index 08a147eadb..cc804ee429 100644 --- a/packages/bezier-react/rollup.config.mjs +++ b/packages/bezier-react/rollup.config.mjs @@ -9,6 +9,7 @@ import commonjs from '@rollup/plugin-commonjs' import { nodeResolve } from '@rollup/plugin-node-resolve' import url from '@rollup/plugin-url' import autoprefixer from 'autoprefixer' +import { transform } from 'lightningcss' import postcssPresetEnv from 'postcss-preset-env' import { defineConfig } from 'rollup' import nodeExternals from 'rollup-plugin-node-externals' @@ -20,9 +21,37 @@ const pkg = JSON.parse( ) const rootDir = fileURLToPath(new URL('.', import.meta.url)) +const styleSheetDir = 'styles.css' const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx'] +/** + * @type {import('rollup').PluginImpl} + */ +function minifycss() { + return { + name: 'minify-css', + generateBundle(options, bundle) { + const styleSheetFile = bundle[styleSheetDir] + const { code: optimizedSource } = transform({ + code: styleSheetFile.source, + minify: true, + }) + + /** + * NOTE: To avoid the following error: + * (!) The emitted file 'style.css' overwrites a previously emitted file of the same name. + */ + delete bundle[styleSheetDir] + + this.emitFile({ + ...styleSheetFile, + source: optimizedSource, + }) + }, + } +} + const generateConfig = ({ output = [], plugins = [], @@ -37,13 +66,13 @@ const generateConfig = ({ }], }), postcss({ - extract: 'style.css', + extract: styleSheetDir, autoModules: true, modules: { /** - * ex. Bezier-Button__Button__1w3e4 + * ex. b-Button__1w3e4 */ - generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]', + generateScopedName: 'b-[local]__[hash:base64:5]', }, plugins: [ autoprefixer(), @@ -75,6 +104,7 @@ const generateConfig = ({ }), url(), visualizer({ filename: 'stats.html' }), + minifycss(), ...plugins, ], }) diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts index 96937e054e..22999242e3 100644 --- a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts +++ b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts @@ -2,37 +2,37 @@ import { styled } from '~/src/foundation' export const Box = styled.div` - --bezier-alpha-smooth-corners-box-border-radius: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-x: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-y: 0; - --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-color: transparent; - --bezier-alpha-smooth-corners-box-padding: 0px; - --bezier-alpha-smooth-corners-box-margin: 0px; - --bezier-alpha-smooth-corners-box-background-color: transparent; + --b-alpha-smooth-corners-box-border-radius: 0; + --b-alpha-smooth-corners-box-shadow-offset-x: 0; + --b-alpha-smooth-corners-box-shadow-offset-y: 0; + --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; + --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; + --b-alpha-smooth-corners-box-shadow-color: transparent; + --b-alpha-smooth-corners-box-padding: 0px; + --b-alpha-smooth-corners-box-margin: 0px; + --b-alpha-smooth-corners-box-background-color: transparent; - margin: var(--bezier-alpha-smooth-corners-box-margin); - background-color: var(--bezier-alpha-smooth-corners-box-background-color); - background-image: var(--bezier-alpha-smooth-corners-box-background-image); + margin: var(--b-alpha-smooth-corners-box-margin); + background-color: var(--b-alpha-smooth-corners-box-background-color); + background-image: var(--b-alpha-smooth-corners-box-background-image); background-size: cover; - border-radius: var(--bezier-alpha-smooth-corners-box-border-radius); - box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); + border-radius: var(--b-alpha-smooth-corners-box-border-radius); + box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); &[data-state="enabled"] { @supports (background: paint(smooth-corners)) { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } } ` diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.test.tsx b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.test.tsx index 2a87616050..3299121b2e 100644 --- a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.test.tsx +++ b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.test.tsx @@ -41,17 +41,17 @@ describe('AlphaSmoothCornersBox', () => { const rendered = getByText(children) const styles = window.getComputedStyle(rendered) - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-border-radius')).toBe('10') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-border-radius-type')).toBe('number') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-offset-x')).toBe('10') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-offset-y')).toBe('10') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-blur-radius')).toBe('10px') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-spread-radius')).toBe('10px') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-shadow-color')).toBe('var(--bg-black-light)') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-padding')).toBe('20px') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-margin')).toBe('10px') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-background-color')).toBe('var(--bg-black-light)') - expect(styles.getPropertyValue('--bezier-alpha-smooth-corners-box-background-image')).toBe('url(foo/bar)') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-border-radius')).toBe('10') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-border-radius-type')).toBe('number') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-offset-x')).toBe('10') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-offset-y')).toBe('10') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-blur-radius')).toBe('10px') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-spread-radius')).toBe('10px') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-shadow-color')).toBe('var(--bg-black-light)') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-padding')).toBe('20px') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-margin')).toBe('10px') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-background-color')).toBe('var(--bg-black-light)') + expect(styles.getPropertyValue('--b-alpha-smooth-corners-box-background-image')).toBe('url(foo/bar)') }) }) }) diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/__snapshots__/AlphaSmoothCornersBox.test.tsx.snap b/packages/bezier-react/src/components/AlphaSmoothCornersBox/__snapshots__/AlphaSmoothCornersBox.test.tsx.snap index 7b495b2885..46ddb6f187 100644 --- a/packages/bezier-react/src/components/AlphaSmoothCornersBox/__snapshots__/AlphaSmoothCornersBox.test.tsx.snap +++ b/packages/bezier-react/src/components/AlphaSmoothCornersBox/__snapshots__/AlphaSmoothCornersBox.test.tsx.snap @@ -2,36 +2,36 @@ exports[`AlphaSmoothCornersBox Style snapshot with default value 1`] = ` .c0 { - --bezier-alpha-smooth-corners-box-border-radius: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-x: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-y: 0; - --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-color: transparent; - --bezier-alpha-smooth-corners-box-padding: 0px; - --bezier-alpha-smooth-corners-box-margin: 0px; - --bezier-alpha-smooth-corners-box-background-color: transparent; - margin: var(--bezier-alpha-smooth-corners-box-margin); - background-color: var(--bezier-alpha-smooth-corners-box-background-color); - background-image: var(--bezier-alpha-smooth-corners-box-background-image); + --b-alpha-smooth-corners-box-border-radius: 0; + --b-alpha-smooth-corners-box-shadow-offset-x: 0; + --b-alpha-smooth-corners-box-shadow-offset-y: 0; + --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; + --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; + --b-alpha-smooth-corners-box-shadow-color: transparent; + --b-alpha-smooth-corners-box-padding: 0px; + --b-alpha-smooth-corners-box-margin: 0px; + --b-alpha-smooth-corners-box-background-color: transparent; + margin: var(--b-alpha-smooth-corners-box-margin); + background-color: var(--b-alpha-smooth-corners-box-background-color); + background-image: var(--b-alpha-smooth-corners-box-background-image); background-size: cover; - border-radius: var(--bezier-alpha-smooth-corners-box-border-radius); - box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); + border-radius: var(--b-alpha-smooth-corners-box-border-radius); + box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); } @supports (background:paint(smooth-corners)) { .c0[data-state="enabled"] { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } } @@ -39,7 +39,7 @@ exports[`AlphaSmoothCornersBox Style snapshot with default value 1`] = `
`; diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts b/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts index f25df49e6d..ed6748bc86 100644 --- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts +++ b/packages/bezier-react/src/components/AlphaStack/AlphaStack.styled.ts @@ -7,18 +7,18 @@ interface ContainerProps extends export const Container = styled.div` display: flex; - flex-direction: var(--bezier-alpha-stack-direction); - gap: var(--bezier-alpha-stack-spacing); - align-items: var(--bezier-alpha-stack-align); - justify-content: var(--bezier-alpha-stack-justify); + flex-direction: var(--b-alpha-stack-direction); + gap: var(--b-alpha-stack-spacing); + align-items: var(--b-alpha-stack-align); + justify-content: var(--b-alpha-stack-justify); - @supports not(gap: var(--bezier-alpha-stack-spacing)) { - margin-top: calc(var(--bezier-alpha-stack-spacing) * -1); - margin-left: calc(var(--bezier-alpha-stack-spacing) * -1); + @supports not(gap: var(--b-alpha-stack-spacing)) { + margin-top: calc(var(--b-alpha-stack-spacing) * -1); + margin-left: calc(var(--b-alpha-stack-spacing) * -1); > * { - margin-top: var(--bezier-alpha-stack-spacing); - margin-left: var(--bezier-alpha-stack-spacing); + margin-top: var(--b-alpha-stack-spacing); + margin-left: var(--b-alpha-stack-spacing); } } ${({ interpolation }) => interpolation} diff --git a/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx b/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx index 08e5f3ccad..12f6197775 100644 --- a/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx +++ b/packages/bezier-react/src/components/AlphaStack/AlphaStack.test.tsx @@ -17,19 +17,19 @@ describe('alpha-Stack', () => { it('creates a horizontal flexbox when given direction="horizontal"', () => { const { getByTestId } = render() - expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--bezier-alpha-stack-direction)') - expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-direction: row') - expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)') - expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-spacing: 10px') + expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)') + expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: row') + expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)') + expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px') }) it('creates a vertical flexbox when given direction="vertical"', () => { const { getByTestId } = render() - expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--bezier-alpha-stack-direction)') - expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-direction: column') - expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)') - expect(getByTestId('alpha-stack')).toHaveStyle('--bezier-alpha-stack-spacing: 10px') + expect(getByTestId('alpha-stack')).toHaveStyle('flex-direction: var(--b-alpha-stack-direction)') + expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-direction: column') + expect(getByTestId('alpha-stack')).toHaveStyle('gap: var(--b-alpha-stack-spacing)') + expect(getByTestId('alpha-stack')).toHaveStyle('--b-alpha-stack-spacing: 10px') }) }) diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts index 2e7eec8e31..bc3aa42d2f 100644 --- a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts +++ b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts @@ -68,7 +68,7 @@ export const AvatarWrapper = styled.div` ` export const AvatarImage = styled(AlphaSmoothCornersBox)` - --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap); + --b-avatar-computed-status-gap: var(--b-avatar-status-gap); position: relative; box-sizing: content-box; @@ -81,13 +81,13 @@ export const AvatarImage = styled(AlphaSmoothCornersBox)` outline: none; &.bordered[data-state="enabled"] { - --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius))); + --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius))); } ` export const StatusWrapper = styled.div` position: absolute; - right: var(--bezier-avatar-computed-status-gap, 0); - bottom: var(--bezier-avatar-computed-status-gap, 0); + right: var(--b-avatar-computed-status-gap, 0); + bottom: var(--b-avatar-computed-status-gap, 0); display: flex; ` diff --git a/packages/bezier-react/src/components/Avatars/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/bezier-react/src/components/Avatars/Avatar/__snapshots__/Avatar.test.tsx.snap index abe9a33bd7..b0725b46a6 100644 --- a/packages/bezier-react/src/components/Avatars/Avatar/__snapshots__/Avatar.test.tsx.snap +++ b/packages/bezier-react/src/components/Avatars/Avatar/__snapshots__/Avatar.test.tsx.snap @@ -2,25 +2,25 @@ exports[`Avatar > Snapshot 1`] = ` .c0 { - --bezier-alpha-smooth-corners-box-border-radius: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-x: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-y: 0; - --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-color: transparent; - --bezier-alpha-smooth-corners-box-padding: 0px; - --bezier-alpha-smooth-corners-box-margin: 0px; - --bezier-alpha-smooth-corners-box-background-color: transparent; - margin: var(--bezier-alpha-smooth-corners-box-margin); - background-color: var(--bezier-alpha-smooth-corners-box-background-color); - background-image: var(--bezier-alpha-smooth-corners-box-background-image); + --b-alpha-smooth-corners-box-border-radius: 0; + --b-alpha-smooth-corners-box-shadow-offset-x: 0; + --b-alpha-smooth-corners-box-shadow-offset-y: 0; + --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; + --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; + --b-alpha-smooth-corners-box-shadow-color: transparent; + --b-alpha-smooth-corners-box-padding: 0px; + --b-alpha-smooth-corners-box-margin: 0px; + --b-alpha-smooth-corners-box-background-color: transparent; + margin: var(--b-alpha-smooth-corners-box-margin); + background-color: var(--b-alpha-smooth-corners-box-background-color); + background-image: var(--b-alpha-smooth-corners-box-background-image); background-size: cover; - border-radius: var(--bezier-alpha-smooth-corners-box-border-radius); - box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); + border-radius: var(--b-alpha-smooth-corners-box-border-radius); + box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); } .c1 { - --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap); + --b-avatar-computed-status-gap: var(--b-avatar-status-gap); position: relative; box-sizing: content-box; display: -webkit-box; @@ -44,22 +44,22 @@ exports[`Avatar > Snapshot 1`] = ` } .c1.bordered[data-state="enabled"] { - --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius))); + --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius))); } @supports (background:paint(smooth-corners)) { .c0[data-state="enabled"] { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } } @@ -68,31 +68,31 @@ exports[`Avatar > Snapshot 1`] = ` class="c0 c1" data-state="disabled" data-testid="bezier-react-avatar" - style="--bezier-avatar-status-gap: -2px; --bezier-alpha-smooth-corners-box-border-radius: 42%; --bezier-alpha-smooth-corners-box-border-radius-type: string; --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; --bezier-alpha-smooth-corners-box-padding: 0px; --bezier-alpha-smooth-corners-box-margin: 0px; --bezier-alpha-smooth-corners-box-background-color: var(--bg-white-normal); --bezier-alpha-smooth-corners-box-background-image: url(https://www.google.com);" + style="--b-avatar-status-gap: -2px; --b-alpha-smooth-corners-box-border-radius: 42%; --b-alpha-smooth-corners-box-border-radius-type: string; --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; --b-alpha-smooth-corners-box-padding: 0px; --b-alpha-smooth-corners-box-margin: 0px; --b-alpha-smooth-corners-box-background-color: var(--bg-white-normal); --b-alpha-smooth-corners-box-background-image: url(https://www.google.com);" /> `; exports[`Avatar > renders border style 1`] = ` .c0 { - --bezier-alpha-smooth-corners-box-border-radius: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-x: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-y: 0; - --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-color: transparent; - --bezier-alpha-smooth-corners-box-padding: 0px; - --bezier-alpha-smooth-corners-box-margin: 0px; - --bezier-alpha-smooth-corners-box-background-color: transparent; - margin: var(--bezier-alpha-smooth-corners-box-margin); - background-color: var(--bezier-alpha-smooth-corners-box-background-color); - background-image: var(--bezier-alpha-smooth-corners-box-background-image); + --b-alpha-smooth-corners-box-border-radius: 0; + --b-alpha-smooth-corners-box-shadow-offset-x: 0; + --b-alpha-smooth-corners-box-shadow-offset-y: 0; + --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; + --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; + --b-alpha-smooth-corners-box-shadow-color: transparent; + --b-alpha-smooth-corners-box-padding: 0px; + --b-alpha-smooth-corners-box-margin: 0px; + --b-alpha-smooth-corners-box-background-color: transparent; + margin: var(--b-alpha-smooth-corners-box-margin); + background-color: var(--b-alpha-smooth-corners-box-background-color); + background-image: var(--b-alpha-smooth-corners-box-background-image); background-size: cover; - border-radius: var(--bezier-alpha-smooth-corners-box-border-radius); - box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); + border-radius: var(--b-alpha-smooth-corners-box-border-radius); + box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); } .c1 { - --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap); + --b-avatar-computed-status-gap: var(--b-avatar-status-gap); position: relative; box-sizing: content-box; display: -webkit-box; @@ -116,22 +116,22 @@ exports[`Avatar > renders border style 1`] = ` } .c1.bordered[data-state="enabled"] { - --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius))); + --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius))); } @supports (background:paint(smooth-corners)) { .c0[data-state="enabled"] { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } } @@ -140,7 +140,7 @@ exports[`Avatar > renders border style 1`] = ` class="c0 c1 bordered" data-state="disabled" data-testid="bezier-react-avatar" - style="--bezier-avatar-status-gap: -2px; --bezier-alpha-smooth-corners-box-border-radius: 42%; --bezier-alpha-smooth-corners-box-border-radius-type: string; --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; --bezier-alpha-smooth-corners-box-shadow-spread-radius: 2px; --bezier-alpha-smooth-corners-box-shadow-color: var(--bg-white-high); --bezier-alpha-smooth-corners-box-padding: 4px; --bezier-alpha-smooth-corners-box-margin: 0px; --bezier-alpha-smooth-corners-box-background-color: var(--bg-white-normal); --bezier-alpha-smooth-corners-box-background-image: url(https://www.google.com);" + style="--b-avatar-status-gap: -2px; --b-alpha-smooth-corners-box-border-radius: 42%; --b-alpha-smooth-corners-box-border-radius-type: string; --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; --b-alpha-smooth-corners-box-shadow-spread-radius: 2px; --b-alpha-smooth-corners-box-shadow-color: var(--bg-white-high); --b-alpha-smooth-corners-box-padding: 4px; --b-alpha-smooth-corners-box-margin: 0px; --b-alpha-smooth-corners-box-background-color: var(--bg-white-normal); --b-alpha-smooth-corners-box-background-image: url(https://www.google.com);" /> `; @@ -149,10 +149,10 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`] position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -161,17 +161,17 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`] top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -188,7 +188,7 @@ exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`] >
`; @@ -198,10 +198,10 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -210,17 +210,17 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -237,7 +237,7 @@ exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when >
`; @@ -247,10 +247,10 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -259,17 +259,17 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -286,7 +286,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when >
`; @@ -296,10 +296,10 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -308,17 +308,17 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -335,7 +335,7 @@ exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when >
`; @@ -345,10 +345,10 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -357,17 +357,17 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -384,7 +384,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when >
`; @@ -394,10 +394,10 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when position: relative; z-index: 0; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; } @@ -406,17 +406,17 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } .c0 { position: absolute; - right: var(--bezier-avatar-computed-status-gap,0); - bottom: var(--bezier-avatar-computed-status-gap,0); + right: var(--b-avatar-computed-status-gap,0); + bottom: var(--b-avatar-computed-status-gap,0); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -433,7 +433,7 @@ exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when >
`; diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts index f830e0a1de..d055a15b3d 100644 --- a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts +++ b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts @@ -10,7 +10,7 @@ export const AvatarEllipsisCount = styled(Text)` position: relative; display: flex; align-items: center; - height: var(--bezier-avatar-group-size); + height: var(--b-avatar-group-size); color: var(--txt-black-dark); ${({ interpolation }) => interpolation} @@ -22,7 +22,7 @@ export const AvatarGroup = styled.div` display: flex; & > * + * { - margin-left: var(--bezier-avatar-group-spacing); + margin-left: var(--b-avatar-group-spacing); } ` @@ -33,10 +33,10 @@ export const AvatarEllipsisIconWrapper = styled.div` ` export const AvatarEllipsisCountWrapper = styled.div` - padding-right: var(--bezier-avatar-group-ellipsis-mr); + padding-right: var(--b-avatar-group-ellipsis-mr); && { - margin-left: var(--bezier-avatar-group-ellipsis-ml); + margin-left: var(--b-avatar-group-ellipsis-ml); } ` diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap index d5ccb7836e..628b8072c7 100644 --- a/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +++ b/packages/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap @@ -19,21 +19,21 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` } .c2 { - --bezier-alpha-smooth-corners-box-border-radius: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-x: 0; - --bezier-alpha-smooth-corners-box-shadow-offset-y: 0; - --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px; - --bezier-alpha-smooth-corners-box-shadow-color: transparent; - --bezier-alpha-smooth-corners-box-padding: 0px; - --bezier-alpha-smooth-corners-box-margin: 0px; - --bezier-alpha-smooth-corners-box-background-color: transparent; - margin: var(--bezier-alpha-smooth-corners-box-margin); - background-color: var(--bezier-alpha-smooth-corners-box-background-color); - background-image: var(--bezier-alpha-smooth-corners-box-background-image); + --b-alpha-smooth-corners-box-border-radius: 0; + --b-alpha-smooth-corners-box-shadow-offset-x: 0; + --b-alpha-smooth-corners-box-shadow-offset-y: 0; + --b-alpha-smooth-corners-box-shadow-blur-radius: 0px; + --b-alpha-smooth-corners-box-shadow-spread-radius: 0px; + --b-alpha-smooth-corners-box-shadow-color: transparent; + --b-alpha-smooth-corners-box-padding: 0px; + --b-alpha-smooth-corners-box-margin: 0px; + --b-alpha-smooth-corners-box-background-color: transparent; + margin: var(--b-alpha-smooth-corners-box-margin); + background-color: var(--b-alpha-smooth-corners-box-background-color); + background-image: var(--b-alpha-smooth-corners-box-background-image); background-size: cover; - border-radius: var(--bezier-alpha-smooth-corners-box-border-radius); - box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); + border-radius: var(--b-alpha-smooth-corners-box-border-radius); + box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); } .c1 { @@ -96,7 +96,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` } .c3 { - --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap); + --b-avatar-computed-status-gap: var(--b-avatar-status-gap); position: relative; box-sizing: content-box; display: -webkit-box; @@ -120,7 +120,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` } .c3.bordered[data-state="enabled"] { - --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius))); + --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius))); } .c6 { @@ -133,7 +133,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - height: var(--bezier-avatar-group-size); + height: var(--b-avatar-group-size); color: var(--txt-black-dark); } @@ -147,37 +147,37 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` } .c0 > * + * { - margin-left: var(--bezier-avatar-group-spacing); + margin-left: var(--b-avatar-group-spacing); } .c4 { - padding-right: var(--bezier-avatar-group-ellipsis-mr); + padding-right: var(--b-avatar-group-ellipsis-mr); } .c4.c4 { - margin-left: var(--bezier-avatar-group-ellipsis-ml); + margin-left: var(--b-avatar-group-ellipsis-ml); } @supports (background:paint(smooth-corners)) { .c2[data-state="enabled"] { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } }
* + * { - margin-left: var(--bezier-avatar-group-spacing); + margin-left: var(--b-avatar-group-spacing); } .c4 { @@ -434,24 +434,24 @@ exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = ` @supports (background:paint(smooth-corners)) { .c2[data-state="enabled"] { - padding: var(--bezier-alpha-smooth-corners-box-padding); - margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding))); + padding: var(--b-alpha-smooth-corners-box-padding); + margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding))); background: paint(smooth-corners); border-radius: 0; - border-image-source: var(--bezier-alpha-smooth-corners-box-background-image); + border-image-source: var(--b-alpha-smooth-corners-box-background-image); box-shadow: none; - --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius); - --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color); - --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color); - --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding); - --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type); + --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius); + --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color); + --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color); + --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding); + --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type); } }
diff --git a/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts b/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts index f1d78a31e0..daf43a8640 100644 --- a/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts +++ b/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts @@ -82,17 +82,17 @@ const focusStyles = { /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */ ${Avatar} > div { - --bezier-alpha-smooth-corners-box-background-image: none !important; + --b-alpha-smooth-corners-box-background-image: none !important; } `, unchecked: css` ${Avatar} > div { - --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important; + --b-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important; } `, checked: css` ${Avatar} > div { - --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important; + --b-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important; } /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */ `, @@ -120,8 +120,8 @@ export const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)` /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */ ${Avatar} > div { - --bezier-alpha-smooth-corners-box-background-image: none !important; - --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important; + --b-alpha-smooth-corners-box-background-image: none !important; + --b-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important; } /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */ } diff --git a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap index 3011f1df9c..83125b0b06 100644 --- a/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -340,7 +340,7 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1 class="c4" >
diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx index 917fcc08b9..71d5dbb082 100644 --- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx +++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.test.tsx @@ -21,8 +21,8 @@ describe('ButtonGroup', () => { const buttonGroup = getByRole('group') - expect(buttonGroup).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)') - expect(buttonGroup).toHaveStyle('--bezier-alpha-stack-spacing: 6px') + expect(buttonGroup).toHaveStyle('gap: var(--b-alpha-stack-spacing)') + expect(buttonGroup).toHaveStyle('--b-alpha-stack-spacing: 6px') }) it('creates a button group without spacing', () => { @@ -38,7 +38,7 @@ describe('ButtonGroup', () => { const buttonGroup = getByRole('group') - expect(buttonGroup).toHaveStyle('gap: var(--bezier-alpha-stack-spacing)') - expect(buttonGroup).toHaveStyle('--bezier-alpha-stack-spacing: 0px') + expect(buttonGroup).toHaveStyle('gap: var(--b-alpha-stack-spacing)') + expect(buttonGroup).toHaveStyle('--b-alpha-stack-spacing: 0px') }) }) diff --git a/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.styled.ts b/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.styled.ts index 6f075327dc..8e55f8f5d9 100644 --- a/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.styled.ts +++ b/packages/bezier-react/src/components/Forms/Checkbox/Checkbox.styled.ts @@ -94,7 +94,7 @@ export const Container = styled.div` display: flex; align-items: center; width: fit-content; - height: var(--bezier-checkbox-height); + height: var(--b-checkbox-height); cursor: pointer; &[data-disabled] { diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts b/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts index 5bdcb53b7b..70e2ac408b 100644 --- a/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts +++ b/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts @@ -33,7 +33,7 @@ export const LeftLabelWrapper = styled(Box)` grid-column: 1 / 1; align-items: center; align-self: start; - height: var(--bezier-form-control-left-label-wrapper-height); + height: var(--b-form-control-left-label-wrapper-height); ` export const LeftHelperTextWrapper = styled(TopHelperTextWrapper)` diff --git a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap index 4b0b716e2f..eb3b4ea49f 100644 --- a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap +++ b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap @@ -6,18 +6,18 @@ exports[`FormControl > Snapshot > With multiple field 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: var(--bezier-alpha-stack-direction); - -ms-flex-direction: var(--bezier-alpha-stack-direction); - flex-direction: var(--bezier-alpha-stack-direction); - gap: var(--bezier-alpha-stack-spacing); - -webkit-align-items: var(--bezier-alpha-stack-align); - -webkit-box-align: var(--bezier-alpha-stack-align); - -ms-flex-align: var(--bezier-alpha-stack-align); - align-items: var(--bezier-alpha-stack-align); - -webkit-box-pack: var(--bezier-alpha-stack-justify); - -webkit-justify-content: var(--bezier-alpha-stack-justify); - -ms-flex-pack: var(--bezier-alpha-stack-justify); - justify-content: var(--bezier-alpha-stack-justify); + -webkit-flex-direction: var(--b-alpha-stack-direction); + -ms-flex-direction: var(--b-alpha-stack-direction); + flex-direction: var(--b-alpha-stack-direction); + gap: var(--b-alpha-stack-spacing); + -webkit-align-items: var(--b-alpha-stack-align); + -webkit-box-align: var(--b-alpha-stack-align); + -ms-flex-align: var(--b-alpha-stack-align); + align-items: var(--b-alpha-stack-align); + -webkit-box-pack: var(--b-alpha-stack-justify); + -webkit-justify-content: var(--b-alpha-stack-justify); + -ms-flex-pack: var(--b-alpha-stack-justify); + justify-content: var(--b-alpha-stack-justify); } .c3 { @@ -179,15 +179,15 @@ exports[`FormControl > Snapshot > With multiple field 1`] = ` line-height: 1.8rem; } -@supports not(gap:var(--bezier-alpha-stack-spacing)) { +@supports not(gap:var(--b-alpha-stack-spacing)) { .c0 { - margin-top: calc(var(--bezier-alpha-stack-spacing) * -1); - margin-left: calc(var(--bezier-alpha-stack-spacing) * -1); + margin-top: calc(var(--b-alpha-stack-spacing) * -1); + margin-left: calc(var(--b-alpha-stack-spacing) * -1); } .c0 > * { - margin-top: var(--bezier-alpha-stack-spacing); - margin-left: var(--bezier-alpha-stack-spacing); + margin-top: var(--b-alpha-stack-spacing); + margin-left: var(--b-alpha-stack-spacing); } } @@ -195,7 +195,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
Snapshot > With multiple field 1`] = ` data-testid="bezier-react-form-group" id="form-group" role="group" - style="--bezier-alpha-stack-direction: column; --bezier-alpha-stack-justify: flex-start; --bezier-alpha-stack-align: stretch; --bezier-alpha-stack-spacing: 6px;" + style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;" >
Snapshot > With multiple field 1`] = `
Snapshot > With multiple field and left label position 1` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: var(--bezier-alpha-stack-direction); - -ms-flex-direction: var(--bezier-alpha-stack-direction); - flex-direction: var(--bezier-alpha-stack-direction); - gap: var(--bezier-alpha-stack-spacing); - -webkit-align-items: var(--bezier-alpha-stack-align); - -webkit-box-align: var(--bezier-alpha-stack-align); - -ms-flex-align: var(--bezier-alpha-stack-align); - align-items: var(--bezier-alpha-stack-align); - -webkit-box-pack: var(--bezier-alpha-stack-justify); - -webkit-justify-content: var(--bezier-alpha-stack-justify); - -ms-flex-pack: var(--bezier-alpha-stack-justify); - justify-content: var(--bezier-alpha-stack-justify); + -webkit-flex-direction: var(--b-alpha-stack-direction); + -ms-flex-direction: var(--b-alpha-stack-direction); + flex-direction: var(--b-alpha-stack-direction); + gap: var(--b-alpha-stack-spacing); + -webkit-align-items: var(--b-alpha-stack-align); + -webkit-box-align: var(--b-alpha-stack-align); + -ms-flex-align: var(--b-alpha-stack-align); + align-items: var(--b-alpha-stack-align); + -webkit-box-pack: var(--b-alpha-stack-justify); + -webkit-justify-content: var(--b-alpha-stack-justify); + -ms-flex-pack: var(--b-alpha-stack-justify); + justify-content: var(--b-alpha-stack-justify); } .c3 { @@ -410,7 +410,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1` -webkit-align-self: start; -ms-flex-item-align: start; align-self: start; - height: var(--bezier-form-control-left-label-wrapper-height); + height: var(--b-form-control-left-label-wrapper-height); } .c14 { @@ -529,15 +529,15 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1` line-height: 1.8rem; } -@supports not(gap:var(--bezier-alpha-stack-spacing)) { +@supports not(gap:var(--b-alpha-stack-spacing)) { .c5 { - margin-top: calc(var(--bezier-alpha-stack-spacing) * -1); - margin-left: calc(var(--bezier-alpha-stack-spacing) * -1); + margin-top: calc(var(--b-alpha-stack-spacing) * -1); + margin-left: calc(var(--b-alpha-stack-spacing) * -1); } .c5 > * { - margin-top: var(--bezier-alpha-stack-spacing); - margin-left: var(--bezier-alpha-stack-spacing); + margin-top: var(--b-alpha-stack-spacing); + margin-left: var(--b-alpha-stack-spacing); } } @@ -545,7 +545,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
Snapshot > With multiple field and left label position 1` data-testid="bezier-react-form-group" id="form-group" role="group" - style="--bezier-alpha-stack-direction: column; --bezier-alpha-stack-justify: flex-start; --bezier-alpha-stack-align: stretch; --bezier-alpha-stack-spacing: 6px;" + style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;" >
Snapshot > With multiple field and left label position 1`
Snapshot > With single field 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: var(--bezier-alpha-stack-direction); - -ms-flex-direction: var(--bezier-alpha-stack-direction); - flex-direction: var(--bezier-alpha-stack-direction); - gap: var(--bezier-alpha-stack-spacing); - -webkit-align-items: var(--bezier-alpha-stack-align); - -webkit-box-align: var(--bezier-alpha-stack-align); - -ms-flex-align: var(--bezier-alpha-stack-align); - align-items: var(--bezier-alpha-stack-align); - -webkit-box-pack: var(--bezier-alpha-stack-justify); - -webkit-justify-content: var(--bezier-alpha-stack-justify); - -ms-flex-pack: var(--bezier-alpha-stack-justify); - justify-content: var(--bezier-alpha-stack-justify); + -webkit-flex-direction: var(--b-alpha-stack-direction); + -ms-flex-direction: var(--b-alpha-stack-direction); + flex-direction: var(--b-alpha-stack-direction); + gap: var(--b-alpha-stack-spacing); + -webkit-align-items: var(--b-alpha-stack-align); + -webkit-box-align: var(--b-alpha-stack-align); + -ms-flex-align: var(--b-alpha-stack-align); + align-items: var(--b-alpha-stack-align); + -webkit-box-pack: var(--b-alpha-stack-justify); + -webkit-justify-content: var(--b-alpha-stack-justify); + -ms-flex-pack: var(--b-alpha-stack-justify); + justify-content: var(--b-alpha-stack-justify); } .c3 { @@ -790,22 +790,22 @@ exports[`FormControl > Snapshot > With single field 1`] = ` line-height: 1.8rem; } -@supports not(gap:var(--bezier-alpha-stack-spacing)) { +@supports not(gap:var(--b-alpha-stack-spacing)) { .c0 { - margin-top: calc(var(--bezier-alpha-stack-spacing) * -1); - margin-left: calc(var(--bezier-alpha-stack-spacing) * -1); + margin-top: calc(var(--b-alpha-stack-spacing) * -1); + margin-left: calc(var(--b-alpha-stack-spacing) * -1); } .c0 > * { - margin-top: var(--bezier-alpha-stack-spacing); - margin-left: var(--bezier-alpha-stack-spacing); + margin-top: var(--b-alpha-stack-spacing); + margin-left: var(--b-alpha-stack-spacing); } }
Snapshot > With single field and left label position 1`] -webkit-align-self: start; -ms-flex-item-align: start; align-self: start; - height: var(--bezier-form-control-left-label-wrapper-height); + height: var(--b-form-control-left-label-wrapper-height); } .c9 { @@ -1001,7 +1001,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
Snapshot > 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: var(--bezier-alpha-stack-direction); - -ms-flex-direction: var(--bezier-alpha-stack-direction); - flex-direction: var(--bezier-alpha-stack-direction); - gap: var(--bezier-alpha-stack-spacing); - -webkit-align-items: var(--bezier-alpha-stack-align); - -webkit-box-align: var(--bezier-alpha-stack-align); - -ms-flex-align: var(--bezier-alpha-stack-align); - align-items: var(--bezier-alpha-stack-align); - -webkit-box-pack: var(--bezier-alpha-stack-justify); - -webkit-justify-content: var(--bezier-alpha-stack-justify); - -ms-flex-pack: var(--bezier-alpha-stack-justify); - justify-content: var(--bezier-alpha-stack-justify); + -webkit-flex-direction: var(--b-alpha-stack-direction); + -ms-flex-direction: var(--b-alpha-stack-direction); + flex-direction: var(--b-alpha-stack-direction); + gap: var(--b-alpha-stack-spacing); + -webkit-align-items: var(--b-alpha-stack-align); + -webkit-box-align: var(--b-alpha-stack-align); + -ms-flex-align: var(--b-alpha-stack-align); + align-items: var(--b-alpha-stack-align); + -webkit-box-pack: var(--b-alpha-stack-justify); + -webkit-justify-content: var(--b-alpha-stack-justify); + -ms-flex-pack: var(--b-alpha-stack-justify); + justify-content: var(--b-alpha-stack-justify); } .c1 { @@ -26,15 +26,15 @@ exports[`FormGroup > Snapshot > 1`] = ` flex-wrap: wrap; } -@supports not(gap:var(--bezier-alpha-stack-spacing)) { +@supports not(gap:var(--b-alpha-stack-spacing)) { .c0 { - margin-top: calc(var(--bezier-alpha-stack-spacing) * -1); - margin-left: calc(var(--bezier-alpha-stack-spacing) * -1); + margin-top: calc(var(--b-alpha-stack-spacing) * -1); + margin-left: calc(var(--b-alpha-stack-spacing) * -1); } .c0 > * { - margin-top: var(--bezier-alpha-stack-spacing); - margin-left: var(--bezier-alpha-stack-spacing); + margin-top: var(--b-alpha-stack-spacing); + margin-left: var(--b-alpha-stack-spacing); } } @@ -42,6 +42,6 @@ exports[`FormGroup > Snapshot > 1`] = ` class="c0 c1" data-testid="bezier-react-form-group" role="group" - style="--bezier-alpha-stack-direction: column; --bezier-alpha-stack-justify: flex-start; --bezier-alpha-stack-align: stretch; --bezier-alpha-stack-spacing: 6px;" + style="--b-alpha-stack-direction: column; --b-alpha-stack-justify: flex-start; --b-alpha-stack-align: stretch; --b-alpha-stack-spacing: 6px;" /> `; diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts index 89353806c6..314cbcd9c5 100644 --- a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts +++ b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.styled.ts @@ -29,22 +29,22 @@ export const paddingBySegmentedControlSize = { } export const Indicator = styled.div` - --bezier-segmented-control-indicator-translateX: none; - --bezier-segmented-control-indicator-left: auto; - --bezier-segmented-control-indicator-width: auto; - --bezier-segmented-control-indicator-height: auto; + --b-segmented-control-indicator-translateX: none; + --b-segmented-control-indicator-left: auto; + --b-segmented-control-indicator-width: auto; + --b-segmented-control-indicator-height: auto; position: absolute; top: 50%; - left: var(--bezier-segmented-control-indicator-left); - width: var(--bezier-segmented-control-indicator-width); - height: var(--bezier-segmented-control-indicator-height); + left: var(--b-segmented-control-indicator-left); + width: var(--b-segmented-control-indicator-width); + height: var(--b-segmented-control-indicator-height); ${({ foundation }) => foundation?.elevation.ev1()} /* NOTE: (@ed) Overrides the elevation mixin. Do not change the order! */ background-color: var(--bg-white-high); - transform: translateX(var(--bezier-segmented-control-indicator-translateX)) translateY(-50%); + transform: translateX(var(--b-segmented-control-indicator-translateX)) translateY(-50%); ${({ foundation }) => foundation?.transition?.getTransitionsCSS('transform', TransitionDuration.M)} ` @@ -116,12 +116,12 @@ export const Item = styled.button` ` export const Container = styled(AlphaStack).attrs({ direction: 'horizontal' })` - --bezier-segmented-control-width: auto; + --b-segmented-control-width: auto; position: relative; z-index: ${ZIndex.Base}; box-sizing: border-box; - width: var(--bezier-segmented-control-width); + width: var(--b-segmented-control-width); background-color: var(--bg-black-lighter); &.${SegmentedControlSize.XS} { diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx index 2b238b774d..f35a71b3f1 100644 --- a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.test.tsx @@ -138,16 +138,16 @@ describe('SegmentedControl >', () => { describe('"radiogroup" type', () => { it('when changing the width property, the width style should be applied to the outer wrapper', () => { const { getByRole } = renderComponent({ type: 'radiogroup', width: '100%' }) - expect(getByRole('radiogroup')).toHaveStyle('--bezier-segmented-control-width: 100%') - expect(getByRole('radiogroup')).toHaveStyle('width: var(--bezier-segmented-control-width)') + expect(getByRole('radiogroup')).toHaveStyle('--b-segmented-control-width: 100%') + expect(getByRole('radiogroup')).toHaveStyle('width: var(--b-segmented-control-width)') }) }) describe('"tabs" type', () => { it('when changing the width property, the width style should be applied to the outer wrapper', () => { const { getByRole } = renderComponent({ type: 'tabs', width: '100%' }) - expect(getByRole('tablist')).toHaveStyle('--bezier-segmented-control-width: 100%') - expect(getByRole('tablist')).toHaveStyle('width: var(--bezier-segmented-control-width)') + expect(getByRole('tablist')).toHaveStyle('--b-segmented-control-width: 100%') + expect(getByRole('tablist')).toHaveStyle('width: var(--b-segmented-control-width)') }) }) }) @@ -313,9 +313,9 @@ describe('SegmentedControl >', () => { const indicator = getByTestId(SEGMENTED_CONTROL_INDICATOR_TEST_ID) - expect(indicator).toHaveStyle('width: var(--bezier-segmented-control-indicator-width)') - expect(indicator).toHaveStyle('height: var(--bezier-segmented-control-indicator-height)') - expect(indicator).toHaveStyle('transform: translateX(var(--bezier-segmented-control-indicator-translateX)) translateY(-50%)') + expect(indicator).toHaveStyle('width: var(--b-segmented-control-indicator-width)') + expect(indicator).toHaveStyle('height: var(--b-segmented-control-indicator-height)') + expect(indicator).toHaveStyle('transform: translateX(var(--b-segmented-control-indicator-translateX)) translateY(-50%)') }) }) diff --git a/packages/bezier-react/src/components/Forms/Slider/Slider.styled.ts b/packages/bezier-react/src/components/Forms/Slider/Slider.styled.ts index e67075a8fc..97ef62aeab 100644 --- a/packages/bezier-react/src/components/Forms/Slider/Slider.styled.ts +++ b/packages/bezier-react/src/components/Forms/Slider/Slider.styled.ts @@ -8,14 +8,14 @@ import type { InterpolationProps } from '~/src/types/Foundation' import { focusedInputWrapperStyle } from '~/src/components/Forms/Inputs/mixins' export const SliderPrimitiveRoot = styled(SliderPrimitive.Root)` - --bezier-slider-width: auto; - --bezier-slider-thumb-size: 20px; + --b-slider-width: auto; + --b-slider-thumb-size: 20px; position: relative; display: flex; align-items: center; - width: var(--bezier-slider-width); - height: var(--bezier-slider-thumb-size); + width: var(--b-slider-width); + height: var(--b-slider-thumb-size); touch-action: none; cursor: pointer; user-select: none; @@ -45,22 +45,22 @@ export const SliderPrimitiveRange = styled(SliderPrimitive.Range)` ` export const GuideContainer = styled.div` - --bezier-slider-guide-height: 8px; + --b-slider-guide-height: 8px; position: absolute; - top: calc(-1 * (var(--bezier-slider-guide-height) + 3px)); - left: calc(var(--bezier-slider-thumb-size) / 2); - width: calc(100% - var(--bezier-slider-thumb-size)); + top: calc(-1 * (var(--b-slider-guide-height) + 3px)); + left: calc(var(--b-slider-thumb-size) / 2); + width: calc(100% - var(--b-slider-thumb-size)); ` export const SliderGuide = styled.div` - --bezier-slider-guide-left: 0; + --b-slider-guide-left: 0; position: absolute; top: 0; - left: var(--bezier-slider-guide-left); + left: var(--b-slider-guide-left); width: 2px; - height: var(--bezier-slider-guide-height); + height: var(--b-slider-guide-height); background-color: var(--bg-black-light); border-radius: 1px; transform: translateX(-50%); @@ -69,8 +69,8 @@ export const SliderGuide = styled.div` export const SliderThumb = styled.div` all: unset; display: block; - width: var(--bezier-slider-thumb-size); - height: var(--bezier-slider-thumb-size); + width: var(--b-slider-thumb-size); + height: var(--b-slider-thumb-size); border-radius: 12px; ${({ foundation }) => foundation?.elevation?.ev2()} diff --git a/packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx b/packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx index 47314e6289..73e844d747 100644 --- a/packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx +++ b/packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx @@ -205,13 +205,13 @@ describe('Slider', () => { it('should render Slider with given width (number)', () => { const { getByTestId } = renderSlider({ width: 300 }) const slider = getByTestId(SLIDER_TEST_ID) - expect(slider).toHaveStyle('--bezier-slider-width: 300px') + expect(slider).toHaveStyle('--b-slider-width: 300px') }) it('should render Slider with given width (string)', () => { const { getByTestId } = renderSlider({ width: '500px' }) const slider = getByTestId(SLIDER_TEST_ID) - expect(slider).toHaveStyle('--bezier-slider-width: 500px') + expect(slider).toHaveStyle('--b-slider-width: 500px') }) }) diff --git a/packages/bezier-react/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap b/packages/bezier-react/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap index cd3bef6641..e9edc499c0 100644 --- a/packages/bezier-react/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap +++ b/packages/bezier-react/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap @@ -2,8 +2,8 @@ exports[`Slider Snapshot should match snapshot 1`] = ` .c0 { - --bezier-slider-width: auto; - --bezier-slider-thumb-size: 20px; + --b-slider-width: auto; + --b-slider-thumb-size: 20px; position: relative; display: -webkit-box; display: -webkit-flex; @@ -13,8 +13,8 @@ exports[`Slider Snapshot should match snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: var(--bezier-slider-width); - height: var(--bezier-slider-thumb-size); + width: var(--b-slider-width); + height: var(--b-slider-thumb-size); touch-action: none; cursor: pointer; -webkit-user-select: none; @@ -54,20 +54,20 @@ exports[`Slider Snapshot should match snapshot 1`] = ` } .c3 { - --bezier-slider-guide-height: 8px; + --b-slider-guide-height: 8px; position: absolute; - top: calc(-1 * (var(--bezier-slider-guide-height) + 3px)); - left: calc(var(--bezier-slider-thumb-size) / 2); - width: calc(100% - var(--bezier-slider-thumb-size)); + top: calc(-1 * (var(--b-slider-guide-height) + 3px)); + left: calc(var(--b-slider-thumb-size) / 2); + width: calc(100% - var(--b-slider-thumb-size)); } .c4 { - --bezier-slider-guide-left: 0; + --b-slider-guide-left: 0; position: absolute; top: 0; - left: var(--bezier-slider-guide-left); + left: var(--b-slider-guide-left); width: 2px; - height: var(--bezier-slider-guide-height); + height: var(--b-slider-guide-height); background-color: var(--bg-black-light); border-radius: 1px; -webkit-transform: translateX(-50%); @@ -78,8 +78,8 @@ exports[`Slider Snapshot should match snapshot 1`] = ` .c5 { all: unset; display: block; - width: var(--bezier-slider-thumb-size); - height: var(--bezier-slider-thumb-size); + width: var(--b-slider-thumb-size); + height: var(--b-slider-thumb-size); border-radius: 12px; background-color: #FFFFFF; box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014; @@ -112,7 +112,7 @@ exports[`Slider Snapshot should match snapshot 1`] = ` data-testid="bezier-react-slider" dir="ltr" foundation="[object Object]" - style="--bezier-slider-width: 36px; --radix-slider-thumb-transform: translateX(-50%);" + style="--b-slider-width: 36px; --radix-slider-thumb-transform: translateX(-50%);" >
diff --git a/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts b/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts index 75ad9cff22..0010197c34 100644 --- a/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts +++ b/packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts @@ -31,10 +31,10 @@ export const DialogPrimitiveOverlay = styled(DialogPrimitive.Overlay)` right: 0; bottom: 0; left: 0; - z-index: var(--bezier-modal-z-index); + z-index: var(--b-modal-z-index); display: grid; place-items: center; - padding: var(--bezier-modal-collision-padding); + padding: var(--b-modal-collision-padding); overflow-y: auto; background-color: var(--bgtxt-absolute-black-lighter); @@ -49,10 +49,10 @@ export const Content = styled.div` position: relative; box-sizing: border-box; - width: var(--bezier-modal-width); + width: var(--b-modal-width); min-width: 360px; max-width: 100vw; - height: var(--bezier-modal-height); + height: var(--b-modal-height); max-height: 100%; overflow: visible; color: var(--bg-grey-darkest); diff --git a/packages/bezier-react/src/components/Spinner/Spinner.module.scss b/packages/bezier-react/src/components/Spinner/Spinner.module.scss index f1f04ac7f4..f6d3dadeeb 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.module.scss +++ b/packages/bezier-react/src/components/Spinner/Spinner.module.scss @@ -12,45 +12,45 @@ } .Spinner { - --bezier-spinner-color: inherit; + --b-spinner-color: inherit; display: inline-block; border-style: solid; border-top-color: transparent; - border-right-color: var(--bezier-spinner-color); - border-bottom-color: var(--bezier-spinner-color); - border-left-color: var(--bezier-spinner-color); + border-right-color: var(--b-spinner-color); + border-bottom-color: var(--b-spinner-color); + border-left-color: var(--b-spinner-color); border-radius: 50%; animation: spin 1s linear infinite; - &.xl { + &.size-xl { @include dimension.square(50px); border-width: 4px; } - &.l, - &.m { + &.size-l, + &.size-m { border-width: 3px; } - &.l { + &.size-l { @include dimension.square(24px); } - &.m { + &.size-m { @include dimension.square(20px); } - &.s, - &.xs { + &.size-s, + &.size-xs { border-width: 2px; } - &.s { + &.size-s { @include dimension.square(16px); } - &.xs { + &.size-xs { @include dimension.square(12px); } } diff --git a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx index 86cfe72e29..cdbb64b4fa 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx @@ -50,12 +50,12 @@ describe('Spinner >', () => { const color = 'bg-black-lighter' const { getByTestId } = renderSpinner({ color }) const renderedSpinner = getByTestId(SPINNER_TEST_ID) - expect(renderedSpinner).toHaveStyle(`--bezier-spinner-color: var(--${color})`) + expect(renderedSpinner).toHaveStyle(`--b-spinner-color: var(--${color})`) }) it('should receive size', () => { const { getByTestId } = renderSpinner({ size: SpinnerSize.M }) const renderedSpinner = getByTestId(SPINNER_TEST_ID) - expect(renderedSpinner).toHaveClass(SpinnerSize.M) + expect(renderedSpinner).toHaveClass('size-m') }) }) diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx index 344105f152..9a247d53a0 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx @@ -2,6 +2,11 @@ import React, { forwardRef } from 'react' import classNames from 'classnames' +import { + cssVarName, + cssVarValue, +} from '~/src/utils/style' + import type SpinnerProps from './Spinner.types' import { SpinnerSize } from './Spinner.types' @@ -9,6 +14,8 @@ import styles from './Spinner.module.scss' export const SPINNER_TEST_ID = 'bezier-react-spinner' +const cv = cssVarName('spinner') + const Spinner = forwardRef(function Spinner({ testId = SPINNER_TEST_ID, as, @@ -25,12 +32,12 @@ const Spinner = forwardRef(function Spinner({ {...rest} ref={forwardedRef} style={{ - '--bezier-spinner-color': color ? `var(--${color})` as const : undefined, + [cv('color')]: cssVarValue(color), ...style, }} className={classNames( styles.Spinner, - styles[size], + styles[`size-${size}`], className, )} key="spinner" diff --git a/packages/bezier-react/src/components/Status/Status.styled.ts b/packages/bezier-react/src/components/Status/Status.styled.ts index 8d6a80bfb9..f8c0be37cf 100644 --- a/packages/bezier-react/src/components/Status/Status.styled.ts +++ b/packages/bezier-react/src/components/Status/Status.styled.ts @@ -11,10 +11,10 @@ export const Circle = styled.div` position: relative; z-index: ${ZIndex.Base}; box-sizing: content-box; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); background-color: var(--bg-white-high); - border: var(--bezier-status-border-width) solid var(--bg-white-high); + border: var(--b-status-border-width) solid var(--bg-white-high); border-radius: 50%; &::after { @@ -22,10 +22,10 @@ export const Circle = styled.div` top: 0; left: 0; display: block; - width: var(--bezier-status-size); - height: var(--bezier-status-size); + width: var(--b-status-size); + height: var(--b-status-size); content: ''; - background-color: var(--bezier-status-bg-color); + background-color: var(--b-status-bg-color); border-radius: 50%; } ` diff --git a/packages/bezier-react/src/components/Tabs/TabList.styled.ts b/packages/bezier-react/src/components/Tabs/TabList.styled.ts index 6db3ce011d..ecc2733bf7 100644 --- a/packages/bezier-react/src/components/Tabs/TabList.styled.ts +++ b/packages/bezier-react/src/components/Tabs/TabList.styled.ts @@ -10,6 +10,6 @@ export const TabList = styled.div` display: flex; justify-content: space-between; width: 100%; - height: var(--bezier-tabs-size); + height: var(--b-tabs-size); box-shadow: 0 -1px 0 0 ${props => props.foundation?.theme?.['bg-black-light']} inset; ` diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts index cee4e2800d..3fcd090fd5 100644 --- a/packages/bezier-react/src/utils/style.ts +++ b/packages/bezier-react/src/utils/style.ts @@ -37,7 +37,7 @@ export function touchableHover(interpolation: InjectedInterpolation): InjectedIn export const px = (value: Value) => (!isNil(value) ? `${value}px` as const : undefined) -export const cssVarName = (componentName: ComponentName) => (propertyName: PropertyName) => `--bezier-${componentName}-${propertyName}` as const +export const cssVarName = (componentName: ComponentName) => (propertyName: PropertyName) => `--b-${componentName}-${propertyName}` as const export function cssVarValue< PropertyName extends string | undefined, diff --git a/yarn.lock b/yarn.lock index eb0cdb59e3..35cbbcdb2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2944,6 +2944,7 @@ __metadata: eslint-plugin-storybook: ^0.6.13 identity-obj-proxy: ^3.0.0 jest-styled-components: ^7.1.1 + lightningcss: ^1.22.1 paths.macro: ^3.0.1 postcss-preset-env: ^9.3.0 react: ^18.2.0 @@ -11754,6 +11755,15 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^1.0.3": + version: 1.0.3 + resolution: "detect-libc@npm:1.0.3" + bin: + detect-libc: ./bin/detect-libc.js + checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e + languageName: node + linkType: hard + "detect-newline@npm:^3.0.0": version: 3.1.0 resolution: "detect-newline@npm:3.1.0" @@ -16677,6 +16687,106 @@ __metadata: languageName: node linkType: hard +"lightningcss-darwin-arm64@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-darwin-arm64@npm:1.22.1" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"lightningcss-darwin-x64@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-darwin-x64@npm:1.22.1" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-freebsd-x64@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-freebsd-x64@npm:1.22.1" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-linux-arm-gnueabihf@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-linux-arm-gnueabihf@npm:1.22.1" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"lightningcss-linux-arm64-gnu@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-linux-arm64-gnu@npm:1.22.1" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-arm64-musl@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-linux-arm64-musl@npm:1.22.1" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-linux-x64-gnu@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-linux-x64-gnu@npm:1.22.1" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-x64-musl@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-linux-x64-musl@npm:1.22.1" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-win32-x64-msvc@npm:1.22.1": + version: 1.22.1 + resolution: "lightningcss-win32-x64-msvc@npm:1.22.1" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"lightningcss@npm:^1.22.1": + version: 1.22.1 + resolution: "lightningcss@npm:1.22.1" + dependencies: + detect-libc: ^1.0.3 + lightningcss-darwin-arm64: 1.22.1 + lightningcss-darwin-x64: 1.22.1 + lightningcss-freebsd-x64: 1.22.1 + lightningcss-linux-arm-gnueabihf: 1.22.1 + lightningcss-linux-arm64-gnu: 1.22.1 + lightningcss-linux-arm64-musl: 1.22.1 + lightningcss-linux-x64-gnu: 1.22.1 + lightningcss-linux-x64-musl: 1.22.1 + lightningcss-win32-x64-msvc: 1.22.1 + dependenciesMeta: + lightningcss-darwin-arm64: + optional: true + lightningcss-darwin-x64: + optional: true + lightningcss-freebsd-x64: + optional: true + lightningcss-linux-arm-gnueabihf: + optional: true + lightningcss-linux-arm64-gnu: + optional: true + lightningcss-linux-arm64-musl: + optional: true + lightningcss-linux-x64-gnu: + optional: true + lightningcss-linux-x64-musl: + optional: true + lightningcss-win32-x64-msvc: + optional: true + checksum: 75319e14cae842f92d2d3fbf3c7616ef427298fc3bd010bc644eb67c21af93debc2dff5dcf67b6dcf0eab0ca6c073bc670805bba1977cf3423d0da766e15caf3 + languageName: node + linkType: hard + "lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5": version: 2.1.0 resolution: "lilconfig@npm:2.1.0"