diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.input.js index aea9c23a2c..1cbbf2d573 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.input.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.input.js @@ -1,17 +1,12 @@ import styled from '@emotion/styled'; import { css } from '@emotion/core'; -const borderRadiusStyles = ({ theme }) => css` +const elementStyles = ({ theme }) => css` border-top-left-radius: ${theme.borderRadius.mega}; border-top-right-radius: ${theme.borderRadius.giga}; border-bottom-left-radius: ${theme.borderRadius.tera}; border-bottom-right-radius: ${theme.borderRadius.peta}; -`; - -const removedRadiusStyles = ({ theme }) => css` border-radius: ${theme.borderRadius.kilo}; `; -const BorderRadius = styled.div(borderRadiusStyles); - -const RemovedRadius = styled.div(removedRadiusStyles); +const Element = styled.div(elementStyles); diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.output.js index 1b2057affb..fb630efdbd 100644 --- a/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.output.js +++ b/packages/circuit-ui/cli/migrate/__testfixtures__/theme-border-radius.output.js @@ -1,17 +1,12 @@ import styled from '@emotion/styled'; import { css } from '@emotion/core'; -const borderRadiusStyles = ({ theme }) => css` +const elementStyles = ({ theme }) => css` border-top-left-radius: ${theme.borderRadius.bit}; border-top-right-radius: ${theme.borderRadius.byte}; border-bottom-left-radius: ${theme.borderRadius.byte}; border-bottom-right-radius: ${theme.borderRadius.kilo}; + border-radius: ${'1px'}; `; -const removedRadiusStyles = ({ theme }) => css` - border-radius: ${theme.borderRadius.none}; -`; - -const BorderRadius = styled.div(borderRadiusStyles); - -const RemovedRadius = styled.div(removedRadiusStyles); +const Element = styled.div(elementStyles); diff --git a/packages/circuit-ui/cli/migrate/theme-border-radius.ts b/packages/circuit-ui/cli/migrate/theme-border-radius.ts index 5173847c83..27e85599bb 100644 --- a/packages/circuit-ui/cli/migrate/theme-border-radius.ts +++ b/packages/circuit-ui/cli/migrate/theme-border-radius.ts @@ -32,7 +32,9 @@ const transform: Transform = (file, api) => { const j = api.jscodeshift; const root = j(file.source); - renameFactory(j, root, 'kilo', 'none'); // TODO add and deprecate none in design tokens + findProperty(j, root, `theme.borderRadius.kilo`).replaceWith( + j.identifier(`'1px'`), + ); renameFactory(j, root, 'mega', 'bit'); renameFactory(j, root, 'giga', 'byte'); renameFactory(j, root, 'tera', 'byte'); diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap index 596f7634ab..ab4ef8be03 100644 --- a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap +++ b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap @@ -8,7 +8,6 @@ Object { "circle": "100%", "kilo": "12px", "mega": "16px", - "none": "0", "pill": "999999px", }, "borderWidth": Object { diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts index 71eb09f361..1b4b256de0 100644 --- a/packages/design-tokens/themes/shared.ts +++ b/packages/design-tokens/themes/shared.ts @@ -47,7 +47,6 @@ export const iconSizes: IconSizes = { }; export const borderRadius: BorderRadius = { - none: '0', bit: '4px', byte: '8px', kilo: '12px', diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts index d4d884e82f..ed9f3e3b1b 100644 --- a/packages/design-tokens/types/index.ts +++ b/packages/design-tokens/types/index.ts @@ -104,7 +104,6 @@ export type IconSizes = { }; export type BorderRadius = { - none: string; bit: string; byte: string; kilo: string; diff --git a/packages/design-tokens/utils/theme-prop-type.ts b/packages/design-tokens/utils/theme-prop-type.ts index 7ac8c2623f..4a7e3ddb38 100644 --- a/packages/design-tokens/utils/theme-prop-type.ts +++ b/packages/design-tokens/utils/theme-prop-type.ts @@ -146,7 +146,6 @@ export const themePropType = PropTypes.shape({ giga: PropTypes.string.isRequired, } as { [key in keyof IconSizes]: any }).isRequired, borderRadius: PropTypes.shape({ - none: PropTypes.string.isRequired, bit: PropTypes.string.isRequired, byte: PropTypes.string.isRequired, kilo: PropTypes.string.isRequired,