diff --git a/.changeset/dry-donuts-prove.md b/.changeset/dry-donuts-prove.md new file mode 100644 index 000000000..182b43fa9 --- /dev/null +++ b/.changeset/dry-donuts-prove.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix outline styles after migration in various components. diff --git a/.changeset/pink-frogs-raise.md b/.changeset/pink-frogs-raise.md new file mode 100644 index 000000000..f78b35aae --- /dev/null +++ b/.changeset/pink-frogs-raise.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix border radius in Action buttons in CopySnippet. diff --git a/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx b/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx index baa96d6d6..3c70f728a 100644 --- a/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx +++ b/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx @@ -98,15 +98,16 @@ const CopyButton = tasty(Button, { styles: { placeSelf: 'stretch', border: '#clear', - outline: { - '': '#purple-03.0', - 'focused & focus-visible': '#purple-03 inset', + shadow: { + '': '0 0 0 1ow #purple-03.0 inset', + focused: '0 0 0 1ow #purple-03 inset', }, radius: { '': '0 1r 1r 0', 'multiline | with-scroll': '0 1r 0 0', }, height: 'auto', + outline: false, }, }); diff --git a/src/components/content/CopySnippet/CopySnippet.tsx b/src/components/content/CopySnippet/CopySnippet.tsx index 915994e6d..4aa75d75a 100644 --- a/src/components/content/CopySnippet/CopySnippet.tsx +++ b/src/components/content/CopySnippet/CopySnippet.tsx @@ -69,9 +69,19 @@ const ButtonContainer = tasty({ multiline: '4x', }, - '@button-radius': { + '@first-button-radius': { + '': '0 1r 1r 0', + multiline: '0 1r 0 0', + }, + + '@last-button-radius': { '': '0', - multiline: '1r', + multiline: '0 0 0 1r', + }, + + '@first-and-last-button-radius': { + '': '0 1r 1r 0', + multiline: '0 1r 0 1r', }, // Make sure there's a small gap between buttons and the content @@ -110,16 +120,17 @@ const ActionButton = tasty(Button, { padding: 0, placeSelf: 'stretch', border: '#clear', - outline: { - '': '#purple-03.0', - 'focused & focus-visible': '#purple-03 inset', + shadow: { + '': 'inset 0 0 0 1ow #purple-03.0', + focused: 'inset 0 0 0 1ow #purple-03', }, + outline: false, height: '@button-size', radius: { - '': '0', - ':last-child': '0 0 0 @button-radius', - ':first-child': '0 @button-radius 0 0', - ':last-child & :first-child': '0 @button-radius 0 @button-radius', + '': 0, + ':last-child': '@last-button-radius', + ':first-child': '@first-button-radius', + ':first-child & :last-child': '@first-and-last-button-radius', }, }, }); diff --git a/src/components/organisms/FileTabs/FileTabs.tsx b/src/components/organisms/FileTabs/FileTabs.tsx index b5bf802a9..3bb371bd6 100644 --- a/src/components/organisms/FileTabs/FileTabs.tsx +++ b/src/components/organisms/FileTabs/FileTabs.tsx @@ -108,10 +108,6 @@ const TabElement = tasty(Action, { fontWeight: 500, opacity: 1, preset: 'default', - shadow: { - '': 'inset 0 0 0 1ow #purple-03.0', - 'focused & focus-visible': 'inset 0 0 0 1ow #purple-03', - }, transform: { '': 'translate(0, 0)', '[disabled]': 'translate(0, 1bw)', @@ -150,7 +146,7 @@ const CloseButton = tasty(Button, { padding: '.25x', outline: { '': '#purple-03.0', - 'focused & focus-visible': '#purple-03', + focused: '#purple-03', }, radius: '1r', }, diff --git a/src/components/pickers/Menu/MenuButton.tsx b/src/components/pickers/Menu/MenuButton.tsx index 43154cbfc..ff90f1e28 100644 --- a/src/components/pickers/Menu/MenuButton.tsx +++ b/src/components/pickers/Menu/MenuButton.tsx @@ -46,6 +46,10 @@ const StyledButton = tasty(Block, { flow: 'row', justifyContent: 'start', gap: '.75x', + outline: { + '': '#purple-03.0', + 'focused & focus-visible': '#purple-03', + }, ButtonIcon: { display: 'grid', diff --git a/src/tasty/styles/transition.ts b/src/tasty/styles/transition.ts index 3a9abf4b9..29a29e511 100644 --- a/src/tasty/styles/transition.ts +++ b/src/tasty/styles/transition.ts @@ -20,7 +20,14 @@ const MAP = { 'font-style', ], text: ['font-weight', 'text-decoration-color'], - theme: ['color', 'background-color', 'box-shadow', 'border', 'border-radius'], + theme: [ + 'color', + 'background-color', + 'box-shadow', + 'border', + 'border-radius', + 'outline', + ], inset: ['box-shadow'], mark: ['box-shadow'], width: ['max-width', 'min-width', 'width'],