@app-studio/components 0.10.17 → 0.10.19

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

@@ -10,17 +10,17 @@
         ]
     },
     "theme": {
-        "primary": "#000000",
+        "primary": "color-black",
         "secondary": "#0072f5",
         "success": "#0a72ef",
         "warning": "#de1d8d",
         "error": "#ff5b4f",
-        "canvas": "#ffffff",
-        "surface": "#fafafa",
-        "text": "#000000",
-        "muted": "#666666",
-        "border": "#ebebeb",
-        "onPrimary": "#ffffff"
+        "canvas": "color-white",
+        "surface": "color-gray-50",
+        "text": "color-black",
+        "muted": "color-gray-500",
+        "border": "color-gray-200",
+        "onPrimary": "color-white"
     },
     "tokens": {
         "rawCssVars": {
@@ -236,7 +236,7 @@
             "size": "md",
             "shape": "square",
             "color": "theme-primary",
-            "textColor": "theme-canvas",
+            "textColor": "theme-onPrimary",
             "views": {
                 "container": {
                     "borderRadius": 4,
@@ -264,7 +264,7 @@
             "views": {
                 "container": {
                     "backgroundColor": "theme-secondary",
-                    "color": "theme-canvas",
+                    "color": "color-white",
                     "borderColor": "theme-secondary",
                     "borderRadius": 4,
                     "fontFamily": "var(--font-sans)",
@@ -285,8 +285,8 @@
             "shape": "rounded",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 4,
                     "borderWidth": "1px",
@@ -297,14 +297,14 @@
                     "color": "theme-primary",
                     "fontFamily": "var(--font-sans)",
                     "fontWeight": 600,
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "content": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "var(--font-sans)"
                 },
                 "footer": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 }
             }
         },
@@ -314,8 +314,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 2,
                     "borderWidth": "1px",
@@ -344,8 +344,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 2,
                     "borderWidth": "1px",
@@ -374,8 +374,8 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": 2,
                     "borderWidth": "1px",
@@ -404,8 +404,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"
@@ -420,7 +420,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": 0
@@ -431,8 +431,8 @@
             "size": "md",
             "views": {
                 "radio": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas"
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white"
                 },
                 "dot": {
                     "backgroundColor": "theme-primary"
@@ -445,7 +445,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": "50%"
@@ -456,10 +456,10 @@
             "size": "sm",
             "views": {
                 "slider": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "circle": {
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "fontFamily": "var(--font-sans)",
@@ -477,7 +477,7 @@
             "backgroundColor": "theme-primary",
             "views": {
                 "track": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "progress": {
                     "backgroundColor": "theme-primary"
@@ -487,13 +487,13 @@
                 },
                 "thumb": {
                     "borderColor": "theme-primary",
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "color": "theme-primary"
                 },
                 "valueLabel": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
@@ -501,10 +501,10 @@
             "variant": "underline",
             "views": {
                 "headerTabs": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "tab": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontWeight": 700,
                     "letterSpacing": "-0.04em",
                     "textTransform": "none",
@@ -532,8 +532,8 @@
         "accordion": {
             "views": {
                 "container": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-surface",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-gray-50",
                     "color": "theme-primary",
                     "borderRadius": "6px"
                 },
@@ -542,25 +542,25 @@
                     "fontFamily": "var(--font-sans)"
                 },
                 "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": 4
                 },
                 "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": "'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace",
                     "fontWeight": 700,
                     "letterSpacing": "-0.04em",
@@ -568,16 +568,16 @@
                     "fontStyle": "normal"
                 },
                 "tr": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "td": {
                     "color": "theme-primary",
-                    "borderColor": "theme-border",
+                    "borderColor": "color-gray-200",
                     "letterSpacing": "-0.04em",
                     "fontStyle": "normal"
                 },
                 "caption": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontStyle": "italic",
                     "letterSpacing": "-0.04em"
                 }
@@ -586,8 +586,8 @@
         "avatar": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": "50%"
                 },
@@ -600,8 +600,8 @@
         "alert": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 4
                 },
                 "title": {
@@ -613,7 +613,7 @@
                     "fontStyle": "normal"
                 },
                 "description": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "var(--font-sans)"
                 },
                 "icon": {
@@ -634,11 +634,11 @@
         },
         "progress": {
             "color": "theme-primary",
-            "backgroundColor": "theme-border",
+            "backgroundColor": "color-gray-200",
             "radius": "6px",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-border",
+                    "backgroundColor": "color-gray-200",
                     "borderRadius": "9999px"
                 },
                 "bar": {
@@ -653,13 +653,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": "var(--font-sans)"
                 }
             }
@@ -667,13 +667,13 @@
         "navigation": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
                     "color": "theme-primary",
                     "borderRadius": "6px"
                 },
                 "item": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "activeItem": {
                     "color": "theme-primary",
@@ -684,36 +684,36 @@
         "hero": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
+                    "backgroundColor": "color-white",
                     "color": "theme-primary",
                     "fontFamily": "var(--font-sans)"
                 },
                 "eyebrow": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "title": {
                     "color": "theme-primary",
                     "fontFamily": "var(--font-sans)"
                 },
                 "description": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "page": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
+                    "backgroundColor": "color-white",
                     "color": "theme-primary",
                     "fontFamily": "var(--font-sans)"
                 },
                 "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/types.d.ts

@@ -9,17 +9,45 @@ export interface DesignSystemMetadata {
     defaultAppearance: DesignSystemAppearance;
     googleFontLinks?: string[];
 }
+/**
+ * The eleven semantic theme slots. A single config serves **both** light and
+ * dark mode — the dark theme is derived automatically. The *form* of each value
+ * decides whether the slot flips or stays when the theme mode switches:
+ *
+ * - A **raw hex** (`"#2563eb"`) is emitted as `--theme-<slot>: #2563eb` and
+ *   **stays constant** across modes. Use it for brand identity — the colours
+ *   you want to look the same in light and dark.
+ * - A **`color-*` token** (`"color-black"`) is emitted as
+ *   `--theme-<slot>: var(--color-black)` and **flips automatically**:
+ *   `color-black` → black in light / white in dark, `color-white` → black in
+ *   dark, and the `color-gray-*` ramp inverts. Use it for structural neutrals.
+ *
+ * Rule of thumb: **stay → hex (primary, accents); adapt → `color-*` token
+ * (canvas, text, surface, muted, border).** See `docs/design-system/theming.md`
+ * §2.1 for the full mapping.
+ */
 export interface DesignSystemTheme {
+    /** Brand primary (CTAs, links, focus). Constant → use a **hex**. */
     primary: string;
+    /** Brand secondary accent. Constant → use a **hex** (not for body ink). */
     secondary: string;
+    /** Positive state. Constant → use a **hex**. */
     success: string;
+    /** Caution / pending state. Constant → use a **hex**. */
     warning: string;
+    /** Destructive / failure state. Constant → use a **hex**. */
     error: string;
+    /** Page background. Adaptive → use a **`color-*` token** (e.g. `color-white`). */
     canvas: string;
+    /** Card / elevated surface. Adaptive → use a **`color-*` token** (e.g. `color-gray-50`). */
     surface: string;
+    /** Primary ink / body copy. Adaptive → use a **`color-*` token** (e.g. `color-black`). */
     text: string;
+    /** Secondary ink (captions, helper). Adaptive → use a **`color-*` token** (e.g. `color-gray-500`). */
     muted: string;
+    /** Hairlines, dividers, control borders. Adaptive → use a **`color-*` token** (e.g. `color-gray-200`). */
     border: string;
+    /** Ink on top of `primary` (button label). Constant → use a **hex** (usually `#ffffff`). */
     onPrimary: string;
 }
 export interface DesignSystemColorToken {