@app-studio/components 0.10.17

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

@@ -0,0 +1,737 @@
+{
+    "metadata": {
+        "id": "vercel",
+        "label": "Vercel",
+        "sourcePath": "design.md/html/vercel.html",
+        "sourceTitle": "Design System Preview: Vercel (Light)",
+        "defaultAppearance": "light",
+        "googleFontLinks": [
+            "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"
+        ]
+    },
+    "theme": {
+        "primary": "#000000",
+        "secondary": "#0072f5",
+        "success": "#0a72ef",
+        "warning": "#de1d8d",
+        "error": "#ff5b4f",
+        "canvas": "#ffffff",
+        "surface": "#fafafa",
+        "text": "#000000",
+        "muted": "#666666",
+        "border": "#ebebeb",
+        "onPrimary": "#ffffff"
+    },
+    "tokens": {
+        "rawCssVars": {
+            "black": "#171717",
+            "white": "#ffffff",
+            "gray-50": "#fafafa",
+            "gray-100": "#ebebeb",
+            "gray-400": "#808080",
+            "gray-500": "#666666",
+            "gray-600": "#4d4d4d",
+            "link-blue": "#0072f5",
+            "focus-blue": "hsl(212,100%,48%)",
+            "ship-red": "#ff5b4f",
+            "preview-pink": "#de1d8d",
+            "develop-blue": "#0a72ef",
+            "console-blue": "#0070f3",
+            "console-purple": "#7928ca",
+            "console-pink": "#eb367f",
+            "badge-bg": "#ebf5ff",
+            "badge-text": "#0068d6",
+            "shadow-ring": "rgba(0,0,0,0.08) 0px 0px 0px 1px",
+            "shadow-ring-light": "rgb(235,235,235) 0px 0px 0px 1px",
+            "shadow-subtle": "rgba(0,0,0,0.04) 0px 2px 2px 0px",
+            "shadow-card": "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgb(250,250,250) 0px 0px 0px 1px",
+            "shadow-card-full": "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgba(0,0,0,0.04) 0px 8px 8px -8px, rgb(250,250,250) 0px 0px 0px 1px",
+            "font-sans": "'Geist', system-ui, -apple-system, Arial, sans-serif",
+            "font-mono": "'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace"
+        },
+        "colors": [
+            {
+                "name": "black",
+                "value": "#171717",
+                "role": "black"
+            },
+            {
+                "name": "white",
+                "value": "#ffffff",
+                "role": "white"
+            },
+            {
+                "name": "gray-50",
+                "value": "#fafafa",
+                "role": "gray 50"
+            },
+            {
+                "name": "gray-100",
+                "value": "#ebebeb",
+                "role": "gray 100"
+            },
+            {
+                "name": "gray-400",
+                "value": "#808080",
+                "role": "gray 400"
+            },
+            {
+                "name": "gray-500",
+                "value": "#666666",
+                "role": "gray 500"
+            },
+            {
+                "name": "gray-600",
+                "value": "#4d4d4d",
+                "role": "gray 600"
+            },
+            {
+                "name": "link-blue",
+                "value": "#0072f5",
+                "role": "link blue"
+            },
+            {
+                "name": "focus-blue",
+                "value": "hsl(212,100%,48%)",
+                "role": "focus blue"
+            },
+            {
+                "name": "ship-red",
+                "value": "#ff5b4f",
+                "role": "ship red"
+            },
+            {
+                "name": "preview-pink",
+                "value": "#de1d8d",
+                "role": "preview pink"
+            },
+            {
+                "name": "develop-blue",
+                "value": "#0a72ef",
+                "role": "develop blue"
+            },
+            {
+                "name": "console-blue",
+                "value": "#0070f3",
+                "role": "console blue"
+            },
+            {
+                "name": "console-purple",
+                "value": "#7928ca",
+                "role": "console purple"
+            },
+            {
+                "name": "console-pink",
+                "value": "#eb367f",
+                "role": "console pink"
+            },
+            {
+                "name": "badge-bg",
+                "value": "#ebf5ff",
+                "role": "badge bg"
+            },
+            {
+                "name": "badge-text",
+                "value": "#0068d6",
+                "role": "badge text"
+            },
+            {
+                "name": "shadow-ring",
+                "value": "rgba(0,0,0,0.08) 0px 0px 0px 1px",
+                "role": "shadow ring"
+            },
+            {
+                "name": "shadow-ring-light",
+                "value": "rgb(235,235,235) 0px 0px 0px 1px",
+                "role": "shadow ring light"
+            },
+            {
+                "name": "shadow-subtle",
+                "value": "rgba(0,0,0,0.04) 0px 2px 2px 0px",
+                "role": "shadow subtle"
+            },
+            {
+                "name": "shadow-card",
+                "value": "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgb(250,250,250) 0px 0px 0px 1px",
+                "role": "shadow card"
+            },
+            {
+                "name": "shadow-card-full",
+                "value": "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgba(0,0,0,0.04) 0px 8px 8px -8px, rgb(250,250,250) 0px 0px 0px 1px",
+                "role": "shadow card full"
+            }
+        ],
+        "typography": {
+            "fontFamily": "var(--font-sans)",
+            "monoFamily": "'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace",
+            "fontSizes": [
+                "16px",
+                "14px",
+                "48px",
+                "20px",
+                "12px",
+                "32px",
+                "13px",
+                "11px",
+                "10px",
+                "36px"
+            ],
+            "fontWeights": [
+                "400",
+                "600",
+                "500",
+                "700"
+            ],
+            "lineHeights": [
+                "1.50",
+                "1.00",
+                "1.80",
+                "1.25",
+                "1.2",
+                "1.35",
+                "1.4"
+            ]
+        },
+        "spacing": [
+            "2px",
+            "4px",
+            "8px",
+            "10px",
+            "12px",
+            "14px",
+            "16px",
+            "20px",
+            "24px",
+            "28px",
+            "32px",
+            "48px",
+            "64px",
+            "72px",
+            "80px",
+            "96px"
+        ],
+        "radii": [
+            "6px",
+            "8px",
+            "9999px",
+            "3px"
+        ],
+        "shadows": [
+            "rgba(0,0,0,0.08) 0px 0px 0px 1px",
+            "rgb(235,235,235) 0px 0px 0px 1px",
+            "rgba(0,0,0,0.04) 0px 2px 2px 0px",
+            "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgb(250,250,250) 0px 0px 0px 1px",
+            "rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgba(0,0,0,0.04) 0px 8px 8px -8px, rgb(250,250,250) 0px 0px 0px 1px",
+            "var(--shadow-ring)",
+            "var(--shadow-ring-light)",
+            "var(--shadow-card)",
+            "var(--shadow-card-full)",
+            "0 0 0 2px var(--focus-blue)",
+            "0 0 0 2px var(--ship-red)"
+        ]
+    },
+    "components": {
+        "button": {
+            "variant": "filled",
+            "size": "md",
+            "shape": "square",
+            "color": "theme-primary",
+            "textColor": "theme-canvas",
+            "views": {
+                "container": {
+                    "borderRadius": 4,
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "borderColor": "theme-primary",
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal",
+                    "backgroundColor": null
+                },
+                "content": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "badge": {
+            "variant": "filled",
+            "size": "sm",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-secondary",
+                    "color": "theme-canvas",
+                    "borderColor": "theme-secondary",
+                    "borderRadius": 4,
+                    "fontFamily": "var(--font-sans)",
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontWeight": 700,
+                    "fontStyle": "normal"
+                },
+                "text": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 600
+                }
+            }
+        },
+        "card": {
+            "variant": "outlined",
+            "size": "md",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": 4,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(0,0,0,0.08) 0px 0px 0px 1px"
+                },
+                "header": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 600,
+                    "borderColor": "theme-border"
+                },
+                "content": {
+                    "color": "theme-muted",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "footer": {
+                    "borderColor": "theme-border"
+                }
+            }
+        },
+        "input": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": 2,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(0,0,0,0.08) 0px 0px 0px 1px"
+                },
+                "field": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.04em"
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "textarea": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": 2,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(0,0,0,0.08) 0px 0px 0px 1px"
+                },
+                "field": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.04em"
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "select": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": 2,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(0,0,0,0.08) 0px 0px 0px 1px"
+                },
+                "field": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {},
+                "text": {
+                    "letterSpacing": "-0.04em",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "checkbox": {
+            "size": "md",
+            "views": {
+                "checkbox": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas",
+                    "_checked": {
+                        "backgroundColor": "theme-primary",
+                        "borderColor": "theme-primary"
+                    },
+                    "borderRadius": 0
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "infoText": {
+                    "color": "theme-muted"
+                },
+                "container": {
+                    "borderRadius": 0
+                }
+            }
+        },
+        "radio": {
+            "size": "md",
+            "views": {
+                "radio": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas"
+                },
+                "dot": {
+                    "backgroundColor": "theme-primary"
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "infoText": {
+                    "color": "theme-muted"
+                },
+                "container": {
+                    "borderRadius": "50%"
+                }
+            }
+        },
+        "switch": {
+            "size": "sm",
+            "views": {
+                "slider": {
+                    "backgroundColor": "theme-border"
+                },
+                "circle": {
+                    "backgroundColor": "theme-canvas"
+                },
+                "label": {
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "container": {
+                    "borderRadius": "9999px"
+                }
+            }
+        },
+        "slider": {
+            "backgroundColor": "theme-primary",
+            "views": {
+                "track": {
+                    "backgroundColor": "theme-border"
+                },
+                "progress": {
+                    "backgroundColor": "theme-primary"
+                },
+                "filledTrack": {
+                    "backgroundColor": "theme-primary"
+                },
+                "thumb": {
+                    "borderColor": "theme-primary",
+                    "backgroundColor": "theme-canvas"
+                },
+                "label": {
+                    "color": "theme-primary"
+                },
+                "valueLabel": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "tabs": {
+            "variant": "underline",
+            "views": {
+                "headerTabs": {
+                    "borderColor": "theme-border"
+                },
+                "tab": {
+                    "color": "theme-muted",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "activeTab": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary",
+                    "backgroundColor": "transparent"
+                },
+                "title": {
+                    "fontFamily": "var(--font-sans)"
+                },
+                "activeText": {
+                    "color": "theme-primary"
+                },
+                "content": {
+                    "color": "theme-primary"
+                },
+                "container": {
+                    "borderRadius": "6px"
+                }
+            }
+        },
+        "accordion": {
+            "views": {
+                "container": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-surface",
+                    "color": "theme-primary",
+                    "borderRadius": "6px"
+                },
+                "trigger": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "content": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "table": {
+            "views": {
+                "table": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-primary",
+                    "borderColor": "theme-border",
+                    "borderRadius": 4
+                },
+                "thead": {
+                    "backgroundColor": "theme-surface",
+                    "color": "theme-primary"
+                },
+                "th": {
+                    "color": "theme-muted",
+                    "borderColor": "theme-border",
+                    "fontFamily": "'Geist Mono', ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "tr": {
+                    "borderColor": "theme-border"
+                },
+                "td": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-border",
+                    "letterSpacing": "-0.04em",
+                    "fontStyle": "normal"
+                },
+                "caption": {
+                    "color": "theme-muted",
+                    "fontStyle": "italic",
+                    "letterSpacing": "-0.04em"
+                }
+            }
+        },
+        "avatar": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": "50%"
+                },
+                "fallback": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                }
+            }
+        },
+        "alert": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "borderRadius": 4
+                },
+                "title": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.04em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "description": {
+                    "color": "theme-muted",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "icon": {
+                    "color": "theme-primary"
+                }
+            }
+        },
+        "status": {
+            "views": {
+                "indicator": {
+                    "backgroundColor": "theme-success"
+                },
+                "label": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                }
+            }
+        },
+        "progress": {
+            "color": "theme-primary",
+            "backgroundColor": "theme-border",
+            "radius": "6px",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-border",
+                    "borderRadius": "9999px"
+                },
+                "bar": {
+                    "backgroundColor": "theme-primary"
+                },
+                "text": {
+                    "color": "theme-primary"
+                }
+            }
+        },
+        "loader": {
+            "color": "theme-primary"
+        },
+        "separator": {
+            "color": "theme-border",
+            "views": {
+                "container": {
+                    "borderColor": "theme-border"
+                },
+                "label": {
+                    "color": "theme-muted",
+                    "fontFamily": "var(--font-sans)"
+                }
+            }
+        },
+        "navigation": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary",
+                    "borderRadius": "6px"
+                },
+                "item": {
+                    "color": "theme-muted"
+                },
+                "activeItem": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary"
+                }
+            }
+        },
+        "hero": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "eyebrow": {
+                    "color": "theme-muted"
+                },
+                "title": {
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "description": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "page": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-primary",
+                    "fontFamily": "var(--font-sans)"
+                },
+                "section": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border"
+                },
+                "surface": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-primary"
+                }
+            }
+        }
+    },
+    "personality": {
+        "cornerStyle": "sharp",
+        "typeWeight": "bold",
+        "typeCase": "normal",
+        "typeStyle": "normal",
+        "letterSpacing": "-0.04em",
+        "accentTreatment": "flat",
+        "signatureMotif": "▲",
+        "density": "comfortable",
+        "surfaceTone": "mono",
+        "cardRadius": 4,
+        "pillRadius": 4,
+        "badgeRadius": 4,
+        "voice": "deploy-geometric"
+    }
+}