feat(Card): Add outline-tint mode

packages/vkui/src/components/Card/Card.e2e-playground.tsx

@@ -12,7 +12,7 @@ export const CardPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          mode: ['tint', 'shadow', 'outline'],
+          mode: ['tint', 'shadow', 'outline', 'outline-tint'],
         },
       ]}
     >

packages/vkui/src/components/Card/Card.module.css

@@ -17,7 +17,7 @@
   background: var(--vkui--color_background_modal);
 }
 
-.Card--mode-outline::after {
+.Card--withBorder::after {
   position: absolute;
   left: 0;
   top: 0;

packages/vkui/src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ import styles from './Card.module.css';
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
-  mode?: 'tint' | 'shadow' | 'outline';
+  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
 }
 
 /**
@@ -19,6 +19,7 @@ export const Card = ({
   className,
   ...restProps
 }: CardProps) => {
+  const withBorder = mode === 'outline' || mode === 'outline-tint';
   return (
     <div
       {...restProps}
@@ -27,6 +28,7 @@ export const Card = ({
         styles['Card'],
         mode === 'outline' && styles['Card--mode-outline'],
         mode === 'shadow' && styles['Card--mode-shadow'],
+        withBorder && styles['Card--withBorder'],
         className,
       )}
     >

packages/vkui/src/components/Card/Readme.md

@@ -24,6 +24,16 @@
           </Card>
         </CardGrid>
       </Group>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+      >
+        <CardGrid size="l">
+          <Card mode="outline-tint">
+            <div style={{ height: 96 }} />
+          </Card>
+        </CardGrid>
+      </Group>
     </Group>
   </Panel>
 </View>

packages/vkui/src/components/Tappable/Tappable.module.css

@@ -119,6 +119,10 @@ https://github.com/VKCOM/VKUI/pull/3641
   }
 }
 
+.Tappable.Tappable--borderRadiusInherit {
+  border-radius: inherit;
+}
+
 /**
  * Animations
  */

packages/vkui/src/components/Tappable/Tappable.tsx

@@ -87,6 +87,11 @@ export interface TappableProps
   focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;
   onEnter?(outputEvent: MouseEvent): void;
   onLeave?(outputEvent: MouseEvent): void;
+  /**
+   * Задает border-radius элементу
+   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`
+   */
+  borderRadiusMode?: 'auto' | 'inherit';
 }
 
 interface Wave {
@@ -195,6 +200,7 @@ export const Tappable = ({
   onLeave,
   className,
   hovered: hoveredProp,
+  borderRadiusMode = 'auto',
   ...props
 }: TappableProps) => {
   Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);
@@ -330,6 +336,7 @@ export const Tappable = ({
         opacity: styles['Tappable--active-opacity'],
       }[activeMode],
     focusVisible && styles['Tappable--focus-visible'],
+    borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],
   );
 
   const handlers: RootComponentProps = {