Update more uses

Author: gabro

packages/bento-design-system/src/Feedback/Feedback.tsx

@@ -135,7 +135,7 @@ function renderIllustration(
 ): Children {
   const illustrationProps: IllustrationProps = {
     size: config.illustrationSize[size],
-    style: "color",
+    kind: "color",
   };
   if (background && config.background) {
     // NOTE(gabro): when we have a background, the overall size of the illustration is the one of

packages/bento-design-system/src/Illustrations/svgIllustrationProps.ts

@@ -10,7 +10,7 @@ export function svgIllustrationProps(props: IllustrationProps): SVGAttributes<SV
   };
 }
 
-function outlineColor(color: (IllustrationProps & { style: "outline" })["color"]): string {
+function outlineColor(color: (IllustrationProps & { kind: "outline" })["color"]): string {
   switch (color) {
     case "default":
       return vars.foregroundColor.foregroundSecondary;

packages/bento-design-system/src/List/ListItem.tsx

@@ -135,7 +135,7 @@ function renderLeft(props: Props, config: ListItemConfig) {
       <Column width="content">
         {props.illustration({
           size: config.iconSize.illustration,
-          style: "outline",
+          kind: "outline",
           color: props.disabled ? "disabled" : "default",
         })}
       </Column>

packages/bento-design-system/src/Navigation/Navigation.tsx

@@ -92,7 +92,7 @@ function Destination({
             {illustration &&
               illustration({
                 size: config.illustrationSize[size],
-                style: "outline",
+                kind: "outline",
                 color: "inherit",
               })}
           </Column>