@app-studio/components 0.10.17 → 0.10.18

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

@@ -15,11 +15,11 @@
         "success": "#1DB954",
         "warning": "#D4F9E0",
         "error": "#D4D4D8",
-        "canvas": "#000000",
-        "surface": "#121212",
-        "text": "#FFFFFF",
-        "muted": "#A1A1AA",
-        "border": "#1E2C31",
+        "canvas": "color-white",
+        "surface": "color-gray-50",
+        "text": "color-black",
+        "muted": "color-gray-500",
+        "border": "color-gray-200",
         "onPrimary": "#000000"
     },
     "tokens": {
@@ -209,7 +209,7 @@
             "size": "md",
             "shape": "pill",
             "color": "theme-primary",
-            "textColor": "theme-canvas",
+            "textColor": "theme-onPrimary",
             "views": {
                 "container": {
                     "borderRadius": 9999,
@@ -237,7 +237,7 @@
             "views": {
                 "container": {
                     "backgroundColor": "theme-secondary",
-                    "color": "theme-canvas",
+                    "color": "color-white",
                     "borderColor": "theme-secondary",
                     "borderRadius": 9999,
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
@@ -258,26 +258,26 @@
             "shape": "rounded",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "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",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
                     "fontWeight": 600,
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "content": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "footer": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 }
             }
         },
@@ -287,16 +287,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "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",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
                     "fontStyle": "normal",
                     "letterSpacing": "-0.02em"
@@ -317,16 +317,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "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",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
                     "fontStyle": "normal",
                     "letterSpacing": "-0.02em"
@@ -347,16 +347,16 @@
             "variant": "default",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "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",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "label": {
@@ -377,8 +377,8 @@
             "size": "md",
             "views": {
                 "checkbox": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white",
                     "_checked": {
                         "backgroundColor": "theme-primary",
                         "borderColor": "theme-primary"
@@ -393,7 +393,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": 9999
@@ -404,8 +404,8 @@
             "size": "md",
             "views": {
                 "radio": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-canvas"
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-white"
                 },
                 "dot": {
                     "backgroundColor": "theme-primary"
@@ -418,7 +418,7 @@
                     "fontStyle": "normal"
                 },
                 "infoText": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "container": {
                     "borderRadius": "50%"
@@ -429,10 +429,10 @@
             "size": "sm",
             "views": {
                 "slider": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "circle": {
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
@@ -450,7 +450,7 @@
             "backgroundColor": "theme-primary",
             "views": {
                 "track": {
-                    "backgroundColor": "theme-border"
+                    "backgroundColor": "color-gray-200"
                 },
                 "progress": {
                     "backgroundColor": "theme-primary"
@@ -460,13 +460,13 @@
                 },
                 "thumb": {
                     "borderColor": "theme-primary",
-                    "backgroundColor": "theme-canvas"
+                    "backgroundColor": "color-white"
                 },
                 "label": {
-                    "color": "theme-text"
+                    "color": "color-black"
                 },
                 "valueLabel": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
@@ -474,10 +474,10 @@
             "variant": "pill",
             "views": {
                 "headerTabs": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "tab": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontWeight": 800,
                     "letterSpacing": "-0.02em",
                     "textTransform": "none",
@@ -492,10 +492,10 @@
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "activeText": {
-                    "color": "theme-canvas"
+                    "color": "color-white"
                 },
                 "content": {
-                    "color": "theme-text"
+                    "color": "color-black"
                 },
                 "container": {
                     "borderRadius": "9999px"
@@ -505,35 +505,35 @@
         "accordion": {
             "views": {
                 "container": {
-                    "borderColor": "theme-border",
-                    "backgroundColor": "theme-surface",
-                    "color": "theme-text",
+                    "borderColor": "color-gray-200",
+                    "backgroundColor": "color-gray-50",
+                    "color": "color-black",
                     "borderRadius": "24px"
                 },
                 "trigger": {
-                    "color": "theme-text",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "content": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "table": {
             "views": {
                 "table": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-text",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 8
                 },
                 "thead": {
-                    "backgroundColor": "theme-surface",
-                    "color": "theme-text"
+                    "backgroundColor": "color-gray-50",
+                    "color": "color-black"
                 },
                 "th": {
-                    "color": "theme-muted",
-                    "borderColor": "theme-border",
+                    "color": "color-gray-500",
+                    "borderColor": "color-gray-200",
                     "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
                     "fontWeight": 800,
                     "letterSpacing": "-0.02em",
@@ -541,16 +541,16 @@
                     "fontStyle": "normal"
                 },
                 "tr": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "td": {
-                    "color": "theme-text",
-                    "borderColor": "theme-border",
+                    "color": "color-black",
+                    "borderColor": "color-gray-200",
                     "letterSpacing": "-0.02em",
                     "fontStyle": "normal"
                 },
                 "caption": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontStyle": "italic",
                     "letterSpacing": "-0.02em"
                 }
@@ -559,13 +559,13 @@
         "avatar": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": "50%"
                 },
                 "fallback": {
-                    "color": "theme-text",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 }
             }
@@ -573,12 +573,12 @@
         "alert": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
                     "borderRadius": 8
                 },
                 "title": {
-                    "color": "theme-text",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif",
                     "fontWeight": 800,
                     "letterSpacing": "-0.02em",
@@ -586,7 +586,7 @@
                     "fontStyle": "normal"
                 },
                 "description": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "icon": {
@@ -600,25 +600,25 @@
                     "backgroundColor": "theme-primary"
                 },
                 "label": {
-                    "color": "theme-text",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 }
             }
         },
         "progress": {
             "color": "theme-primary",
-            "backgroundColor": "theme-border",
+            "backgroundColor": "color-gray-200",
             "radius": "16px",
             "views": {
                 "container": {
-                    "backgroundColor": "theme-border",
+                    "backgroundColor": "color-gray-200",
                     "borderRadius": "9999px"
                 },
                 "bar": {
                     "backgroundColor": "theme-primary"
                 },
                 "text": {
-                    "color": "theme-text"
+                    "color": "color-black"
                 }
             }
         },
@@ -626,13 +626,13 @@
             "color": "theme-primary"
         },
         "separator": {
-            "color": "theme-border",
+            "color": "color-gray-200",
             "views": {
                 "container": {
-                    "borderColor": "theme-border"
+                    "borderColor": "color-gray-200"
                 },
                 "label": {
-                    "color": "theme-muted",
+                    "color": "color-gray-500",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 }
             }
@@ -640,13 +640,13 @@
         "navigation": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black",
                     "borderRadius": "24px"
                 },
                 "item": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "activeItem": {
                     "color": "theme-primary",
@@ -657,37 +657,37 @@
         "hero": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "eyebrow": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 },
                 "title": {
-                    "color": "theme-text",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "description": {
-                    "color": "theme-muted"
+                    "color": "color-gray-500"
                 }
             }
         },
         "page": {
             "views": {
                 "container": {
-                    "backgroundColor": "theme-canvas",
-                    "color": "theme-text",
+                    "backgroundColor": "color-white",
+                    "color": "color-black",
                     "fontFamily": "'Inter', Helvetica, Arial, sans-serif"
                 },
                 "section": {
-                    "backgroundColor": "theme-canvas",
-                    "borderColor": "theme-border"
+                    "backgroundColor": "color-white",
+                    "borderColor": "color-gray-200"
                 },
                 "surface": {
-                    "backgroundColor": "theme-surface",
-                    "borderColor": "theme-border",
-                    "color": "theme-text"
+                    "backgroundColor": "color-gray-50",
+                    "borderColor": "color-gray-200",
+                    "color": "color-black"
                 }
             }
         }