@app-studio/components 0.10.17

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

@@ -0,0 +1,807 @@
+{
+    "metadata": {
+        "id": "revolut",
+        "label": "Revolut",
+        "sourcePath": "design.md/html/revolut.html",
+        "sourceTitle": "Design System Inspiration of Revolut",
+        "defaultAppearance": "light",
+        "googleFontLinks": [
+            "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+        ]
+    },
+    "theme": {
+        "primary": "#1361F0",
+        "secondary": "#101D31",
+        "success": "#16a34a",
+        "warning": "#d97706",
+        "error": "#e61e49",
+        "canvas": "#ffffff",
+        "surface": "#f4f4f4",
+        "text": "#191c1f",
+        "muted": "#505a63",
+        "border": "#e5e7eb",
+        "onPrimary": "#ffffff"
+    },
+    "tokens": {
+        "rawCssVars": {
+            "primary": "#494fdf",
+            "primary-bright": "#4f55f1",
+            "primary-deep": "#3a40c4",
+            "on-primary": "#ffffff",
+            "ink": "#191c1f",
+            "body": "#1f2226",
+            "charcoal": "#3a3d40",
+            "mute": "#505a63",
+            "ash": "#5c5e60",
+            "stone": "#8d969e",
+            "faint": "#c9c9cd",
+            "on-dark": "#ffffff",
+            "on-dark-mute": "rgba(255,255,255,0.72)",
+            "canvas-light": "#ffffff",
+            "canvas-dark": "#000000",
+            "surface-soft": "#f4f4f4",
+            "surface-card": "#ffffff",
+            "surface-deep": "#0a0a0a",
+            "surface-elevated": "#16181a",
+            "hairline-light": "#e2e2e7",
+            "hairline-dark": "rgba(255,255,255,0.12)",
+            "hairline-strong": "#191c1f",
+            "divider-soft": "rgba(255,255,255,0.06)",
+            "teal": "#00a87e",
+            "light-blue": "#007bc2",
+            "blue-link": "#376cd5",
+            "light-green": "#428619",
+            "green-text": "#006400",
+            "yellow": "#b09000",
+            "warning": "#ec7e00",
+            "pink": "#e61e49",
+            "danger": "#e23b4a",
+            "deep-red": "#8b0000",
+            "brown": "#936d62",
+            "font-display": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+            "font-ui": "'Inter', system-ui, sans-serif"
+        },
+        "colors": [
+            {
+                "name": "primary",
+                "value": "#1361F0",
+                "role": "primary"
+            },
+            {
+                "name": "primary-bright",
+                "value": "#4f55f1",
+                "role": "primary bright"
+            },
+            {
+                "name": "primary-deep",
+                "value": "#3a40c4",
+                "role": "primary deep"
+            },
+            {
+                "name": "on-primary",
+                "value": "#ffffff",
+                "role": "on primary"
+            },
+            {
+                "name": "ink",
+                "value": "#191c1f",
+                "role": "ink"
+            },
+            {
+                "name": "body",
+                "value": "#1f2226",
+                "role": "body"
+            },
+            {
+                "name": "charcoal",
+                "value": "#3a3d40",
+                "role": "charcoal"
+            },
+            {
+                "name": "mute",
+                "value": "#505a63",
+                "role": "mute"
+            },
+            {
+                "name": "ash",
+                "value": "#5c5e60",
+                "role": "ash"
+            },
+            {
+                "name": "stone",
+                "value": "#8d969e",
+                "role": "stone"
+            },
+            {
+                "name": "faint",
+                "value": "#c9c9cd",
+                "role": "faint"
+            },
+            {
+                "name": "on-dark",
+                "value": "#ffffff",
+                "role": "on dark"
+            },
+            {
+                "name": "on-dark-mute",
+                "value": "rgba(255,255,255,0.72)",
+                "role": "on dark mute"
+            },
+            {
+                "name": "canvas-light",
+                "value": "#ffffff",
+                "role": "canvas light"
+            },
+            {
+                "name": "canvas-dark",
+                "value": "#000000",
+                "role": "canvas dark"
+            },
+            {
+                "name": "surface-soft",
+                "value": "#f4f4f4",
+                "role": "surface soft"
+            },
+            {
+                "name": "surface-card",
+                "value": "#ffffff",
+                "role": "surface card"
+            },
+            {
+                "name": "surface-deep",
+                "value": "#0a0a0a",
+                "role": "surface deep"
+            },
+            {
+                "name": "surface-elevated",
+                "value": "#16181a",
+                "role": "surface elevated"
+            },
+            {
+                "name": "hairline-light",
+                "value": "#e2e2e7",
+                "role": "hairline light"
+            },
+            {
+                "name": "hairline-dark",
+                "value": "rgba(255,255,255,0.12)",
+                "role": "hairline dark"
+            },
+            {
+                "name": "hairline-strong",
+                "value": "#191c1f",
+                "role": "hairline strong"
+            },
+            {
+                "name": "divider-soft",
+                "value": "rgba(255,255,255,0.06)",
+                "role": "divider soft"
+            },
+            {
+                "name": "teal",
+                "value": "#00a87e",
+                "role": "teal"
+            },
+            {
+                "name": "light-blue",
+                "value": "#007bc2",
+                "role": "light blue"
+            },
+            {
+                "name": "blue-link",
+                "value": "#376cd5",
+                "role": "blue link"
+            },
+            {
+                "name": "light-green",
+                "value": "#428619",
+                "role": "light green"
+            },
+            {
+                "name": "green-text",
+                "value": "#006400",
+                "role": "green text"
+            },
+            {
+                "name": "yellow",
+                "value": "#b09000",
+                "role": "yellow"
+            },
+            {
+                "name": "warning",
+                "value": "#d97706",
+                "role": "warning"
+            },
+            {
+                "name": "pink",
+                "value": "#e61e49",
+                "role": "pink"
+            },
+            {
+                "name": "danger",
+                "value": "#e23b4a",
+                "role": "danger"
+            },
+            {
+                "name": "deep-red",
+                "value": "#8b0000",
+                "role": "deep red"
+            },
+            {
+                "name": "brown",
+                "value": "#936d62",
+                "role": "brown"
+            }
+        ],
+        "typography": {
+            "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+            "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            "fontSizes": [
+                "16px",
+                "14px",
+                "18px",
+                "12px",
+                "96px",
+                "56px",
+                "24px",
+                "13px",
+                "32px",
+                "11px",
+                "64px",
+                "44px"
+            ],
+            "fontWeights": [
+                "600",
+                "500",
+                "700"
+            ],
+            "lineHeights": [
+                "1.5",
+                "1.0",
+                "1.56",
+                "1.4",
+                "1.33",
+                "1.19",
+                "1.6",
+                "1.2",
+                "1.35"
+            ]
+        },
+        "spacing": [
+            "4px",
+            "6px",
+            "8px",
+            "10px",
+            "12px",
+            "13px",
+            "14px",
+            "16px",
+            "20px",
+            "24px",
+            "27px",
+            "28px",
+            "32px",
+            "36px",
+            "40px",
+            "48px",
+            "56px",
+            "64px",
+            "80px",
+            "88px"
+        ],
+        "radii": [
+            "9999px",
+            "20px",
+            "28px",
+            "36px",
+            "24px",
+            "12px",
+            "3px"
+        ],
+        "shadows": []
+    },
+    "components": {
+        "button": {
+            "variant": "filled",
+            "size": "md",
+            "shape": "pill",
+            "color": "theme-primary",
+            "textColor": "theme-canvas",
+            "views": {
+                "container": {
+                    "borderRadius": 9999,
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "borderColor": "theme-primary",
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal",
+                    "backgroundColor": null
+                },
+                "content": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "badge": {
+            "variant": "filled",
+            "size": "sm",
+            "shape": "pill",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-secondary",
+                    "color": "theme-canvas",
+                    "borderColor": "theme-secondary",
+                    "borderRadius": 9999,
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontWeight": 700,
+                    "fontStyle": "normal"
+                },
+                "text": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 600
+                }
+            }
+        },
+        "card": {
+            "variant": "outlined",
+            "size": "md",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 20,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "0 1px 3px rgba(0, 0, 0, 0.08)"
+                },
+                "header": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 600,
+                    "borderColor": "theme-border"
+                },
+                "content": {
+                    "color": "theme-muted",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, 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": 16,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "none"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.02em"
+                },
+                "label": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "textarea": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 16,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "none"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.02em"
+                },
+                "label": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {}
+            }
+        },
+        "select": {
+            "size": "md",
+            "shape": "default",
+            "variant": "default",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 16,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "none"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "label": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "helperText": {},
+                "text": {
+                    "letterSpacing": "-0.02em",
+                    "fontStyle": "normal"
+                }
+            }
+        },
+        "checkbox": {
+            "size": "md",
+            "views": {
+                "checkbox": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas",
+                    "_checked": {
+                        "backgroundColor": "theme-primary",
+                        "borderColor": "theme-primary"
+                    },
+                    "borderRadius": 9999
+                },
+                "label": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "infoText": {
+                    "color": "theme-muted"
+                },
+                "container": {
+                    "borderRadius": 9999
+                }
+            }
+        },
+        "radio": {
+            "size": "md",
+            "views": {
+                "radio": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-canvas"
+                },
+                "dot": {
+                    "backgroundColor": "theme-primary"
+                },
+                "label": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "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": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "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": "pill",
+            "views": {
+                "headerTabs": {
+                    "borderColor": "theme-border"
+                },
+                "tab": {
+                    "color": "theme-muted",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "activeTab": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary",
+                    "backgroundColor": "theme-primary"
+                },
+                "title": {
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "activeText": {
+                    "color": "theme-canvas"
+                },
+                "content": {
+                    "color": "theme-text"
+                },
+                "container": {
+                    "borderRadius": "9999px"
+                }
+            }
+        },
+        "accordion": {
+            "views": {
+                "container": {
+                    "borderColor": "theme-border",
+                    "backgroundColor": "theme-surface",
+                    "color": "theme-text",
+                    "borderRadius": "24px"
+                },
+                "trigger": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "content": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "table": {
+            "views": {
+                "table": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "borderColor": "theme-border",
+                    "borderRadius": 20
+                },
+                "thead": {
+                    "backgroundColor": "theme-surface",
+                    "color": "theme-text"
+                },
+                "th": {
+                    "color": "theme-muted",
+                    "borderColor": "theme-border",
+                    "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "tr": {
+                    "borderColor": "theme-border"
+                },
+                "td": {
+                    "color": "theme-text",
+                    "borderColor": "theme-border",
+                    "letterSpacing": "-0.02em",
+                    "fontStyle": "normal"
+                },
+                "caption": {
+                    "color": "theme-muted",
+                    "fontStyle": "italic",
+                    "letterSpacing": "-0.02em"
+                }
+            }
+        },
+        "avatar": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": "50%"
+                },
+                "fallback": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                }
+            }
+        },
+        "alert": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "borderRadius": 20
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif",
+                    "fontWeight": 700,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "description": {
+                    "color": "theme-muted",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "icon": {
+                    "color": "theme-primary"
+                }
+            }
+        },
+        "status": {
+            "views": {
+                "indicator": {
+                    "backgroundColor": "theme-success"
+                },
+                "label": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                }
+            }
+        },
+        "progress": {
+            "color": "theme-primary",
+            "backgroundColor": "theme-border",
+            "radius": "24px",
+            "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": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                }
+            }
+        },
+        "navigation": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": "24px"
+                },
+                "item": {
+                    "color": "theme-muted"
+                },
+                "activeItem": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary"
+                }
+            }
+        },
+        "hero": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "eyebrow": {
+                    "color": "theme-muted"
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "description": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "page": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "fontFamily": "'Aeonik Pro', 'Inter', system-ui, -apple-system, sans-serif"
+                },
+                "section": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border"
+                },
+                "surface": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-text"
+                }
+            }
+        }
+    },
+    "personality": {
+        "cornerStyle": "pill",
+        "typeWeight": "bold",
+        "typeCase": "normal",
+        "typeStyle": "normal",
+        "letterSpacing": "-0.02em",
+        "accentTreatment": "gradient",
+        "signatureMotif": "★",
+        "density": "comfortable",
+        "surfaceTone": "glass",
+        "cardRadius": 20,
+        "pillRadius": 9999,
+        "badgeRadius": 9999,
+        "voice": "bold-fintech"
+    }
+}