@app-studio/components 0.10.17

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

@@ -0,0 +1,710 @@
+{
+    "metadata": {
+        "id": "spotify",
+        "label": "Spotify",
+        "sourcePath": "design.md/html/spotify.html",
+        "sourceTitle": "Design System Inspired by Shopify",
+        "defaultAppearance": "dark",
+        "googleFontLinks": [
+            "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+        ]
+    },
+    "theme": {
+        "primary": "#1DB954",
+        "secondary": "#C1FBD4",
+        "success": "#1DB954",
+        "warning": "#D4F9E0",
+        "error": "#D4D4D8",
+        "canvas": "#000000",
+        "surface": "#121212",
+        "text": "#FFFFFF",
+        "muted": "#A1A1AA",
+        "border": "#1E2C31",
+        "onPrimary": "#000000"
+    },
+    "tokens": {
+        "rawCssVars": {
+            "white": "#FFFFFF",
+            "black": "#000000",
+            "spotify-green": "#1DB954",
+            "aloe": "#C1FBD4",
+            "pistachio": "#D4F9E0",
+            "deep-teal": "#02090A",
+            "dark-forest": "#061A1C",
+            "forest": "#102620",
+            "card-border": "#1E2C31",
+            "shade-30": "#D4D4D8",
+            "muted": "#A1A1AA",
+            "shade-50": "#71717A",
+            "shade-60": "#52525B",
+            "shade-70": "#3F3F46",
+            "light-border": "#E4E4E7",
+            "link-muted": "#9797A2",
+            "shadow-card": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+        },
+        "colors": [
+            {
+                "name": "white",
+                "value": "#FFFFFF",
+                "role": "white"
+            },
+            {
+                "name": "black",
+                "value": "#000000",
+                "role": "black"
+            },
+            {
+                "name": "spotify-green",
+                "value": "#1DB954",
+                "role": "neon green"
+            },
+            {
+                "name": "aloe",
+                "value": "#C1FBD4",
+                "role": "aloe"
+            },
+            {
+                "name": "pistachio",
+                "value": "#D4F9E0",
+                "role": "pistachio"
+            },
+            {
+                "name": "deep-teal",
+                "value": "#02090A",
+                "role": "deep teal"
+            },
+            {
+                "name": "dark-forest",
+                "value": "#061A1C",
+                "role": "dark forest"
+            },
+            {
+                "name": "forest",
+                "value": "#102620",
+                "role": "forest"
+            },
+            {
+                "name": "card-border",
+                "value": "#1E2C31",
+                "role": "card border"
+            },
+            {
+                "name": "shade-30",
+                "value": "#D4D4D8",
+                "role": "shade 30"
+            },
+            {
+                "name": "muted",
+                "value": "#A1A1AA",
+                "role": "muted"
+            },
+            {
+                "name": "shade-50",
+                "value": "#71717A",
+                "role": "shade 50"
+            },
+            {
+                "name": "shade-60",
+                "value": "#52525B",
+                "role": "shade 60"
+            },
+            {
+                "name": "shade-70",
+                "value": "#3F3F46",
+                "role": "shade 70"
+            },
+            {
+                "name": "light-border",
+                "value": "#E4E4E7",
+                "role": "light border"
+            },
+            {
+                "name": "link-muted",
+                "value": "#9797A2",
+                "role": "link muted"
+            },
+            {
+                "name": "shadow-card",
+                "value": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset",
+                "role": "shadow card"
+            }
+        ],
+        "typography": {
+            "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+            "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            "fontSizes": [
+                "20px",
+                "16px",
+                "14px",
+                "80px",
+                "48px",
+                "18px",
+                "12px",
+                "13px",
+                "11px",
+                "55px",
+                "32px",
+                "28px",
+                "24px",
+                "36px"
+            ],
+            "fontWeights": [
+                "400",
+                "600",
+                "500",
+                "330",
+                "360",
+                "550",
+                "700"
+            ],
+            "lineHeights": [
+                "1.5",
+                "0.96",
+                "1.14",
+                "1.56",
+                "1.16",
+                "1.28",
+                "1.4",
+                "1.49",
+                "1.2",
+                "1.35"
+            ]
+        },
+        "spacing": [
+            "4px",
+            "8px",
+            "10px",
+            "12px",
+            "14px",
+            "16px",
+            "20px",
+            "24px",
+            "28px",
+            "32px",
+            "40px",
+            "48px",
+            "64px",
+            "72px",
+            "80px",
+            "100px"
+        ],
+        "radii": [
+            "9999px",
+            "8px",
+            "4px",
+            "12px",
+            "2px",
+            "3px"
+        ],
+        "shadows": [
+            "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset",
+            "0 0 0 2px var(--neon-green)",
+            "var(--shadow-card)",
+            "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+        ]
+    },
+    "components": {
+        "button": {
+            "variant": "filled",
+            "size": "md",
+            "shape": "pill",
+            "color": "theme-primary",
+            "textColor": "theme-canvas",
+            "views": {
+                "container": {
+                    "borderRadius": 9999,
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "borderColor": "theme-primary",
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal",
+                    "backgroundColor": null
+                },
+                "content": {
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "'Inter', Helvetica, Arial, sans-serif",
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontWeight": 800,
+                    "fontStyle": "normal"
+                },
+                "text": {
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 600
+                }
+            }
+        },
+        "card": {
+            "variant": "outlined",
+            "size": "md",
+            "shape": "rounded",
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-text",
+                    "borderRadius": 8,
+                    "borderWidth": "1px",
+                    "borderStyle": "solid",
+                    "boxShadow": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+                },
+                "header": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 600,
+                    "borderColor": "theme-border"
+                },
+                "content": {
+                    "color": "theme-muted",
+                    "fontFamily": "'Inter', Helvetica, Arial, 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": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.02em"
+                },
+                "label": {
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontStyle": "normal",
+                    "letterSpacing": "-0.02em"
+                },
+                "label": {
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px 0px, rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 8px 0px, rgba(255,255,255,0.03) 0px 1px 0px 0px inset"
+                },
+                "field": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "label": {
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "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": 800,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "activeTab": {
+                    "color": "theme-primary",
+                    "borderColor": "theme-primary",
+                    "backgroundColor": "theme-primary"
+                },
+                "title": {
+                    "fontFamily": "'Inter', Helvetica, Arial, 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": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "content": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "table": {
+            "views": {
+                "table": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "borderColor": "theme-border",
+                    "borderRadius": 8
+                },
+                "thead": {
+                    "backgroundColor": "theme-surface",
+                    "color": "theme-text"
+                },
+                "th": {
+                    "color": "theme-muted",
+                    "borderColor": "theme-border",
+                    "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                    "fontWeight": 800,
+                    "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": "'Inter', Helvetica, Arial, sans-serif"
+                }
+            }
+        },
+        "alert": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "borderRadius": 8
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
+                    "fontWeight": 800,
+                    "letterSpacing": "-0.02em",
+                    "textTransform": "none",
+                    "fontStyle": "normal"
+                },
+                "description": {
+                    "color": "theme-muted",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "icon": {
+                    "color": "theme-primary"
+                }
+            }
+        },
+        "status": {
+            "views": {
+                "indicator": {
+                    "backgroundColor": "theme-primary"
+                },
+                "label": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
+                }
+            }
+        },
+        "progress": {
+            "color": "theme-primary",
+            "backgroundColor": "theme-border",
+            "radius": "16px",
+            "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": "'Inter', Helvetica, Arial, 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": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "eyebrow": {
+                    "color": "theme-muted"
+                },
+                "title": {
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "description": {
+                    "color": "theme-muted"
+                }
+            }
+        },
+        "page": {
+            "views": {
+                "container": {
+                    "backgroundColor": "theme-canvas",
+                    "color": "theme-text",
+                    "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
+                },
+                "section": {
+                    "backgroundColor": "theme-canvas",
+                    "borderColor": "theme-border"
+                },
+                "surface": {
+                    "backgroundColor": "theme-surface",
+                    "borderColor": "theme-border",
+                    "color": "theme-text"
+                }
+            }
+        }
+    },
+    "personality": {
+        "cornerStyle": "pill",
+        "typeWeight": "black",
+        "typeCase": "normal",
+        "typeStyle": "normal",
+        "letterSpacing": "-0.02em",
+        "accentTreatment": "flat",
+        "signatureMotif": "●",
+        "density": "comfortable",
+        "surfaceTone": "matte",
+        "cardRadius": 8,
+        "pillRadius": 9999,
+        "badgeRadius": 9999,
+        "voice": "rhythmic-vibrant"
+    }
+}