feat: add card image variant

Author: Lucas Araujo

src/design-system/cards/base-card.css.ts

@@ -27,6 +27,11 @@ export const card = recipe({
         borderStyle: 'solid',
         borderWidth: vars.spacing.$2,
       },
+      [Scheme.Img]: {
+        borderColor: vars.colors.$card_img_borderColor,
+        backgroundColor: vars.colors.$card_img_bgColor,
+        borderRadius: vars.radius.$large,
+      },
     },
   },
 });

src/design-system/cards/cards.stories.tsx

@@ -41,6 +41,10 @@ export const Overview = (): JSX.Element => {
       Component: Card.Outlined,
       variant: Scheme.Outlined,
     },
+    {
+      Component: Card.Img,
+      variant: Scheme.Img,
+    },
   ];
 
   const renderTable = (showHeader = false): JSX.Element => (

src/design-system/cards/img.component.tsx

@@ -0,0 +1,8 @@
+import { createCardVariantComponent } from './create-card-variant-component.util';
+import { Scheme } from './types';
+
+import type { VariantCardProps } from './create-card-variant-component.util';
+
+export type ElevatedProps = VariantCardProps;
+
+export const Img = createCardVariantComponent<ElevatedProps>(Scheme.Img);

src/design-system/cards/index.ts

@@ -1,3 +1,4 @@
 export { Elevated } from './elevated.component';
 export { Greyed } from './greyed.component';
 export { Outlined } from './outlined.component';
+export { Img } from './img.component';

src/design-system/cards/types.ts

@@ -2,4 +2,5 @@ export enum Scheme {
   Elevated = 'Elevated',
   Greyed = 'Greyed',
   Outlined = 'Outlined',
+  Img = 'Img',
 }

src/design-tokens/colors.data.ts

@@ -38,6 +38,8 @@ export const colors = {
   $card_greyed_backgroundColor: '',
   $card_outlined_backgroundColor: '',
   $card_outlined_borderColor: '',
+  $card_img_bgColor: '',
+  $card_img_borderColor: '',
 
   $control_buttons_label_color: '',
   $control_buttons_label_color_danger: '',
@@ -202,6 +204,7 @@ export const colors = {
   $data_green: '',
   $data_yellow: '',
   $data_orange: '',
+  $white: '',
 
   $educational_card_root_container_bgColor: '',
   $educational_card_root_container_borderColor: '',

src/design-tokens/theme/dark-theme.css.ts

@@ -73,6 +73,8 @@ const colors: Colors = {
   $card_greyed_backgroundColor: darkColorScheme.$primary_dark_grey_plus,
   $card_outlined_backgroundColor: darkColorScheme.$primary_mid_black,
   $card_outlined_borderColor: colorTransparent,
+  $card_img_bgColor: darkColorScheme.$primary_mid_grey,
+  $card_img_borderColor: darkColorScheme.$primary_light_black,
 
   $control_buttons_label_color: darkColorScheme.$primary_white,
   $control_buttons_label_color_hover: darkColorScheme.$primary_light_grey,
@@ -289,6 +291,7 @@ const colors: Colors = {
   $data_pink: darkColorScheme.$secondary_data_pink,
   $data_yellow: darkColorScheme.$secondary_lace_yellow,
   $data_orange: darkColorScheme.$secondary_data_orange,
+  $white: darkColorScheme.$primary_white,
 
   $educational_card_root_container_bgColor: darkColorScheme.$primary_mid_black,
   $educational_card_root_container_borderColor: colorTransparent,

src/design-tokens/theme/light-theme.css.ts

@@ -76,6 +76,8 @@ const colors: Colors = {
   $card_greyed_backgroundColor: lightColorScheme.$primary_light_grey,
   $card_outlined_backgroundColor: lightColorScheme.$primary_white,
   $card_outlined_borderColor: lightColorScheme.$primary_light_grey_plus,
+  $card_img_bgColor: lightColorScheme.$primary_light_grey_plus_0_56,
+  $card_img_borderColor: lightColorScheme.$primary_light_grey_0_56,
 
   $control_buttons_label_color: lightColorScheme.$primary_black,
   $control_buttons_label_color_hover: lightColorScheme.$primary_black,
@@ -309,6 +311,7 @@ const colors: Colors = {
   $data_pink: lightColorScheme.$secondary_data_pink,
   $data_yellow: lightColorScheme.$secondary_lace_yellow,
   $data_orange: lightColorScheme.$secondary_data_orange,
+  $white: lightColorScheme.$primary_white,
 
   $educational_card_root_container_bgColor: lightColorScheme.$primary_white,
   $educational_card_root_container_borderColor: