Update defaultConfig and rename function

Author: gabro

Diff for: packages/bento-design-system/src/AreaLoader/createAreaLoader.tsx

@@ -5,7 +5,7 @@ import { Body, LocalizedString } from "..";
 import { AreaLoaderConfig } from "./Config";
 import { BodyProps } from "../Typography/Body/Body";
 
-function visibilityAreaColorToBackground(
+function readabilityAreaColorToBackground(
   color: AreaLoaderConfig["readabilityAreaColor"]
 ): BentoSprinkles["background"] {
   switch (color) {
@@ -64,7 +64,7 @@ export function createAreaLoader(config: AreaLoaderConfig) {
         <Box
           padding={80}
           className={bentoSprinkles({
-            background: visibilityAreaColorToBackground(config.readabilityAreaColor),
+            background: readabilityAreaColorToBackground(config.readabilityAreaColor),
             borderRadius: config.readabilityAreaBorderRadius,
           })}
         >

Diff for: packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -53,8 +53,11 @@ export const actions: ActionsConfig = {
 
 export const areaLoader: AreaLoaderConfig = {
   dots: [{ color: "brandPrimary" }, { color: "brandSecondary" }, { color: "brandTertiary" }],
-  overlay: "light",
-  visibilityAreaColor: "primary",
+  scrimColor: "light",
+  messageColor: "primary",
+  messageSize: "medium",
+  readabilityAreaColor: "primary",
+  readabilityAreaBorderRadius: undefined,
 };
 
 export const avatar: AvatarConfig = {