@app-studio/components 0.10.17 → 0.10.19

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

@@ -15,11 +15,11 @@
         "success": "#0ACF83",
         "warning": "#FFC700",
         "error": "#FF7262",
-        "canvas": "#ffffff",
-        "surface": "#f7f7f5",
-        "text": "#000000",
-        "muted": "#6b7280",
-        "border": "#e6e6e6",
+        "canvas": "color-white",
+        "surface": "color-gray-50",
+        "text": "color-black",
+        "muted": "color-gray-500",
+        "border": "color-gray-200",
         "onPrimary": "#ffffff"
     },
     "tokens": {
@@ -220,7 +220,7 @@
             "size": "md",
             "shape": "rounded",
             "color": "theme-primary",
-            "textColor": "theme-canvas",
+            "textColor": "theme-onPrimary",
             "views": {
                 "container": {
                     "borderRadius": 9999,
@@ -248,7 +248,7 @@
             "views": {
                 "container": {
                     "backgroundColor": "theme-secondary",
-                    "color": "theme-canvas",
+                    "color": "color-white",
                     "borderColor": "theme-secondary",
                     "borderRadius": 4,
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif",
@@ -269,8 +269,8 @@
             "shape": "rounded",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 8,
                     "borderWidth": "1px",
@@ -281,14 +281,14 @@
                     "color": "theme-primary",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif",
                     "fontWeight": 600,
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "content": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "footer": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 }
             }
         },
@@ -298,8 +298,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 10,
                     "borderWidth": "1px",
@@ -328,8 +328,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 10,
                     "borderWidth": "1px",
@@ -358,8 +358,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 10,
                     "borderWidth": "1px",
@@ -388,8 +388,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"
@@ -404,7 +404,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": 4
@@ -415,8 +415,8 @@
             "size": "md",
             "views": {
                 "radio": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas"
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white"
                 },
                 "dot": {
                     "backgroundColor": "theme-primary"
@@ -429,7 +429,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": "50%"
@@ -440,10 +440,10 @@
             "size": "sm",
             "views": {
                 "slider": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "circle": {
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif",
@@ -461,7 +461,7 @@
             "backgroundColor": "theme-primary",
             "views": {
                 "track": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "progress": {
                     "backgroundColor": "theme-primary"
@@ -471,13 +471,13 @@
                 },
                 "thumb": {
                     "borderColor": "theme-primary",
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "color": "theme-primary"
                 },
                 "valueLabel": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
@@ -485,10 +485,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",
@@ -516,8 +516,8 @@
         "accordion": {
             "views": {
                 "container": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-surface",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-gray-50",
                     "color": "theme-primary",
                     "borderRadius": "12px"
                 },
@@ -526,25 +526,25 @@
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "content": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "table": {
             "views": {
                 "table": {
-                    "backgroundColor": "theme-canvas",
+                    "backgroundColor": "color-white",
                     "color": "theme-primary",
-                    "borderColor": "theme-border",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 8
                 },
                 "thead": {
-                    "backgroundColor": "theme-surface",
+                    "backgroundColor": "color-gray-50",
                     "color": "theme-primary"
                 },
                 "th": {
-                    "color": "theme-muted",
-                    "borderColor": "theme-border",
+                    "color": "color-gray-500",
+                    "borderColor": "color-gray-200",
                     "fontFamily": "'JetBrains Mono', 'SF Mono', Menlo, monospace",
                     "fontWeight": 700,
                     "letterSpacing": "-0.01em",
@@ -552,16 +552,16 @@
                     "fontStyle": "normal"
                 },
                 "tr": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "td": {
                     "color": "theme-primary",
-                    "borderColor": "theme-border",
+                    "borderColor": "color-gray-200",
                     "letterSpacing": "-0.01em",
                     "fontStyle": "normal"
                 },
                 "caption": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontStyle": "italic",
                     "letterSpacing": "-0.01em"
                 }
@@ -570,8 +570,8 @@
         "avatar": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": "50%"
                 },
@@ -584,8 +584,8 @@
         "alert": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 8
                 },
                 "title": {
@@ -597,7 +597,7 @@
                     "fontStyle": "normal"
                 },
                 "description": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "icon": {
@@ -618,11 +618,11 @@
         },
         "progress": {
             "color": "theme-primary",
-            "backgroundColor": "theme-border",
+            "backgroundColor": "color-gray-200",
             "radius": "8px",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-border",
+                    "backgroundColor": "color-gray-200",
                     "borderRadius": "9999px"
                 },
                 "bar": {
@@ -637,13 +637,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', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 }
             }
@@ -651,13 +651,13 @@
         "navigation": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": "12px"
                 },
                 "item": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "activeItem": {
                     "color": "theme-primary",
@@ -668,36 +668,36 @@
         "hero": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
+                    "backgroundColor": "color-white",
                     "color": "theme-primary",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "eyebrow": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "title": {
                     "color": "theme-primary",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "description": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "page": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
+                    "backgroundColor": "color-white",
                     "color": "theme-primary",
                     "fontFamily": "'Inter', 'SF Pro Display', system-ui, -apple-system, Helvetica, sans-serif"
                 },
                 "section": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border"
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200"
                 },
                 "surface": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary"
                 }
             }

package/dist/native/design-system/configs/index.d.ts

@@ -18,4 +18,10 @@ export declare const designSystemConfigs: {
 };
 export type DesignSystemConfigId = keyof typeof designSystemConfigs;
 export declare const designSystemConfigList: DesignSystemConfig[];
+/**
+ * Brand-neutral, light/dark-adaptive fallback used by `DesignSystemProvider`
+ * when no `config`/`configId` is supplied. Its neutral slots reference
+ * auto-flipping `color-*` tokens, so it renders correctly in both modes.
+ * See `docs/design-system/theming.md` §2.1.
+ */
 export declare const defaultDesignSystemConfig: DesignSystemConfig;

package/dist/native/design-system/configs/index.js

@@ -1,3 +1,4 @@
+import defaultConfig from './default.json';
 import airbnb from './airbnb.json';
 import apple from './apple.json';
 import coinbase from './coinbase.json';
@@ -31,5 +32,11 @@ export const designSystemConfigs = {
     vercel: vercel,
 };
 export const designSystemConfigList = Object.values(designSystemConfigs);
-export const defaultDesignSystemConfig = designSystemConfigs.airbnb;
+/**
+ * Brand-neutral, light/dark-adaptive fallback used by `DesignSystemProvider`
+ * when no `config`/`configId` is supplied. Its neutral slots reference
+ * auto-flipping `color-*` tokens, so it renders correctly in both modes.
+ * See `docs/design-system/theming.md` §2.1.
+ */
+export const defaultDesignSystemConfig = defaultConfig;
 //# sourceMappingURL=index.js.map

package/dist/native/design-system/configs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/design-system/configs/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,eAAe,CAAC;AAGnC,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,MAA4B;IACpC,KAAK,EAAE,KAA2B;IAClC,QAAQ,EAAE,QAA8B;IACxC,KAAK,EAAE,KAA2B;IAClC,MAAM,EAAE,MAA4B;IACpC,IAAI,EAAE,IAA0B;IAChC,MAAM,EAAE,MAA4B;IACpC,OAAO,EAAE,OAA6B;IACtC,OAAO,EAAE,OAA6B;IACtC,MAAM,EAAE,MAA4B;IACpC,OAAO,EAAE,OAA6B;IACtC,MAAM,EAAE,MAA4B;IACpC,KAAK,EAAE,KAA2B;IAClC,IAAI,EAAE,IAA0B;IAChC,MAAM,EAAE,MAA4B;CACrC,CAAC;AAIF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;AAEzE,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/design-system/configs/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,eAAe,CAAC;AAGnC,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,MAA4B;IACpC,KAAK,EAAE,KAA2B;IAClC,QAAQ,EAAE,QAA8B;IACxC,KAAK,EAAE,KAA2B;IAClC,MAAM,EAAE,MAA4B;IACpC,IAAI,EAAE,IAA0B;IAChC,MAAM,EAAE,MAA4B;IACpC,OAAO,EAAE,OAA6B;IACtC,OAAO,EAAE,OAA6B;IACtC,MAAM,EAAE,MAA4B;IACpC,OAAO,EAAE,OAA6B;IACtC,MAAM,EAAE,MAA4B;IACpC,KAAK,EAAE,KAA2B;IAClC,IAAI,EAAE,IAA0B;IAChC,MAAM,EAAE,MAA4B;CACrC,CAAC;AAIF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAmC,CAAC"}