diff --git a/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png index 4b1f064175..d651fbfc33 100644 --- a/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Borderless/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8120541d9f6b322bd44ec50b7c8ef59a73889073ce66f908c98b9970b483fe97 -size 46867 +oid sha256:c3ccd3f561f26d60ec11c21b1bd2a7cf815c2a31df2ce7e49423bb8c7a3d4b4c +size 46470 diff --git a/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png index 2871d2eb1a..fc970da5c9 100644 --- a/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Borderless/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:875960cfd832e677428f5bfb55a22ec7a059ff357ec49b9a2b3b112beb8a4556 -size 47884 +oid sha256:f712f8ee71d54af41e9d82014b333ed84ce4fbe9eb60615267e310b9b635d5e4 +size 47583 diff --git a/packages/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png index a25d618a41..0b1bb1e1aa 100644 --- a/packages/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Different Prioritization/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4abe3d486f1aa8ccf86c50b1268e745d603406d8d55d683882f6de71c1ef2a6f -size 238951 +oid sha256:7c1a7c3f924ae4ab06851c03ad2c9f7a37925c016cba7fee7adfa57664e8a0b7 +size 234431 diff --git a/packages/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png index 39b346c9e3..fbfd852add 100644 --- a/packages/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Different Prioritization/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d9c401474ec795ba1718da10800c12f96269978dfb030e2646d8228bb666c84d -size 228337 +oid sha256:a0faceab96499b9a5ee19f8b908d42e774b12eea32ecbcb8d5b2901929f4ee4c +size 224308 diff --git a/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png index 491ec1569f..661bb7300c 100644 --- a/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Disabled/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:39a7bab048aa9a8feccd0d9b94079b39d17cc5e7525e9f920168c33ae4f71baa -size 20270 +oid sha256:fd9713105b0595c2ed021f9a0160fb04ea6c85e8f217e99aeeea2ec2db3d93a6 +size 19457 diff --git a/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png index 6a209a6c2b..3c0da301f6 100644 --- a/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Disabled/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e335ee6737e59d237df00ebb18c852808a1f607a730b1fe7a4e66d2f75d03bee -size 20336 +oid sha256:c8eafc981bc236950fa0480d76b8bd3ba9c8871633fe0322d46523a9ffa34926 +size 19517 diff --git a/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png index ffddf570c0..d85dbbeac0 100644 --- a/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Icon/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e1b07a37fd5ffffeb13edff28f7f7001ead55d9e10adb0b23732262c04daf672 -size 54511 +oid sha256:d9bd2f420e5b79e8fb86b5d61f0e767f2cdcb385387536b80d62e9bbf0079195 +size 54140 diff --git a/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png index ab5265e107..838a64a7ee 100644 --- a/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Icon/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:62adf4cd44f4aa1634f4513b2f492a1fcc2f4e96fe88d0060f98c765cffc371f -size 55494 +oid sha256:f54ae5c518d2f02d5428faf3034351564b241b8be8412d70fabc2c2f09dab160 +size 55081 diff --git a/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png b/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png index 5df42d3478..4d849dfd07 100644 --- a/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Loading/chrome2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6140befc0954af2c580f946d90950baaf8b4890349c2e33ab280a5592db57f35 -size 27257 +oid sha256:87f1ac513d8d4540144525e61516300bd5a425970b02c822398faa51198f92f6 +size 26701 diff --git a/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png b/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png index d827b33dfe..f3400bf58e 100644 --- a/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png +++ b/packages/react-ui/.creevey/images/Button/Loading/firefox2022Dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e5137678a85ee5afbcb535b05957274bb2fead4cf6a473d8894dca2d09d50f75 -size 30435 +oid sha256:74dc498dbe0493735bad1965804a93332ca93e14f63b9ee3156e9ffff68293d3 +size 29662 diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 0fbd582092..6b810aeca1 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -966,6 +966,12 @@ export const styles = memoizeStyle({ `; }, + backlessDisabled2022(t: Theme) { + return css` + box-shadow: 0 0 0 1px ${t.btnBacklessDisabledBorderColor}; + `; + }, + loading() { return css` position: absolute; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 777aa3c48b..301f86d3f3 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -317,6 +317,7 @@ export class Button extends React.Component { checked && styles.checkedDisabled(this.theme), checked && styles.checkedDisabled2022(this.theme), borderless && styles.borderless2022(), + use === 'backless' && !checked && styles.backlessDisabled2022(this.theme), ] : [ active && !checked && activeStyles[use](this.theme), diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts index 52dcb9ab2c..242d888e5d 100644 --- a/packages/react-ui/internal/themes/DefaultTheme.ts +++ b/packages/react-ui/internal/themes/DefaultTheme.ts @@ -531,6 +531,9 @@ export class DefaultTheme { public static get btnBacklessBorderColor() { return this.btnDefaultBorderColor; } + public static get btnBacklessDisabledBorderColor() { + return this.btnDisabledBorderColor; + } public static get btnBacklessHoverBorderColor() { return this.btnBacklessBorderColor; } diff --git a/packages/react-ui/internal/themes/Theme2022Dark.ts b/packages/react-ui/internal/themes/Theme2022Dark.ts index 9cfebfef50..1761ef625d 100644 --- a/packages/react-ui/internal/themes/Theme2022Dark.ts +++ b/packages/react-ui/internal/themes/Theme2022Dark.ts @@ -66,10 +66,11 @@ export class Theme2022Dark extends (class {} as typeof Theme2022Internal) { public static btnBacklessHoverBg = 'rgba(255, 255, 255, 0.1) !important'; public static btnBacklessActiveBg = 'rgba(255, 255, 255, 0.06) !important'; public static btnBacklessBorderColor = 'rgba(255, 255, 255, 0.16) !important'; + public static btnBacklessDisabledBorderColor = 'rgba(255, 255, 255, 0.06) !important'; public static btnBacklessHoverBorderColor = 'rgba(255, 255, 255, 0.1)'; public static btnBacklessTextColor = 'rgba(255, 255, 255, 0.87)'; - public static btnTextBg = 'transparent'; + public static btnTextBg = 'transparent !important'; public static btnTextHoverBg = 'rgba(255, 255, 255, 0.1)'; public static btnTextActiveBg = 'rgba(255, 255, 255, 0.06)'; public static btnTextBorderColor = 'transparent';