@x-plat/design-system 0.1.4 → 0.2.0

package/dist/{colors-BG91q_uV.d.cts → colors-DmMsWD7G.d.cts}

@@ -121,13 +121,29 @@ declare const colors: {
     };
 };
 
-type ColorNamespace = keyof typeof colors;
-type ColorName<C extends ColorNamespace> = keyof (typeof colors)[C];
-type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = (typeof colors)[C][K] extends string ? undefined : keyof (typeof colors)[C][K];
+/**
+ * 브랜드 토큰 패키지에서 확장 가능한 인터페이스.
+ * declare module "@x-plat/design-system" 로 머지하면 됨.
+ *
+ * @example
+ * // @x-plat/tokens-cbio/types.d.ts
+ * declare module "@x-plat/design-system" {
+ *   interface CustomColors {
+ *     primitive: { 500: string; 600: string };
+ *   }
+ * }
+ */
+interface CustomColors {
+}
+type DefaultColors = typeof colors;
+type MergedNamespaceColors<N extends keyof DefaultColors> = DefaultColors[N] & (N extends "xplat" ? CustomColors : {});
+type ColorNamespace = keyof DefaultColors;
+type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
+type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
 interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
     colorNamespace?: N;
     color?: C;
     colorDepth?: ColorDepth<N, C>;
 }
 
-export { type ColorNamespace as C, type ColorName as a, type ColorDepth as b, colors as c, type ColorProps as d };
+export { type CustomColors as C, type ColorNamespace as a, type ColorName as b, colors as c, type ColorDepth as d, type ColorProps as e };

package/dist/{colors-BG91q_uV.d.ts → colors-DmMsWD7G.d.ts}

@@ -121,13 +121,29 @@ declare const colors: {
     };
 };
 
-type ColorNamespace = keyof typeof colors;
-type ColorName<C extends ColorNamespace> = keyof (typeof colors)[C];
-type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = (typeof colors)[C][K] extends string ? undefined : keyof (typeof colors)[C][K];
+/**
+ * 브랜드 토큰 패키지에서 확장 가능한 인터페이스.
+ * declare module "@x-plat/design-system" 로 머지하면 됨.
+ *
+ * @example
+ * // @x-plat/tokens-cbio/types.d.ts
+ * declare module "@x-plat/design-system" {
+ *   interface CustomColors {
+ *     primitive: { 500: string; 600: string };
+ *   }
+ * }
+ */
+interface CustomColors {
+}
+type DefaultColors = typeof colors;
+type MergedNamespaceColors<N extends keyof DefaultColors> = DefaultColors[N] & (N extends "xplat" ? CustomColors : {});
+type ColorNamespace = keyof DefaultColors;
+type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
+type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
 interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
     colorNamespace?: N;
     color?: C;
     colorDepth?: ColorDepth<N, C>;
 }
 
-export { type ColorNamespace as C, type ColorName as a, type ColorDepth as b, colors as c, type ColorProps as d };
+export { type CustomColors as C, type ColorNamespace as a, type ColorName as b, colors as c, type ColorDepth as d, type ColorProps as e };

package/dist/components/Accordion/index.cjs

@@ -937,7 +937,7 @@ var import_jsx_runtime293 = require("react/jsx-runtime");
 // src/tokens/svg/validation/SuccessIcon.tsx
 var import_jsx_runtime294 = require("react/jsx-runtime");
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -988,26 +988,37 @@ var AccordionItem = ({ item, isOpen, onToggle }) => {
   ] });
 };
 var Accordion = (props) => {
-  const { items, multiple = false, defaultActiveKeys = [], className } = props;
-  const [activeKeys, setActiveKeys] = import_react.default.useState(
-    new Set(defaultActiveKeys)
+  const { items, className } = props;
+  const isMultiple = props.multiple === true;
+  const controlledKeys = isMultiple ? props.activeKeys : props.activeKey !== void 0 ? props.activeKey !== null ? [props.activeKey] : [] : void 0;
+  const defaultKeys = isMultiple ? props.defaultActiveKeys ?? [] : props.defaultActiveKey ? [props.defaultActiveKey] : [];
+  const isControlled = controlledKeys !== void 0;
+  const [uncontrolledKeys, setUncontrolledKeys] = import_react.default.useState(
+    new Set(defaultKeys)
   );
+  const currentKeys = isControlled ? new Set(controlledKeys) : uncontrolledKeys;
   const toggle = (key) => {
-    setActiveKeys((prev) => {
-      const next = new Set(multiple ? prev : []);
-      if (prev.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
+    const next = new Set(isMultiple ? currentKeys : []);
+    if (currentKeys.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    if (!isControlled) {
+      setUncontrolledKeys(next);
+    }
+    if (isMultiple) {
+      props.onChange?.([...next]);
+    } else {
+      const first = [...next][0] ?? null;
+      props.onChange?.(first);
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
     AccordionItem,
     {
       item,
-      isOpen: activeKeys.has(item.key),
+      isOpen: currentKeys.has(item.key),
       onToggle: () => toggle(item.key)
     },
     item.key

package/dist/components/Accordion/index.css

@@ -1,11 +1,11 @@
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
-  border: 1px solid #E5E5E5;
+  border: 1px solid var(--xplat-neutral-200);
   border-radius: 0.5rem;
   overflow: hidden;
 }
 .lib-xplat-accordion .accordion-item {
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid var(--xplat-neutral-200);
 }
 .lib-xplat-accordion .accordion-item:last-child {
   border-bottom: none;
@@ -21,19 +21,19 @@
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  color: #171717;
+  color: var(--xplat-neutral-900);
   text-align: left;
   transition: background-color 0.2s;
 }
 .lib-xplat-accordion .accordion-header:hover {
-  background-color: #FAFAFA;
+  background-color: var(--xplat-neutral-50);
 }
 .lib-xplat-accordion .accordion-header .chevron {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   transition: transform 0.25s ease;
-  color: #737373;
+  color: var(--xplat-neutral-500);
 }
 .lib-xplat-accordion .accordion-body {
   overflow: hidden;
@@ -43,7 +43,7 @@
 .lib-xplat-accordion .accordion-content {
   padding: 0 1rem 0.875rem;
   font-size: 14px;
-  color: #525252;
+  color: var(--xplat-neutral-600);
   line-height: 1.6;
 }
 .lib-xplat-accordion .accordion-item.open .chevron {

package/dist/components/Accordion/index.d.cts

@@ -5,12 +5,25 @@ interface AccordionItemData {
     title: React.ReactNode;
     content: React.ReactNode;
 }
-interface AccordionProps {
+interface AccordionBaseProps {
     items: AccordionItemData[];
-    multiple?: boolean;
-    defaultActiveKeys?: string[];
     className?: string;
 }
+interface AccordionSingleProps extends AccordionBaseProps {
+    multiple?: false;
+    /** 열려있는 아이템 key (controlled) */
+    activeKey?: string | null;
+    defaultActiveKey?: string;
+    onChange?: (key: string | null) => void;
+}
+interface AccordionMultipleProps extends AccordionBaseProps {
+    multiple: true;
+    /** 열려있는 아이템 key 목록 (controlled) */
+    activeKeys?: string[];
+    defaultActiveKeys?: string[];
+    onChange?: (keys: string[]) => void;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
 declare const Accordion: React.FC<AccordionProps>;
 
 export { Accordion };

package/dist/components/Accordion/index.d.ts

@@ -5,12 +5,25 @@ interface AccordionItemData {
     title: React.ReactNode;
     content: React.ReactNode;
 }
-interface AccordionProps {
+interface AccordionBaseProps {
     items: AccordionItemData[];
-    multiple?: boolean;
-    defaultActiveKeys?: string[];
     className?: string;
 }
+interface AccordionSingleProps extends AccordionBaseProps {
+    multiple?: false;
+    /** 열려있는 아이템 key (controlled) */
+    activeKey?: string | null;
+    defaultActiveKey?: string;
+    onChange?: (key: string | null) => void;
+}
+interface AccordionMultipleProps extends AccordionBaseProps {
+    multiple: true;
+    /** 열려있는 아이템 key 목록 (controlled) */
+    activeKeys?: string[];
+    defaultActiveKeys?: string[];
+    onChange?: (keys: string[]) => void;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
 declare const Accordion: React.FC<AccordionProps>;
 
 export { Accordion };

package/dist/components/Accordion/index.js

@@ -901,7 +901,7 @@ import { jsx as jsx293, jsxs as jsxs188 } from "react/jsx-runtime";
 // src/tokens/svg/validation/SuccessIcon.tsx
 import { jsx as jsx294 } from "react/jsx-runtime";
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -952,26 +952,37 @@ var AccordionItem = ({ item, isOpen, onToggle }) => {
   ] });
 };
 var Accordion = (props) => {
-  const { items, multiple = false, defaultActiveKeys = [], className } = props;
-  const [activeKeys, setActiveKeys] = React.useState(
-    new Set(defaultActiveKeys)
+  const { items, className } = props;
+  const isMultiple = props.multiple === true;
+  const controlledKeys = isMultiple ? props.activeKeys : props.activeKey !== void 0 ? props.activeKey !== null ? [props.activeKey] : [] : void 0;
+  const defaultKeys = isMultiple ? props.defaultActiveKeys ?? [] : props.defaultActiveKey ? [props.defaultActiveKey] : [];
+  const isControlled = controlledKeys !== void 0;
+  const [uncontrolledKeys, setUncontrolledKeys] = React.useState(
+    new Set(defaultKeys)
   );
+  const currentKeys = isControlled ? new Set(controlledKeys) : uncontrolledKeys;
   const toggle = (key) => {
-    setActiveKeys((prev) => {
-      const next = new Set(multiple ? prev : []);
-      if (prev.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
+    const next = new Set(isMultiple ? currentKeys : []);
+    if (currentKeys.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    if (!isControlled) {
+      setUncontrolledKeys(next);
+    }
+    if (isMultiple) {
+      props.onChange?.([...next]);
+    } else {
+      const first = [...next][0] ?? null;
+      props.onChange?.(first);
+    }
   };
   return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ jsx295(
     AccordionItem,
     {
       item,
-      isOpen: activeKeys.has(item.key),
+      isOpen: currentKeys.has(item.key),
       onToggle: () => toggle(item.key)
     },
     item.key

package/dist/components/Alert/index.cjs

@@ -24,7 +24,7 @@ __export(Alert_exports, {
 });
 module.exports = __toCommonJS(Alert_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/Alert/index.css

@@ -27,34 +27,34 @@
   opacity: 1;
 }
 .lib-xplat-alert.info {
-  background-color: #EEFAFF;
-  border-color: #BBEDFF;
-  color: #1280E3;
+  background-color: var(--xplat-lightblue-50);
+  border-color: var(--xplat-lightblue-200);
+  color: var(--xplat-lightblue-700);
 }
 .lib-xplat-alert.info .close-btn {
-  color: #1280E3;
+  color: var(--xplat-lightblue-700);
 }
 .lib-xplat-alert.success {
-  background-color: #E5F6EA;
-  border-color: #98D8AC;
-  color: #009143;
+  background-color: var(--xplat-green-50);
+  border-color: var(--xplat-green-200);
+  color: var(--xplat-green-700);
 }
 .lib-xplat-alert.success .close-btn {
-  color: #009143;
+  color: var(--xplat-green-700);
 }
 .lib-xplat-alert.warning {
-  background-color: #FFFDE7;
-  border-color: #FFF186;
-  color: #A66002;
+  background-color: var(--xplat-yellow-50);
+  border-color: var(--xplat-yellow-200);
+  color: var(--xplat-yellow-700);
 }
 .lib-xplat-alert.warning .close-btn {
-  color: #A66002;
+  color: var(--xplat-yellow-700);
 }
 .lib-xplat-alert.error {
-  background-color: #FFF0F0;
-  border-color: #FFC1C2;
-  color: #D40105;
+  background-color: var(--xplat-red-50);
+  border-color: var(--xplat-red-200);
+  color: var(--xplat-red-700);
 }
 .lib-xplat-alert.error .close-btn {
-  color: #D40105;
+  color: var(--xplat-red-700);
 }

package/dist/components/Alert/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/Avatar/index.cjs

@@ -151,7 +151,7 @@ var getColorClass = (namespace, palette, shade) => {
   return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
 };
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/Avatar/index.css

@@ -34,289 +34,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #FFFFFF;
+  color: var(--xplat-white);
   font-weight: 600;
 }
 .lib-xplat-avatar .fallback svg {
   width: 60%;
   height: 60%;
 }
-.lib-xplat-avatar .fallback.xplat-red-50 {
-  background-color: #FFF0F0;
-}
-.lib-xplat-avatar .fallback.xplat-red-100 {
-  background-color: #FFDDDE;
-}
-.lib-xplat-avatar .fallback.xplat-red-200 {
-  background-color: #FFC1C2;
-}
-.lib-xplat-avatar .fallback.xplat-red-300 {
-  background-color: #FF9698;
-}
-.lib-xplat-avatar .fallback.xplat-red-400 {
-  background-color: #FF5A5D;
-}
-.lib-xplat-avatar .fallback.xplat-red-500 {
-  background-color: #FF272B;
-}
-.lib-xplat-avatar .fallback.xplat-red-600 {
-  background-color: #F80409;
-}
-.lib-xplat-avatar .fallback.xplat-red-700 {
-  background-color: #D40105;
-}
-.lib-xplat-avatar .fallback.xplat-red-800 {
-  background-color: #AE0609;
-}
-.lib-xplat-avatar .fallback.xplat-red-900 {
-  background-color: #900C0F;
-}
-.lib-xplat-avatar .fallback.xplat-green-50 {
-  background-color: #E5F6EA;
-}
-.lib-xplat-avatar .fallback.xplat-green-100 {
-  background-color: #C1E7CC;
-}
-.lib-xplat-avatar .fallback.xplat-green-200 {
-  background-color: #98D8AC;
-}
-.lib-xplat-avatar .fallback.xplat-green-300 {
-  background-color: #6CCA8B;
-}
-.lib-xplat-avatar .fallback.xplat-green-400 {
-  background-color: #47BE72;
-}
-.lib-xplat-avatar .fallback.xplat-green-500 {
-  background-color: #10B259;
-}
-.lib-xplat-avatar .fallback.xplat-green-600 {
-  background-color: #00A34F;
-}
-.lib-xplat-avatar .fallback.xplat-green-700 {
-  background-color: #009143;
-}
-.lib-xplat-avatar .fallback.xplat-green-800 {
-  background-color: #007F38;
-}
-.lib-xplat-avatar .fallback.xplat-green-900 {
-  background-color: #006024;
-}
-.lib-xplat-avatar .fallback.xplat-orange-50 {
-  background-color: #FFF8EC;
-}
-.lib-xplat-avatar .fallback.xplat-orange-100 {
-  background-color: #FFF0D3;
-}
-.lib-xplat-avatar .fallback.xplat-orange-200 {
-  background-color: #FFDDA5;
-}
-.lib-xplat-avatar .fallback.xplat-orange-300 {
-  background-color: #FFC46D;
-}
-.lib-xplat-avatar .fallback.xplat-orange-400 {
-  background-color: #FF9F32;
-}
-.lib-xplat-avatar .fallback.xplat-orange-500 {
-  background-color: #FF820A;
-}
-.lib-xplat-avatar .fallback.xplat-orange-600 {
-  background-color: #FF6900;
-}
-.lib-xplat-avatar .fallback.xplat-orange-700 {
-  background-color: #CC4B02;
-}
-.lib-xplat-avatar .fallback.xplat-orange-800 {
-  background-color: #A13A0B;
-}
-.lib-xplat-avatar .fallback.xplat-orange-900 {
-  background-color: #82320C;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-50 {
-  background-color: #FFFDE7;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-100 {
-  background-color: #FFFAC1;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-200 {
-  background-color: #FFF186;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-300 {
-  background-color: #FFE041;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-400 {
-  background-color: #FFCC0D;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-500 {
-  background-color: #F0B100;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-600 {
-  background-color: #D18800;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-700 {
-  background-color: #A66002;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-800 {
-  background-color: #894B0A;
-}
-.lib-xplat-avatar .fallback.xplat-yellow-900 {
-  background-color: #743D0F;
-}
-.lib-xplat-avatar .fallback.xplat-blue-50 {
-  background-color: #F1F4FD;
-}
-.lib-xplat-avatar .fallback.xplat-blue-100 {
-  background-color: #DFE7FA;
-}
-.lib-xplat-avatar .fallback.xplat-blue-200 {
-  background-color: #C5D4F8;
-}
-.lib-xplat-avatar .fallback.xplat-blue-300 {
-  background-color: #9EB8F2;
-}
-.lib-xplat-avatar .fallback.xplat-blue-400 {
-  background-color: #7093EA;
-}
-.lib-xplat-avatar .fallback.xplat-blue-500 {
-  background-color: #4D6DE3;
-}
-.lib-xplat-avatar .fallback.xplat-blue-600 {
-  background-color: #3950D7;
-}
-.lib-xplat-avatar .fallback.xplat-blue-700 {
-  background-color: #303EC5;
-}
-.lib-xplat-avatar .fallback.xplat-blue-800 {
-  background-color: #2D35A0;
-}
-.lib-xplat-avatar .fallback.xplat-blue-900 {
-  background-color: #29317F;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-50 {
-  background-color: #EEFAFF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-100 {
-  background-color: #D9F4FF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-200 {
-  background-color: #BBEDFF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-300 {
-  background-color: #8DE3FF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-400 {
-  background-color: #57D0FF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-500 {
-  background-color: #30B6FF;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-600 {
-  background-color: #1999F7;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-700 {
-  background-color: #1280E3;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-800 {
-  background-color: #1566B8;
-}
-.lib-xplat-avatar .fallback.xplat-lightblue-900 {
-  background-color: #175791;
-}
-.lib-xplat-avatar .fallback.xplat-purple-50 {
-  background-color: #FBF6FE;
-}
-.lib-xplat-avatar .fallback.xplat-purple-100 {
-  background-color: #F5EAFD;
-}
-.lib-xplat-avatar .fallback.xplat-purple-200 {
-  background-color: #EDD8FC;
-}
-.lib-xplat-avatar .fallback.xplat-purple-300 {
-  background-color: #E0BAF8;
-}
-.lib-xplat-avatar .fallback.xplat-purple-400 {
-  background-color: #CD8DF3;
-}
-.lib-xplat-avatar .fallback.xplat-purple-500 {
-  background-color: #B961EB;
-}
-.lib-xplat-avatar .fallback.xplat-purple-600 {
-  background-color: #A541DC;
-}
-.lib-xplat-avatar .fallback.xplat-purple-700 {
-  background-color: #9230C5;
-}
-.lib-xplat-avatar .fallback.xplat-purple-800 {
-  background-color: #782B9E;
-}
-.lib-xplat-avatar .fallback.xplat-purple-900 {
-  background-color: #62247F;
-}
-.lib-xplat-avatar .fallback.xplat-pink-50 {
-  background-color: #FFF4FE;
-}
-.lib-xplat-avatar .fallback.xplat-pink-100 {
-  background-color: #FFE7FD;
-}
-.lib-xplat-avatar .fallback.xplat-pink-200 {
-  background-color: #FFCFFA;
-}
-.lib-xplat-avatar .fallback.xplat-pink-300 {
-  background-color: #FEA9F1;
-}
-.lib-xplat-avatar .fallback.xplat-pink-400 {
-  background-color: #FD75E7;
-}
-.lib-xplat-avatar .fallback.xplat-pink-500 {
-  background-color: #F553DA;
-}
-.lib-xplat-avatar .fallback.xplat-pink-600 {
-  background-color: #D821B6;
-}
-.lib-xplat-avatar .fallback.xplat-pink-700 {
-  background-color: #B31892;
-}
-.lib-xplat-avatar .fallback.xplat-pink-800 {
-  background-color: #921676;
-}
-.lib-xplat-avatar .fallback.xplat-pink-900 {
-  background-color: #781761;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-50 {
-  background-color: #FAFAFA;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-100 {
-  background-color: #F5F5F5;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-200 {
-  background-color: #E5E5E5;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-300 {
-  background-color: #D4D4D4;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-400 {
-  background-color: #A1A1A1;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-500 {
-  background-color: #737373;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-600 {
-  background-color: #525252;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-700 {
-  background-color: #404040;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-800 {
-  background-color: #262626;
-}
-.lib-xplat-avatar .fallback.xplat-neutral-900 {
-  background-color: #171717;
-}
-.lib-xplat-avatar .fallback.xplat-black {
-  background-color: #000000;
-}
-.lib-xplat-avatar .fallback.xplat-white {
-  background-color: #FFFFFF;
-}
-.lib-xplat-avatar .fallback.test-default {
-  background-color: #ffffff;
+.lib-xplat-avatar .fallback {
+  background-color: var(--ds-color);
 }