@app-studio/components 0.10.17

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

@@ -0,0 +1,777 @@
+{
+    "metadata": {
+        "id": "stripe",
+        "label": "Stripe",
+        "sourcePath": "design.md/html/stripe.html",
+        "sourceTitle": "Design System Preview: Stripe (Light)",
+        "defaultAppearance": "light",
+        "googleFontLinks": [
+            "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;700&display=swap"
+        ]
+    },
+    "theme": {
+        "primary": "#635BFF",
+        "secondary": "#f96bee",
+        "success": "#15be53",
+        "warning": "#9b6829",
+        "error": "#ea2261",
+        "canvas": "#ffffff",
+        "surface": "#ffffff",
+        "text": "#061b31",
+        "muted": "#64748d",
+        "border": "#e5edf5",
+        "onPrimary": "#ffffff"
+    },
+    "tokens": {
+        "rawCssVars": {
+            "purple": "#533afd",
+            "purple-hover": "#4434d4",
+            "purple-deep": "#2e2b8c",
+            "purple-light": "#b9b9f9",
+            "purple-mid": "#665efd",
+            "navy": "#061b31",
+            "dark-navy": "#0d253d",
+            "brand-dark": "#1c1e54",
+            "white": "#ffffff",
+            "ruby": "#ea2261",
+            "magenta": "#f96bee",
+            "magenta-light": "#ffd7ef",
+            "success": "#15be53",
+            "success-text": "#108c3d",
+            "lemon": "#9b6829",
+            "slate": "#64748d",
+            "dark-slate": "#273951",
+            "border": "#e5edf5",
+            "border-purple": "#b9b9f9",
+            "border-soft": "#d6d9fc",
+            "shadow-blue": "rgba(50,50,93,0.25)",
+            "shadow-dark-blue": "rgba(3,3,39,0.25)",
+            "shadow-black": "rgba(0,0,0,0.1)",
+            "shadow-ambient": "rgba(23,23,23,0.08)",
+            "shadow-soft": "rgba(23,23,23,0.06)",
+            "shadow-card": "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px",
+            "shadow-ambient-card": "rgba(23,23,23,0.08) 0px 15px 35px 0px",
+            "shadow-subtle": "rgba(23,23,23,0.06) 0px 3px 6px 0px",
+            "font-primary": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+            "font-mono": "'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace"
+        },
+        "colors": [
+            {
+                "name": "purple",
+                "value": "#533afd",
+                "role": "purple"
+            },
+            {
+                "name": "purple-hover",
+                "value": "#4434d4",
+                "role": "purple hover"
+            },
+            {
+                "name": "purple-deep",
+                "value": "#2e2b8c",
+                "role": "purple deep"
+            },
+            {
+                "name": "purple-light",
+                "value": "#b9b9f9",
+                "role": "purple light"
+            },
+            {
+                "name": "purple-mid",
+                "value": "#665efd",
+                "role": "purple mid"
+            },
+            {
+                "name": "navy",
+                "value": "#061b31",
+                "role": "navy"
+            },
+            {
+                "name": "dark-navy",
+                "value": "#0d253d",
+                "role": "dark navy"
+            },
+            {
+                "name": "brand-dark",
+                "value": "#1c1e54",
+                "role": "brand dark"
+            },
+            {
+                "name": "white",
+                "value": "#ffffff",
+                "role": "white"
+            },
+            {
+                "name": "ruby",
+                "value": "#ea2261",
+                "role": "ruby"
+            },
+            {
+                "name": "magenta",
+                "value": "#f96bee",
+                "role": "magenta"
+            },
+            {
+                "name": "magenta-light",
+                "value": "#ffd7ef",
+                "role": "magenta light"
+            },
+            {
+                "name": "success",
+                "value": "#15be53",
+                "role": "success"
+            },
+            {
+                "name": "success-text",
+                "value": "#108c3d",
+                "role": "success text"
+            },
+            {
+                "name": "lemon",
+                "value": "#9b6829",
+                "role": "lemon"
+            },
+            {
+                "name": "slate",
+                "value": "#64748d",
+                "role": "slate"
+            },
+            {
+                "name": "dark-slate",
+                "value": "#273951",
+                "role": "dark slate"
+            },
+            {
+                "name": "border",
+                "value": "#e5edf5",
+                "role": "border"
+            },
+            {
+                "name": "border-purple",
+                "value": "#b9b9f9",
+                "role": "border purple"
+            },
+            {
+                "name": "border-soft",
+                "value": "#d6d9fc",
+                "role": "border soft"
+            },
+            {
+                "name": "shadow-blue",
+                "value": "rgba(50,50,93,0.25)",
+                "role": "shadow blue"
+            },
+            {
+                "name": "shadow-dark-blue",
+                "value": "rgba(3,3,39,0.25)",
+                "role": "shadow dark blue"
+            },
+            {
+                "name": "shadow-black",
+                "value": "rgba(0,0,0,0.1)",
+                "role": "shadow black"
+            },
+            {
+                "name": "shadow-ambient",
+                "value": "rgba(23,23,23,0.08)",
+                "role": "shadow ambient"
+            },
+            {
+                "name": "shadow-soft",
+                "value": "rgba(23,23,23,0.06)",
+                "role": "shadow soft"
+            },
+            {
+                "name": "shadow-card",
+                "value": "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px",
+                "role": "shadow card"
+            },
+            {
+                "name": "shadow-ambient-card",
+                "value": "rgba(23,23,23,0.08) 0px 15px 35px 0px",
+                "role": "shadow ambient card"
+            },
+            {
+                "name": "shadow-subtle",
+                "value": "rgba(23,23,23,0.06) 0px 3px 6px 0px",
+                "role": "shadow subtle"
+            }
+        ],
+        "typography": {
+            "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+            "monoFamily": "'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace",
+            "fontSizes": [
+                "16px",
+                "14px",
+                "48px",
+                "18px",
+                "12px",
+                "32px",
+                "13px",
+                "11px",
+                "10px",
+                "22px"
+            ],
+            "fontWeights": [
+                "100 900",
+                "300",
+                "400",
+                "500",
+                "700",
+                "600"
+            ],
+            "lineHeights": [
+                "1.40",
+                "1.15",
+                "1.10",
+                "1.50",
+                "1.2",
+                "1.35",
+                "1.4"
+            ]
+        },
+        "spacing": [
+            "1px",
+            "6px",
+            "8px",
+            "10px",
+            "12px",
+            "14px",
+            "16px",
+            "20px",
+            "24px",
+            "28px",
+            "32px",
+            "48px",
+            "64px",
+            "72px",
+            "80px",
+            "96px"
+        ],
+        "radii": [
+            "0 0 6px 6px",
+            "4px",
+            "6px",
+            "2px",
+            "3px"
+        ],
+        "shadows": [
+            "rgba(50,50,93,0.25)",
+            "rgba(3,3,39,0.25)",
+            "rgba(0,0,0,0.1)",
+            "rgba(23,23,23,0.08)",
+            "rgba(23,23,23,0.06)",
+            "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px",
+            "rgba(23,23,23,0.08) 0px 15px 35px 0px",
+            "rgba(23,23,23,0.06) 0px 3px 6px 0px",
+            "var(--shadow-subtle)",
+            "var(--shadow-card)",
+            "0 0 0 1px theme-primary",
+            "0 0 0 1px var(--ruby)"
+        ]
+    },
+    "components": {
+        "button": {
+            "variant": "filled",
+            "size": "md",
+            "shape": "rounded",
+            "color": "theme-primary",
+            "textColor": "theme-canvas",
+            "views": {
+                "container": {
+                    "borderRadius": 9999,
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "borderColor": "theme-primary",
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal",
+                    "backgroundColor": null
+                },
+                "content": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "badge": {
+            "variant": "filled",
+            "size": "sm",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-secondary",
+                    "color": "theme-canvas",
+                    "borderColor": "theme-secondary",
+                    "borderRadius": 6,
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontWeight": 700,
+                    "fontStyle": "normal"
+                },
+                "text": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 600
+                }
+            }
+        },
+        "card": {
+            "variant": "outlined",
+            "size": "md",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 12,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(23,23,23,0.06) 0px 3px 6px 0px"
+                },
+                "header": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 600,
+                    "borderColor": "theme-border"
+                },
+                "content": {
+                    "color": "theme-muted",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "footer": {
+                    "borderColor": "theme-border"
+                }
+            }
+        },
+        "input": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 10,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "0 0 0 1px theme-primary"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.022em"
+                },
+                "label": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "textarea": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 10,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "0 0 0 1px theme-primary"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.022em"
+                },
+                "label": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "select": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 10,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "0 0 0 1px theme-primary"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "label": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {},
+                "text": {
+                    "letterSpacing": "-0.022em",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "checkbox": {
+            "size": "md",
+            "views": {
+                "checkbox": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas",
+                    "_checked": {
+                        "backgroundColor": "theme-primary",
+                        "borderColor": "theme-primary"
+                    },
+                    "borderRadius": 4
+                },
+                "label": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "infoText": {
+                    "color": "theme-muted"
+                },
+                "container": {
+                    "borderRadius": 4
+                }
+            }
+        },
+        "radio": {
+            "size": "md",
+            "views": {
+                "radio": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas"
+                },
+                "dot": {
+                    "backgroundColor": "theme-primary"
+                },
+                "label": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "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": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "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-text"
+                },
+                "valueLabel": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "tabs": {
+            "variant": "underline",
+            "views": {
+                "headerTabs": {
+                    "borderColor": "theme-border"
+                },
+                "tab": {
+                    "color": "theme-muted",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "activeTab": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary",
+                    "backgroundColor": "transparent"
+                },
+                "title": {
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "activeText": {
+                    "color": "theme-primary"
+                },
+                "content": {
+                    "color": "theme-text"
+                },
+                "container": {
+                    "borderRadius": "4px"
+                }
+            }
+        },
+        "accordion": {
+            "views": {
+                "container": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "borderRadius": "6px"
+                },
+                "trigger": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "content": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "table": {
+            "views": {
+                "table": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "borderColor": "theme-border",
+                    "borderRadius": 12
+                },
+                "thead": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text"
+                },
+                "th": {
+                    "color": "theme-muted",
+                    "borderColor": "theme-border",
+                    "fontFamily": "'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "tr": {
+                    "borderColor": "theme-border"
+                },
+                "td": {
+                    "color": "theme-text",
+                    "borderColor": "theme-border",
+                    "letterSpacing": "-0.022em",
+                    "fontStyle": "normal"
+                },
+                "caption": {
+                    "color": "theme-muted",
+                    "fontStyle": "italic",
+                    "letterSpacing": "-0.022em"
+                }
+            }
+        },
+        "avatar": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": "50%"
+                },
+                "fallback": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                }
+            }
+        },
+        "alert": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "borderRadius": 12
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.022em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "description": {
+                    "color": "theme-muted",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "icon": {
+                    "color": "theme-primary"
+                }
+            }
+        },
+        "status": {
+            "views": {
+                "indicator": {
+                    "backgroundColor": "theme-success"
+                },
+                "label": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                }
+            }
+        },
+        "progress": {
+            "color": "theme-primary",
+            "backgroundColor": "theme-border",
+            "radius": "6px",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-border",
+                    "borderRadius": "9999px"
+                },
+                "bar": {
+                    "backgroundColor": "theme-primary"
+                },
+                "text": {
+                    "color": "theme-text"
+                }
+            }
+        },
+        "loader": {
+            "color": "theme-primary"
+        },
+        "separator": {
+            "color": "theme-border",
+            "views": {
+                "container": {
+                    "borderColor": "theme-border"
+                },
+                "label": {
+                    "color": "theme-muted",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                }
+            }
+        },
+        "navigation": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": "6px"
+                },
+                "item": {
+                    "color": "theme-muted"
+                },
+                "activeItem": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary"
+                }
+            }
+        },
+        "hero": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "eyebrow": {
+                    "color": "theme-muted"
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "description": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "page": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "fontFamily": "'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif"
+                },
+                "section": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border"
+                },
+                "surface": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text"
+                }
+            }
+        }
+    },
+    "personality": {
+        "cornerStyle": "soft",
+        "typeWeight": "bold",
+        "typeCase": "normal",
+        "typeStyle": "normal",
+        "letterSpacing": "-0.022em",
+        "accentTreatment": "gradient",
+        "signatureMotif": "↗",
+        "density": "comfortable",
+        "surfaceTone": "glass",
+        "cardRadius": 12,
+        "pillRadius": 9999,
+        "badgeRadius": 6,
+        "voice": "refined-fintech"
+    }
+}