create-rn-starter-kit
Version:
Interactive CLI for creating modular React Native apps with Expo
61 lines • 2.38 kB
JSON
{
"global": {
"colors": {
"primary": {
"50": { "value": "#eff6ff", "type": "color" },
"100": { "value": "#dbeafe", "type": "color" },
"500": { "value": "#3b82f6", "type": "color" },
"600": { "value": "#2563eb", "type": "color" },
"900": { "value": "#1e3a8a", "type": "color" }
},
"neutral": {
"50": { "value": "#fafafa", "type": "color" },
"100": { "value": "#f5f5f5", "type": "color" },
"200": { "value": "#e5e5e5", "type": "color" },
"500": { "value": "#737373", "type": "color" },
"900": { "value": "#171717", "type": "color" }
},
"semantic": {
"error": { "value": "#ef4444", "type": "color" },
"success": { "value": "#22c55e", "type": "color" },
"warning": { "value": "#f59e0b", "type": "color" }
}
},
"spacing": {
"xs": { "value": "4", "type": "spacing" },
"sm": { "value": "8", "type": "spacing" },
"md": { "value": "16", "type": "spacing" },
"lg": { "value": "24", "type": "spacing" },
"xl": { "value": "32", "type": "spacing" }
},
"borderRadius": {
"sm": { "value": "4", "type": "borderRadius" },
"md": { "value": "8", "type": "borderRadius" },
"lg": { "value": "12", "type": "borderRadius" }
},
"fontSize": {
"sm": { "value": "12", "type": "fontSizes" },
"base": { "value": "16", "type": "fontSizes" },
"lg": { "value": "20", "type": "fontSizes" },
"xl": { "value": "24", "type": "fontSizes" }
}
},
"light": {
"colors": {
"background": { "value": "{global.colors.neutral.50}", "type": "color" },
"surface": { "value": "{global.colors.neutral.100}", "type": "color" },
"text": { "value": "{global.colors.neutral.900}", "type": "color" },
"textSecondary": { "value": "{global.colors.neutral.500}", "type": "color" },
"border": { "value": "{global.colors.neutral.200}", "type": "color" }
}
},
"dark": {
"colors": {
"background": { "value": "{global.colors.neutral.900}", "type": "color" },
"surface": { "value": "#1a1a1a", "type": "color" },
"text": { "value": "{global.colors.neutral.50}", "type": "color" },
"textSecondary": { "value": "{global.colors.neutral.500}", "type": "color" },
"border": { "value": "#333333", "type": "color" }
}
}
}