@app-studio/components 0.10.17 → 0.10.19

package/dist/native/components/Toggle/Toggle/Toggle.view.js

@@ -38,10 +38,10 @@ themeMode: elementMode, ...props }) => {
                 backgroundColor: 'transparent',
             }
             : {
-                backgroundColor: mode === 'light' ? 'color-blue-50' : 'color-blue-100',
+                backgroundColor: 'color-blue-50',
                 borderWidth: 1,
                 borderStyle: 'solid',
-                borderColor: mode === 'light' ? 'color-blue-200' : mainTone,
+                borderColor: 'color-blue-200',
             }),
         color: mainTone,
     })} {...props} {...views?.container}>

package/dist/native/components/Toggle/Toggle/Toggle.view.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.view.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toggle.view.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.view.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Toggle/Toggle/Toggle.view.native.js

@@ -5,7 +5,9 @@ const ToggleView = React.memo(({ children, shape = 'rounded', variant = 'ghost',
     const { getColor, themeMode } = useTheme();
     const mode = elementMode ?? themeMode;
     const mainColorKey = backgroundColor ?? color ?? 'theme-primary';
-    const mainTone = getColor(isDisabled ? 'theme-disabled' : mainColorKey, { themeMode: mode });
+    const mainTone = getColor(isDisabled ? 'theme-disabled' : mainColorKey, {
+        themeMode: mode,
+    });
     const palette = useMemo(() => getToggleVariants(mainTone, mode === 'light'), [mainTone, mode]);
     const base = palette[variant];
     const isActive = !!isToggle;

package/dist/native/components/Toggle/Toggle/Toggle.view.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.view.native.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.view.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQjE,MAAM,UAAU,GAAoB,KAAK,CAAC,IAAI,CAC5C,CAAC,EACC,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,eAAe,EACf,KAAK,EACL,SAAS,EAAE,WAAW,EACtB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,eAAe,IAAI,KAAK,IAAI,eAAe,CAAC;IACjE,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7F,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/F,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;IAC5B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC;gBACvB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACjC,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAClC,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,IAAI,CAAC,CACT,IAAI,CAAC,QAAQ,IAAI;QACf,GAAG,CAAC,OAAO,KAAK,MAAM;YACpB,CAAC,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE;YACpC,CAAC,CAAC;gBACE,eAAe,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;gBACtE,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ;aAC5D,CAAC;QACN,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC,CACH,IAAI,KAAK,CAAC,CACV,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Toggle.view.native.js","sourceRoot":"","sources":["../../../../../src/components/Toggle/Toggle/Toggle.view.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQjE,MAAM,UAAU,GAAoB,KAAK,CAAC,IAAI,CAC5C,CAAC,EACC,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,eAAe,EACf,KAAK,EACL,SAAS,EAAE,WAAW,EACtB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,eAAe,IAAI,KAAK,IAAI,eAAe,CAAC;IACjE,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,EAAE;QACtE,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC,EACnD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;IAC5B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE;gBACpB,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC;gBACvB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACjC,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAClC,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,IAAI,IAAI,CAAC,CACT,IAAI,CAAC,QAAQ,IAAI;QACf,GAAG,CAAC,OAAO,KAAK,MAAM;YACpB,CAAC,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE;YACpC,CAAC,CAAC;gBACE,eAAe,EACb,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ;aAC5D,CAAC;QACN,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC,CACH,IAAI,KAAK,CAAC,CACV,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/native/components/Uploader/Uploader/Uploader.view.js

@@ -28,7 +28,7 @@ renderError = ({ errorMessage, errorMessageProps, themeMode: elementMode, }) =>
       </View>);
 }, renderProgress = ({ progress, progressProps }) => {
     return (<Horizontal gap={8} alignItems="center" {...progressProps} {...views?.horizontal}>
-        <View height={4} backgroundColor="rgba(0,0,0,0.1)" width="100%" borderRadius={2} {...views?.view}>
+        <View height={4} backgroundColor="color-black-100" width="100%" borderRadius={2} {...views?.view}>
           <View height={4} width={`${progress}%`} borderRadius={2} backgroundColor="color-dark-50" {...views?.view}/>
         </View>
         <Text fontSize={12} {...views?.text}>
@@ -37,7 +37,7 @@ renderError = ({ errorMessage, errorMessageProps, themeMode: elementMode, }) =>
       </Horizontal>);
 }, views = {}, }) => {
     const finalPreviewUrl = externalPreviewUrl || previewUrl;
-    return (<Center onClick={handleClick} cursor="pointer" border="1px solid rgba(0,0,0,0.1)" borderRadius={8} padding={16} flexDirection="column" overflow="hidden" position="relative" height={selectedFile && progress === 100 ? '200px' : 'auto'} {...containerProps} {...views?.container}>
+    return (<Center onClick={handleClick} cursor="pointer" border="1px solid color-black-100" borderRadius={8} padding={16} flexDirection="column" overflow="hidden" position="relative" height={selectedFile && progress === 100 ? '200px' : 'auto'} {...containerProps} {...views?.container}>
       
       {progress === 100 &&
             fileType === 'image' &&

package/dist/native/design-system/DesignSystemProvider.d.ts

@@ -1,10 +1,17 @@
 import React, { ReactNode } from 'react';
 import { DesignSystemConfigId } from './configs';
-import { DesignSystemComponentConfig, DesignSystemComponentName, DesignSystemConfig, DesignSystemContextValue } from './types';
+import { DesignSystemAppearance, DesignSystemComponentConfig, DesignSystemComponentName, DesignSystemConfig, DesignSystemContextValue } from './types';
 export interface DesignSystemProviderProps {
     children: ReactNode;
     config?: DesignSystemConfig;
     configId?: DesignSystemConfigId | string;
+    /**
+     * Explicitly pin the appearance for this subtree (light/dark). When omitted,
+     * the provider follows the **global** theme mode (so a light/dark toggle
+     * flips the design system), falling back to the config's `defaultAppearance`
+     * only when there is no surrounding ThemeProvider.
+     */
+    mode?: DesignSystemAppearance;
 }
 export declare const DesignSystemProvider: React.FC<DesignSystemProviderProps>;
 export declare const useDesignSystem: () => DesignSystemContextValue;

package/dist/native/design-system/DesignSystemProvider.js

@@ -1,14 +1,20 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import { ThemeProvider } from 'app-studio';
+import { ThemeProvider, useTheme, } from 'app-studio';
 import { defaultDesignSystemConfig, designSystemConfigs, } from './configs';
 import { getDesignSystemComponentProps, mergeDesignSystemComponentProps, } from './utils';
 const DesignSystemContext = createContext({
     isEnabled: false,
 });
-export const DesignSystemProvider = ({ children, config, configId, }) => {
+export const DesignSystemProvider = ({ children, config, configId, mode, }) => {
     const resolvedConfig = config ||
         (configId ? designSystemConfigs[configId] : null) ||
         defaultDesignSystemConfig;
+    // Follow the active global theme mode so a light/dark toggle actually flips
+    // the design system. An explicit `mode` prop pins the subtree; otherwise we
+    // inherit the surrounding ThemeProvider's mode and fall back to the config's
+    // declared default appearance when no provider is present.
+    const { themeMode } = useTheme();
+    const effectiveMode = mode ?? themeMode ?? resolvedConfig.metadata.defaultAppearance;
     const value = useMemo(() => ({
         config: resolvedConfig,
         configId: resolvedConfig.metadata.id,
@@ -20,8 +26,8 @@ export const DesignSystemProvider = ({ children, config, configId, }) => {
     // anywhere a component uses them. `transparentWrapper` is auto-inferred
     // (nested under another ThemeProvider) and keeps the page layout intact.
     return (<DesignSystemContext.Provider value={value}>
-      <ThemeProvider theme={resolvedConfig.theme} mode={resolvedConfig.metadata.defaultAppearance} transparentWrapper>
-        <div data-design-system={resolvedConfig.metadata.id} data-appearance={resolvedConfig.metadata.defaultAppearance} style={{ display: 'contents' }}>
+      <ThemeProvider theme={resolvedConfig.theme} mode={effectiveMode} transparentWrapper>
+        <div data-design-system={resolvedConfig.metadata.id} data-appearance={effectiveMode} style={{ display: 'contents' }}>
           {children}
         </div>
       </ThemeProvider>

package/dist/native/design-system/DesignSystemProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesignSystemProvider.js","sourceRoot":"","sources":["../../../src/design-system/DesignSystemProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAgC,MAAM,YAAY,CAAC;AACzE,OAAO,EACL,yBAAyB,EACzB,mBAAmB,GAEpB,MAAM,WAAW,CAAC;AAOnB,OAAO,EACL,6BAA6B,EAC7B,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAEjB,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,SAAS,EAAE,KAAK;CACjB,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,cAAc,GAClB,MAAM;QACN,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,QAAgC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzE,yBAAyB,CAAC;IAE5B,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,cAAc,CAAC,QAAQ,CAAC,EAAE;QACpC,SAAS,EAAE,IAAI;KAChB,CAAC,EACF,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,oEAAoE;IACpE,0EAA0E;IAC1E,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,OAAO,CACL,CAAC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACzC;MAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,cAAc,CAAC,KAAgC,CAAC,CACvD,IAAI,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAChD,kBAAkB,CAElB;QAAA,CAAC,GAAG,CACF,kBAAkB,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC/C,eAAe,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAC3D,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAE/B;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,aAAwC,EACX,EAAE;IAC/B,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,OAAO,6BAA6B,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAGjD,aAAwC,EACxC,KAAQ,EACL,EAAE;IACL,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,OAAO,+BAA+B,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC,CAAC"}
+{"version":3,"file":"DesignSystemProvider.js","sourceRoot":"","sources":["../../../src/design-system/DesignSystemProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EACL,aAAa,EACb,QAAQ,GAET,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,yBAAyB,EACzB,mBAAmB,GAEpB,MAAM,WAAW,CAAC;AAQnB,OAAO,EACL,6BAA6B,EAC7B,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAEjB,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,SAAS,EAAE,KAAK;CACjB,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EACxE,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,GACL,EAAE,EAAE;IACH,MAAM,cAAc,GAClB,MAAM;QACN,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,QAAgC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzE,yBAAyB,CAAC;IAE5B,4EAA4E;IAC5E,4EAA4E;IAC5E,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GACjB,IAAI,IAAI,SAAS,IAAI,cAAc,CAAC,QAAQ,CAAC,iBAAiB,CAAC;IAEjE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,cAAc,CAAC,QAAQ,CAAC,EAAE;QACpC,SAAS,EAAE,IAAI;KAChB,CAAC,EACF,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,oEAAoE;IACpE,0EAA0E;IAC1E,yEAAyE;IACzE,wEAAwE;IACxE,yEAAyE;IACzE,OAAO,CACL,CAAC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACzC;MAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,cAAc,CAAC,KAAgC,CAAC,CACvD,IAAI,CAAC,CAAC,aAAa,CAAC,CACpB,kBAAkB,CAElB;QAAA,CAAC,GAAG,CACF,kBAAkB,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC/C,eAAe,CAAC,CAAC,aAAa,CAAC,CAC/B,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAE/B;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,aAAwC,EACX,EAAE;IAC/B,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,OAAO,6BAA6B,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAAG,CAGjD,aAAwC,EACxC,KAAQ,EACL,EAAE;IACL,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,OAAO,+BAA+B,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC,CAAC"}

package/dist/native/design-system/configs/airbnb.json

@@ -15,11 +15,11 @@
         "success": "#428bff",
         "warning": "#460479",
         "error": "#c13515",
-        "canvas": "#ffffff",
-        "surface": "#f7f7f7",
-        "text": "#222222",
-        "muted": "#6a6a6a",
-        "border": "#dddddd",
+        "canvas": "color-white",
+        "surface": "color-gray-50",
+        "text": "color-black",
+        "muted": "color-gray-500",
+        "border": "color-gray-200",
         "onPrimary": "#ffffff"
     },
     "tokens": {
@@ -223,7 +223,7 @@
             "size": "md",
             "shape": "rounded",
             "color": "theme-primary",
-            "textColor": "theme-canvas",
+            "textColor": "theme-onPrimary",
             "views": {
                 "container": {
                     "borderRadius": 9999,
@@ -272,26 +272,26 @@
             "shape": "rounded",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": 16,
                     "borderWidth": "1px",
                     "borderStyle": "solid",
                     "boxShadow": "rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0"
                 },
                 "header": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
                     "fontWeight": 600,
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "content": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "footer": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 }
             }
         },
@@ -301,16 +301,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": 10,
                     "borderWidth": "1px",
                     "borderStyle": "solid",
                     "boxShadow": "rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0"
                 },
                 "field": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
                     "fontStyle": "normal",
                     "letterSpacing": "-0.01em"
@@ -331,16 +331,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": 10,
                     "borderWidth": "1px",
                     "borderStyle": "solid",
                     "boxShadow": "rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0"
                 },
                 "field": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
                     "fontStyle": "normal",
                     "letterSpacing": "-0.01em"
@@ -361,16 +361,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": 10,
                     "borderWidth": "1px",
                     "borderStyle": "solid",
                     "boxShadow": "rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0"
                 },
                 "field": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "label": {
@@ -391,8 +391,8 @@
             "size": "md",
             "views": {
                 "checkbox": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white",
                     "_checked": {
                         "backgroundColor": "theme-primary",
                         "borderColor": "theme-primary"
@@ -407,7 +407,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": 4
@@ -418,8 +418,8 @@
             "size": "md",
             "views": {
                 "radio": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas"
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white"
                 },
                 "dot": {
                     "backgroundColor": "theme-primary"
@@ -432,7 +432,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": "50%"
@@ -443,10 +443,10 @@
             "size": "sm",
             "views": {
                 "slider": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "circle": {
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
@@ -464,7 +464,7 @@
             "backgroundColor": "theme-primary",
             "views": {
                 "track": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "progress": {
                     "backgroundColor": "theme-primary"
@@ -474,13 +474,13 @@
                 },
                 "thumb": {
                     "borderColor": "theme-primary",
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
-                    "color": "theme-secondary"
+                    "color": "color-black"
                 },
                 "valueLabel": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
@@ -488,10 +488,10 @@
             "variant": "underline",
             "views": {
                 "headerTabs": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "tab": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontWeight": 700,
                     "letterSpacing": "-0.01em",
                     "textTransform": "none",
@@ -509,7 +509,7 @@
                     "color": "theme-primary"
                 },
                 "content": {
-                    "color": "theme-secondary"
+                    "color": "color-black"
                 },
                 "container": {
                     "borderRadius": "8px"
@@ -519,35 +519,35 @@
         "accordion": {
             "views": {
                 "container": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-surface",
-                    "color": "theme-secondary",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-gray-50",
+                    "color": "color-black",
                     "borderRadius": "14px"
                 },
                 "trigger": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "content": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "table": {
             "views": {
                 "table": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-secondary",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 16
                 },
                 "thead": {
-                    "backgroundColor": "theme-surface",
-                    "color": "theme-secondary"
+                    "backgroundColor": "color-gray-50",
+                    "color": "color-black"
                 },
                 "th": {
-                    "color": "theme-muted",
-                    "borderColor": "theme-border",
+                    "color": "color-gray-500",
+                    "borderColor": "color-gray-200",
                     "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
                     "fontWeight": 700,
                     "letterSpacing": "-0.01em",
@@ -555,16 +555,16 @@
                     "fontStyle": "normal"
                 },
                 "tr": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "td": {
-                    "color": "theme-secondary",
-                    "borderColor": "theme-border",
+                    "color": "color-black",
+                    "borderColor": "color-gray-200",
                     "letterSpacing": "-0.01em",
                     "fontStyle": "normal"
                 },
                 "caption": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontStyle": "italic",
                     "letterSpacing": "-0.01em"
                 }
@@ -573,13 +573,13 @@
         "avatar": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": "50%"
                 },
                 "fallback": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 }
             }
@@ -587,12 +587,12 @@
         "alert": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 16
                 },
                 "title": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif",
                     "fontWeight": 700,
                     "letterSpacing": "-0.01em",
@@ -600,7 +600,7 @@
                     "fontStyle": "normal"
                 },
                 "description": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "icon": {
@@ -614,25 +614,25 @@
                     "backgroundColor": "theme-success"
                 },
                 "label": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 }
             }
         },
         "progress": {
             "color": "theme-primary",
-            "backgroundColor": "theme-border",
+            "backgroundColor": "color-gray-200",
             "radius": "14px",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-border",
+                    "backgroundColor": "color-gray-200",
                     "borderRadius": "9999px"
                 },
                 "bar": {
                     "backgroundColor": "theme-primary"
                 },
                 "text": {
-                    "color": "theme-secondary"
+                    "color": "color-black"
                 }
             }
         },
@@ -640,13 +640,13 @@
             "color": "theme-primary"
         },
         "separator": {
-            "color": "theme-border",
+            "color": "color-gray-200",
             "views": {
                 "container": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "label": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 }
             }
@@ -654,13 +654,13 @@
         "navigation": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": "14px"
                 },
                 "item": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "activeItem": {
                     "color": "theme-primary",
@@ -671,37 +671,37 @@
         "hero": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "eyebrow": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "title": {
-                    "color": "theme-secondary",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "description": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "page": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-secondary",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
                     "fontFamily": "'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
                 },
                 "section": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border"
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200"
                 },
                 "surface": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-secondary"
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black"
                 }
             }
         }