parent
1f33c7470f
commit
a187a3e34a
@ -0,0 +1,37 @@ |
|||||||
|
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files |
||||||
|
|
||||||
|
# dependencies |
||||||
|
node_modules/ |
||||||
|
|
||||||
|
# Expo |
||||||
|
.expo/ |
||||||
|
dist/ |
||||||
|
web-build/ |
||||||
|
expo-env.d.ts |
||||||
|
|
||||||
|
# Native |
||||||
|
.kotlin/ |
||||||
|
*.orig.* |
||||||
|
*.jks |
||||||
|
*.p8 |
||||||
|
*.p12 |
||||||
|
*.key |
||||||
|
*.mobileprovision |
||||||
|
|
||||||
|
# Metro |
||||||
|
.metro-health-check* |
||||||
|
|
||||||
|
# debug |
||||||
|
npm-debug.* |
||||||
|
yarn-debug.* |
||||||
|
yarn-error.* |
||||||
|
|
||||||
|
# macOS |
||||||
|
.DS_Store |
||||||
|
*.pem |
||||||
|
|
||||||
|
# local env files |
||||||
|
.env*.local |
||||||
|
|
||||||
|
# typescript |
||||||
|
*.tsbuildinfo |
||||||
@ -0,0 +1 @@ |
|||||||
|
legacy-peer-deps=true |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import { StatusBar } from 'expo-status-bar'; |
||||||
|
import { StyleSheet, Text, View } from 'react-native'; |
||||||
|
|
||||||
|
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'; |
||||||
|
import '@/global.css'; |
||||||
|
|
||||||
|
export default function App() { |
||||||
|
return ( |
||||||
|
|
||||||
|
<GluestackUIProvider mode="light"> |
||||||
|
<View style={styles.container}> |
||||||
|
<Text>Open up App.tsx to start working on your app!</Text> |
||||||
|
<StatusBar style="auto" /> |
||||||
|
</View> |
||||||
|
</GluestackUIProvider> |
||||||
|
|
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: '#fff', |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
{ |
||||||
|
"expo": { |
||||||
|
"name": "expo.project", |
||||||
|
"slug": "expo.project", |
||||||
|
"version": "1.0.0", |
||||||
|
"orientation": "portrait", |
||||||
|
"icon": "./assets/icon.png", |
||||||
|
"userInterfaceStyle": "light", |
||||||
|
"newArchEnabled": true, |
||||||
|
"splash": { |
||||||
|
"image": "./assets/splash-icon.png", |
||||||
|
"resizeMode": "contain", |
||||||
|
"backgroundColor": "#ffffff" |
||||||
|
}, |
||||||
|
"ios": { |
||||||
|
"supportsTablet": true |
||||||
|
}, |
||||||
|
"android": { |
||||||
|
"adaptiveIcon": { |
||||||
|
"foregroundImage": "./assets/adaptive-icon.png", |
||||||
|
"backgroundColor": "#ffffff" |
||||||
|
}, |
||||||
|
"edgeToEdgeEnabled": true |
||||||
|
}, |
||||||
|
"web": { |
||||||
|
"favicon": "./assets/favicon.png" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,30 @@ |
|||||||
|
module.exports = function (api) { |
||||||
|
api.cache(true); |
||||||
|
|
||||||
|
return { |
||||||
|
presets: [ |
||||||
|
[ |
||||||
|
'babel-preset-expo', |
||||||
|
{ |
||||||
|
jsxImportSource: 'nativewind', |
||||||
|
}, |
||||||
|
], |
||||||
|
'nativewind/babel', |
||||||
|
], |
||||||
|
|
||||||
|
plugins: [ |
||||||
|
[ |
||||||
|
'module-resolver', |
||||||
|
{ |
||||||
|
root: ['./'], |
||||||
|
|
||||||
|
alias: { |
||||||
|
'@': './', |
||||||
|
'tailwind.config': './tailwind.config.js', |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
'react-native-reanimated/plugin', |
||||||
|
], |
||||||
|
}; |
||||||
|
}; |
||||||
@ -0,0 +1,309 @@ |
|||||||
|
'use client'; |
||||||
|
import { vars } from 'nativewind'; |
||||||
|
|
||||||
|
export const config = { |
||||||
|
light: vars({ |
||||||
|
'--color-primary-0': '179 179 179', |
||||||
|
'--color-primary-50': '153 153 153', |
||||||
|
'--color-primary-100': '128 128 128', |
||||||
|
'--color-primary-200': '115 115 115', |
||||||
|
'--color-primary-300': '102 102 102', |
||||||
|
'--color-primary-400': '82 82 82', |
||||||
|
'--color-primary-500': '51 51 51', |
||||||
|
'--color-primary-600': '41 41 41', |
||||||
|
'--color-primary-700': '31 31 31', |
||||||
|
'--color-primary-800': '13 13 13', |
||||||
|
'--color-primary-900': '10 10 10', |
||||||
|
'--color-primary-950': '8 8 8', |
||||||
|
|
||||||
|
/* Secondary */ |
||||||
|
'--color-secondary-0': '253 253 253', |
||||||
|
'--color-secondary-50': '251 251 251', |
||||||
|
'--color-secondary-100': '246 246 246', |
||||||
|
'--color-secondary-200': '242 242 242', |
||||||
|
'--color-secondary-300': '237 237 237', |
||||||
|
'--color-secondary-400': '230 230 231', |
||||||
|
'--color-secondary-500': '217 217 219', |
||||||
|
'--color-secondary-600': '198 199 199', |
||||||
|
'--color-secondary-700': '189 189 189', |
||||||
|
'--color-secondary-800': '177 177 177', |
||||||
|
'--color-secondary-900': '165 164 164', |
||||||
|
'--color-secondary-950': '157 157 157', |
||||||
|
|
||||||
|
/* Tertiary */ |
||||||
|
'--color-tertiary-0': '255 250 245', |
||||||
|
'--color-tertiary-50': '255 242 229', |
||||||
|
'--color-tertiary-100': '255 233 213', |
||||||
|
'--color-tertiary-200': '254 209 170', |
||||||
|
'--color-tertiary-300': '253 180 116', |
||||||
|
'--color-tertiary-400': '251 157 75', |
||||||
|
'--color-tertiary-500': '231 129 40', |
||||||
|
'--color-tertiary-600': '215 117 31', |
||||||
|
'--color-tertiary-700': '180 98 26', |
||||||
|
'--color-tertiary-800': '130 73 23', |
||||||
|
'--color-tertiary-900': '108 61 19', |
||||||
|
'--color-tertiary-950': '84 49 18', |
||||||
|
|
||||||
|
/* Error */ |
||||||
|
'--color-error-0': '254 233 233', |
||||||
|
'--color-error-50': '254 226 226', |
||||||
|
'--color-error-100': '254 202 202', |
||||||
|
'--color-error-200': '252 165 165', |
||||||
|
'--color-error-300': '248 113 113', |
||||||
|
'--color-error-400': '239 68 68', |
||||||
|
'--color-error-500': '230 53 53', |
||||||
|
'--color-error-600': '220 38 38', |
||||||
|
'--color-error-700': '185 28 28', |
||||||
|
'--color-error-800': '153 27 27', |
||||||
|
'--color-error-900': '127 29 29', |
||||||
|
'--color-error-950': '83 19 19', |
||||||
|
|
||||||
|
/* Success */ |
||||||
|
'--color-success-0': '228 255 244', |
||||||
|
'--color-success-50': '202 255 232', |
||||||
|
'--color-success-100': '162 241 192', |
||||||
|
'--color-success-200': '132 211 162', |
||||||
|
'--color-success-300': '102 181 132', |
||||||
|
'--color-success-400': '72 151 102', |
||||||
|
'--color-success-500': '52 131 82', |
||||||
|
'--color-success-600': '42 121 72', |
||||||
|
'--color-success-700': '32 111 62', |
||||||
|
'--color-success-800': '22 101 52', |
||||||
|
'--color-success-900': '20 83 45', |
||||||
|
'--color-success-950': '27 50 36', |
||||||
|
|
||||||
|
/* Warning */ |
||||||
|
'--color-warning-0': '255 249 245', |
||||||
|
'--color-warning-50': '255 244 236', |
||||||
|
'--color-warning-100': '255 231 213', |
||||||
|
'--color-warning-200': '254 205 170', |
||||||
|
'--color-warning-300': '253 173 116', |
||||||
|
'--color-warning-400': '251 149 75', |
||||||
|
'--color-warning-500': '231 120 40', |
||||||
|
'--color-warning-600': '215 108 31', |
||||||
|
'--color-warning-700': '180 90 26', |
||||||
|
'--color-warning-800': '130 68 23', |
||||||
|
'--color-warning-900': '108 56 19', |
||||||
|
'--color-warning-950': '84 45 18', |
||||||
|
|
||||||
|
/* Info */ |
||||||
|
'--color-info-0': '236 248 254', |
||||||
|
'--color-info-50': '199 235 252', |
||||||
|
'--color-info-100': '162 221 250', |
||||||
|
'--color-info-200': '124 207 248', |
||||||
|
'--color-info-300': '87 194 246', |
||||||
|
'--color-info-400': '50 180 244', |
||||||
|
'--color-info-500': '13 166 242', |
||||||
|
'--color-info-600': '11 141 205', |
||||||
|
'--color-info-700': '9 115 168', |
||||||
|
'--color-info-800': '7 90 131', |
||||||
|
'--color-info-900': '5 64 93', |
||||||
|
'--color-info-950': '3 38 56', |
||||||
|
|
||||||
|
/* Typography */ |
||||||
|
'--color-typography-0': '254 254 255', |
||||||
|
'--color-typography-50': '245 245 245', |
||||||
|
'--color-typography-100': '229 229 229', |
||||||
|
'--color-typography-200': '219 219 220', |
||||||
|
'--color-typography-300': '212 212 212', |
||||||
|
'--color-typography-400': '163 163 163', |
||||||
|
'--color-typography-500': '140 140 140', |
||||||
|
'--color-typography-600': '115 115 115', |
||||||
|
'--color-typography-700': '82 82 82', |
||||||
|
'--color-typography-800': '64 64 64', |
||||||
|
'--color-typography-900': '38 38 39', |
||||||
|
'--color-typography-950': '23 23 23', |
||||||
|
|
||||||
|
/* Outline */ |
||||||
|
'--color-outline-0': '253 254 254', |
||||||
|
'--color-outline-50': '243 243 243', |
||||||
|
'--color-outline-100': '230 230 230', |
||||||
|
'--color-outline-200': '221 220 219', |
||||||
|
'--color-outline-300': '211 211 211', |
||||||
|
'--color-outline-400': '165 163 163', |
||||||
|
'--color-outline-500': '140 141 141', |
||||||
|
'--color-outline-600': '115 116 116', |
||||||
|
'--color-outline-700': '83 82 82', |
||||||
|
'--color-outline-800': '65 65 65', |
||||||
|
'--color-outline-900': '39 38 36', |
||||||
|
'--color-outline-950': '26 23 23', |
||||||
|
|
||||||
|
/* Background */ |
||||||
|
'--color-background-0': '255 255 255', |
||||||
|
'--color-background-50': '246 246 246', |
||||||
|
'--color-background-100': '242 241 241', |
||||||
|
'--color-background-200': '220 219 219', |
||||||
|
'--color-background-300': '213 212 212', |
||||||
|
'--color-background-400': '162 163 163', |
||||||
|
'--color-background-500': '142 142 142', |
||||||
|
'--color-background-600': '116 116 116', |
||||||
|
'--color-background-700': '83 82 82', |
||||||
|
'--color-background-800': '65 64 64', |
||||||
|
'--color-background-900': '39 38 37', |
||||||
|
'--color-background-950': '18 18 18', |
||||||
|
|
||||||
|
/* Background Special */ |
||||||
|
'--color-background-error': '254 241 241', |
||||||
|
'--color-background-warning': '255 243 234', |
||||||
|
'--color-background-success': '237 252 242', |
||||||
|
'--color-background-muted': '247 248 247', |
||||||
|
'--color-background-info': '235 248 254', |
||||||
|
|
||||||
|
/* Focus Ring Indicator */ |
||||||
|
'--color-indicator-primary': '55 55 55', |
||||||
|
'--color-indicator-info': '83 153 236', |
||||||
|
'--color-indicator-error': '185 28 28', |
||||||
|
}), |
||||||
|
dark: vars({ |
||||||
|
'--color-primary-0': '166 166 166', |
||||||
|
'--color-primary-50': '175 175 175', |
||||||
|
'--color-primary-100': '186 186 186', |
||||||
|
'--color-primary-200': '197 197 197', |
||||||
|
'--color-primary-300': '212 212 212', |
||||||
|
'--color-primary-400': '221 221 221', |
||||||
|
'--color-primary-500': '230 230 230', |
||||||
|
'--color-primary-600': '240 240 240', |
||||||
|
'--color-primary-700': '250 250 250', |
||||||
|
'--color-primary-800': '253 253 253', |
||||||
|
'--color-primary-900': '254 249 249', |
||||||
|
'--color-primary-950': '253 252 252', |
||||||
|
|
||||||
|
/* Secondary */ |
||||||
|
'--color-secondary-0': '20 20 20', |
||||||
|
'--color-secondary-50': '23 23 23', |
||||||
|
'--color-secondary-100': '31 31 31', |
||||||
|
'--color-secondary-200': '39 39 39', |
||||||
|
'--color-secondary-300': '44 44 44', |
||||||
|
'--color-secondary-400': '56 57 57', |
||||||
|
'--color-secondary-500': '63 64 64', |
||||||
|
'--color-secondary-600': '86 86 86', |
||||||
|
'--color-secondary-700': '110 110 110', |
||||||
|
'--color-secondary-800': '135 135 135', |
||||||
|
'--color-secondary-900': '150 150 150', |
||||||
|
'--color-secondary-950': '164 164 164', |
||||||
|
|
||||||
|
/* Tertiary */ |
||||||
|
'--color-tertiary-0': '84 49 18', |
||||||
|
'--color-tertiary-50': '108 61 19', |
||||||
|
'--color-tertiary-100': '130 73 23', |
||||||
|
'--color-tertiary-200': '180 98 26', |
||||||
|
'--color-tertiary-300': '215 117 31', |
||||||
|
'--color-tertiary-400': '231 129 40', |
||||||
|
'--color-tertiary-500': '251 157 75', |
||||||
|
'--color-tertiary-600': '253 180 116', |
||||||
|
'--color-tertiary-700': '254 209 170', |
||||||
|
'--color-tertiary-800': '255 233 213', |
||||||
|
'--color-tertiary-900': '255 242 229', |
||||||
|
'--color-tertiary-950': '255 250 245', |
||||||
|
|
||||||
|
/* Error */ |
||||||
|
'--color-error-0': '83 19 19', |
||||||
|
'--color-error-50': '127 29 29', |
||||||
|
'--color-error-100': '153 27 27', |
||||||
|
'--color-error-200': '185 28 28', |
||||||
|
'--color-error-300': '220 38 38', |
||||||
|
'--color-error-400': '230 53 53', |
||||||
|
'--color-error-500': '239 68 68', |
||||||
|
'--color-error-600': '249 97 96', |
||||||
|
'--color-error-700': '229 91 90', |
||||||
|
'--color-error-800': '254 202 202', |
||||||
|
'--color-error-900': '254 226 226', |
||||||
|
'--color-error-950': '254 233 233', |
||||||
|
|
||||||
|
/* Success */ |
||||||
|
'--color-success-0': '27 50 36', |
||||||
|
'--color-success-50': '20 83 45', |
||||||
|
'--color-success-100': '22 101 52', |
||||||
|
'--color-success-200': '32 111 62', |
||||||
|
'--color-success-300': '42 121 72', |
||||||
|
'--color-success-400': '52 131 82', |
||||||
|
'--color-success-500': '72 151 102', |
||||||
|
'--color-success-600': '102 181 132', |
||||||
|
'--color-success-700': '132 211 162', |
||||||
|
'--color-success-800': '162 241 192', |
||||||
|
'--color-success-900': '202 255 232', |
||||||
|
'--color-success-950': '228 255 244', |
||||||
|
|
||||||
|
/* Warning */ |
||||||
|
'--color-warning-0': '84 45 18', |
||||||
|
'--color-warning-50': '108 56 19', |
||||||
|
'--color-warning-100': '130 68 23', |
||||||
|
'--color-warning-200': '180 90 26', |
||||||
|
'--color-warning-300': '215 108 31', |
||||||
|
'--color-warning-400': '231 120 40', |
||||||
|
'--color-warning-500': '251 149 75', |
||||||
|
'--color-warning-600': '253 173 116', |
||||||
|
'--color-warning-700': '254 205 170', |
||||||
|
'--color-warning-800': '255 231 213', |
||||||
|
'--color-warning-900': '255 244 237', |
||||||
|
'--color-warning-950': '255 249 245', |
||||||
|
|
||||||
|
/* Info */ |
||||||
|
'--color-info-0': '3 38 56', |
||||||
|
'--color-info-50': '5 64 93', |
||||||
|
'--color-info-100': '7 90 131', |
||||||
|
'--color-info-200': '9 115 168', |
||||||
|
'--color-info-300': '11 141 205', |
||||||
|
'--color-info-400': '13 166 242', |
||||||
|
'--color-info-500': '50 180 244', |
||||||
|
'--color-info-600': '87 194 246', |
||||||
|
'--color-info-700': '124 207 248', |
||||||
|
'--color-info-800': '162 221 250', |
||||||
|
'--color-info-900': '199 235 252', |
||||||
|
'--color-info-950': '236 248 254', |
||||||
|
|
||||||
|
/* Typography */ |
||||||
|
'--color-typography-0': '23 23 23', |
||||||
|
'--color-typography-50': '38 38 39', |
||||||
|
'--color-typography-100': '64 64 64', |
||||||
|
'--color-typography-200': '82 82 82', |
||||||
|
'--color-typography-300': '115 115 115', |
||||||
|
'--color-typography-400': '140 140 140', |
||||||
|
'--color-typography-500': '163 163 163', |
||||||
|
'--color-typography-600': '212 212 212', |
||||||
|
'--color-typography-700': '219 219 220', |
||||||
|
'--color-typography-800': '229 229 229', |
||||||
|
'--color-typography-900': '245 245 245', |
||||||
|
'--color-typography-950': '254 254 255', |
||||||
|
|
||||||
|
/* Outline */ |
||||||
|
'--color-outline-0': '26 23 23', |
||||||
|
'--color-outline-50': '39 38 36', |
||||||
|
'--color-outline-100': '65 65 65', |
||||||
|
'--color-outline-200': '83 82 82', |
||||||
|
'--color-outline-300': '115 116 116', |
||||||
|
'--color-outline-400': '140 141 141', |
||||||
|
'--color-outline-500': '165 163 163', |
||||||
|
'--color-outline-600': '211 211 211', |
||||||
|
'--color-outline-700': '221 220 219', |
||||||
|
'--color-outline-800': '230 230 230', |
||||||
|
'--color-outline-900': '243 243 243', |
||||||
|
'--color-outline-950': '253 254 254', |
||||||
|
|
||||||
|
/* Background */ |
||||||
|
'--color-background-0': '18 18 18', |
||||||
|
'--color-background-50': '39 38 37', |
||||||
|
'--color-background-100': '65 64 64', |
||||||
|
'--color-background-200': '83 82 82', |
||||||
|
'--color-background-300': '116 116 116', |
||||||
|
'--color-background-400': '142 142 142', |
||||||
|
'--color-background-500': '162 163 163', |
||||||
|
'--color-background-600': '213 212 212', |
||||||
|
'--color-background-700': '229 228 228', |
||||||
|
'--color-background-800': '242 241 241', |
||||||
|
'--color-background-900': '246 246 246', |
||||||
|
'--color-background-950': '255 255 255', |
||||||
|
|
||||||
|
/* Background Special */ |
||||||
|
'--color-background-error': '66 43 43', |
||||||
|
'--color-background-warning': '65 47 35', |
||||||
|
'--color-background-success': '28 43 33', |
||||||
|
'--color-background-muted': '51 51 51', |
||||||
|
'--color-background-info': '26 40 46', |
||||||
|
|
||||||
|
/* Focus Ring Indicator */ |
||||||
|
'--color-indicator-primary': '247 247 247', |
||||||
|
'--color-indicator-info': '161 199 245', |
||||||
|
'--color-indicator-error': '232 70 69', |
||||||
|
}), |
||||||
|
}; |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
// This is a Next.js 15 compatible version of the GluestackUIProvider
|
||||||
|
'use client'; |
||||||
|
import React, { useEffect, useLayoutEffect } from 'react'; |
||||||
|
import { config } from './config'; |
||||||
|
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; |
||||||
|
import { ToastProvider } from '@gluestack-ui/core/toast/creator'; |
||||||
|
import { setFlushStyles } from '@gluestack-ui/utils/nativewind-utils'; |
||||||
|
import { script } from './script'; |
||||||
|
|
||||||
|
const variableStyleTagId = 'nativewind-style'; |
||||||
|
const createStyle = (styleTagId: string) => { |
||||||
|
const style = document.createElement('style'); |
||||||
|
style.id = styleTagId; |
||||||
|
style.appendChild(document.createTextNode('')); |
||||||
|
return style; |
||||||
|
}; |
||||||
|
|
||||||
|
export const useSafeLayoutEffect = |
||||||
|
typeof window !== 'undefined' ? useLayoutEffect : useEffect; |
||||||
|
|
||||||
|
export function GluestackUIProvider({ |
||||||
|
mode = 'light', |
||||||
|
...props |
||||||
|
}: { |
||||||
|
mode?: 'light' | 'dark' | 'system'; |
||||||
|
children?: React.ReactNode; |
||||||
|
}) { |
||||||
|
let cssVariablesWithMode = ``; |
||||||
|
Object.keys(config).forEach((configKey) => { |
||||||
|
cssVariablesWithMode += |
||||||
|
configKey === 'dark' ? `\n .dark {\n ` : `\n:root {\n`; |
||||||
|
const cssVariables = Object.keys( |
||||||
|
config[configKey as keyof typeof config] |
||||||
|
).reduce((acc: string, curr: string) => { |
||||||
|
acc += `${curr}:${config[configKey as keyof typeof config][curr]}; `; |
||||||
|
return acc; |
||||||
|
}, ''); |
||||||
|
cssVariablesWithMode += `${cssVariables} \n}`; |
||||||
|
}); |
||||||
|
|
||||||
|
setFlushStyles(cssVariablesWithMode); |
||||||
|
|
||||||
|
const handleMediaQuery = React.useCallback((e: MediaQueryListEvent) => { |
||||||
|
script(e.matches ? 'dark' : 'light'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (mode !== 'system') { |
||||||
|
const documentElement = document.documentElement; |
||||||
|
if (documentElement) { |
||||||
|
documentElement.classList.add(mode); |
||||||
|
documentElement.classList.remove(mode === 'light' ? 'dark' : 'light'); |
||||||
|
documentElement.style.colorScheme = mode; |
||||||
|
} |
||||||
|
} |
||||||
|
}, [mode]); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (mode !== 'system') return; |
||||||
|
const media = window.matchMedia('(prefers-color-scheme: dark)'); |
||||||
|
|
||||||
|
media.addListener(handleMediaQuery); |
||||||
|
|
||||||
|
return () => media.removeListener(handleMediaQuery); |
||||||
|
}, [handleMediaQuery]); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (typeof window !== 'undefined') { |
||||||
|
const documentElement = document.documentElement; |
||||||
|
if (documentElement) { |
||||||
|
const head = documentElement.querySelector('head'); |
||||||
|
let style = head?.querySelector(`[id='${variableStyleTagId}']`); |
||||||
|
if (!style) { |
||||||
|
style = createStyle(variableStyleTagId); |
||||||
|
style.innerHTML = cssVariablesWithMode; |
||||||
|
if (head) head.appendChild(style); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<OverlayProvider> |
||||||
|
<ToastProvider>{props.children}</ToastProvider> |
||||||
|
</OverlayProvider> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import React, { useEffect } from 'react'; |
||||||
|
import { config } from './config'; |
||||||
|
import { View, ViewProps } from 'react-native'; |
||||||
|
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; |
||||||
|
import { ToastProvider } from '@gluestack-ui/core/toast/creator'; |
||||||
|
import { useColorScheme } from 'nativewind'; |
||||||
|
|
||||||
|
export type ModeType = 'light' | 'dark' | 'system'; |
||||||
|
|
||||||
|
export function GluestackUIProvider({ |
||||||
|
mode = 'light', |
||||||
|
...props |
||||||
|
}: { |
||||||
|
mode?: ModeType; |
||||||
|
children?: React.ReactNode; |
||||||
|
style?: ViewProps['style']; |
||||||
|
}) { |
||||||
|
const { colorScheme, setColorScheme } = useColorScheme(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setColorScheme(mode); |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [mode]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
config[colorScheme!], |
||||||
|
{ flex: 1, height: '100%', width: '100%' }, |
||||||
|
props.style, |
||||||
|
]} |
||||||
|
> |
||||||
|
<OverlayProvider> |
||||||
|
<ToastProvider>{props.children}</ToastProvider> |
||||||
|
</OverlayProvider> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
'use client'; |
||||||
|
import React, { useEffect, useLayoutEffect } from 'react'; |
||||||
|
import { config } from './config'; |
||||||
|
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'; |
||||||
|
import { ToastProvider } from '@gluestack-ui/core/toast/creator'; |
||||||
|
import { setFlushStyles } from '@gluestack-ui/utils/nativewind-utils'; |
||||||
|
import { script } from './script'; |
||||||
|
|
||||||
|
export type ModeType = 'light' | 'dark' | 'system'; |
||||||
|
|
||||||
|
const variableStyleTagId = 'nativewind-style'; |
||||||
|
const createStyle = (styleTagId: string) => { |
||||||
|
const style = document.createElement('style'); |
||||||
|
style.id = styleTagId; |
||||||
|
style.appendChild(document.createTextNode('')); |
||||||
|
return style; |
||||||
|
}; |
||||||
|
|
||||||
|
export const useSafeLayoutEffect = |
||||||
|
typeof window !== 'undefined' ? useLayoutEffect : useEffect; |
||||||
|
|
||||||
|
export function GluestackUIProvider({ |
||||||
|
mode = 'light', |
||||||
|
...props |
||||||
|
}: { |
||||||
|
mode?: ModeType; |
||||||
|
children?: React.ReactNode; |
||||||
|
}) { |
||||||
|
let cssVariablesWithMode = ``; |
||||||
|
Object.keys(config).forEach((configKey) => { |
||||||
|
cssVariablesWithMode += |
||||||
|
configKey === 'dark' ? `\n .dark {\n ` : `\n:root {\n`; |
||||||
|
const cssVariables = Object.keys( |
||||||
|
config[configKey as keyof typeof config] |
||||||
|
).reduce((acc: string, curr: string) => { |
||||||
|
acc += `${curr}:${config[configKey as keyof typeof config][curr]}; `; |
||||||
|
return acc; |
||||||
|
}, ''); |
||||||
|
cssVariablesWithMode += `${cssVariables} \n}`; |
||||||
|
}); |
||||||
|
|
||||||
|
setFlushStyles(cssVariablesWithMode); |
||||||
|
|
||||||
|
const handleMediaQuery = React.useCallback((e: MediaQueryListEvent) => { |
||||||
|
script(e.matches ? 'dark' : 'light'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (mode !== 'system') { |
||||||
|
const documentElement = document.documentElement; |
||||||
|
if (documentElement) { |
||||||
|
documentElement.classList.add(mode); |
||||||
|
documentElement.classList.remove(mode === 'light' ? 'dark' : 'light'); |
||||||
|
documentElement.style.colorScheme = mode; |
||||||
|
} |
||||||
|
} |
||||||
|
}, [mode]); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (mode !== 'system') return; |
||||||
|
const media = window.matchMedia('(prefers-color-scheme: dark)'); |
||||||
|
|
||||||
|
media.addListener(handleMediaQuery); |
||||||
|
|
||||||
|
return () => media.removeListener(handleMediaQuery); |
||||||
|
}, [handleMediaQuery]); |
||||||
|
|
||||||
|
useSafeLayoutEffect(() => { |
||||||
|
if (typeof window !== 'undefined') { |
||||||
|
const documentElement = document.documentElement; |
||||||
|
if (documentElement) { |
||||||
|
const head = documentElement.querySelector('head'); |
||||||
|
let style = head?.querySelector(`[id='${variableStyleTagId}']`); |
||||||
|
if (!style) { |
||||||
|
style = createStyle(variableStyleTagId); |
||||||
|
style.innerHTML = cssVariablesWithMode; |
||||||
|
if (head) head.appendChild(style); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<script |
||||||
|
suppressHydrationWarning |
||||||
|
dangerouslySetInnerHTML={{ |
||||||
|
__html: `(${script.toString()})('${mode}')`, |
||||||
|
}} |
||||||
|
/> |
||||||
|
<OverlayProvider> |
||||||
|
<ToastProvider>{props.children}</ToastProvider> |
||||||
|
</OverlayProvider> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
export const script = (mode: string) => { |
||||||
|
const documentElement = document.documentElement; |
||||||
|
|
||||||
|
function getSystemColorMode() { |
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches |
||||||
|
? 'dark' |
||||||
|
: 'light'; |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
const isSystem = mode === 'system'; |
||||||
|
const theme = isSystem ? getSystemColorMode() : mode; |
||||||
|
documentElement.classList.remove(theme === 'light' ? 'dark' : 'light'); |
||||||
|
documentElement.classList.add(theme); |
||||||
|
documentElement.style.colorScheme = theme; |
||||||
|
} catch (e) { |
||||||
|
console.error(e); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@tailwind base; |
||||||
|
@tailwind components; |
||||||
|
@tailwind utilities; |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import { registerRootComponent } from 'expo'; |
||||||
|
|
||||||
|
import App from './App'; |
||||||
|
|
||||||
|
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
|
||||||
|
// It also ensures that whether you load the app in Expo Go or in a native build,
|
||||||
|
// the environment is set up appropriately
|
||||||
|
registerRootComponent(App); |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
const { getDefaultConfig } = require('expo/metro-config'); |
||||||
|
const { withNativeWind } = require('nativewind/metro'); |
||||||
|
|
||||||
|
const config = getDefaultConfig(__dirname); |
||||||
|
|
||||||
|
module.exports = withNativeWind(config, { input: './global.css' }); |
||||||
@ -0,0 +1 @@ |
|||||||
|
/// <reference types="nativewind/types" />
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@ |
|||||||
|
{ |
||||||
|
"name": "expo.project", |
||||||
|
"version": "1.0.0", |
||||||
|
"main": "index.ts", |
||||||
|
"scripts": { |
||||||
|
"start": "expo start", |
||||||
|
"android": "expo start --android", |
||||||
|
"ios": "expo start --ios", |
||||||
|
"web": "expo start --web" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@expo/html-elements": "^0.10.1", |
||||||
|
"@gluestack-ui/core": "^3.0.0", |
||||||
|
"@gluestack-ui/utils": "^3.0.0", |
||||||
|
"@legendapp/motion": "^2.3.0", |
||||||
|
"babel-plugin-module-resolver": "^5.0.2", |
||||||
|
"expo": "~53.0.22", |
||||||
|
"expo-status-bar": "~2.2.3", |
||||||
|
"nativewind": "^4.1.23", |
||||||
|
"react": "19.0.0", |
||||||
|
"react-aria": "^3.33.0", |
||||||
|
"react-dom": "^19.1.1", |
||||||
|
"react-native": "0.79.6", |
||||||
|
"react-native-reanimated": "^4.1.0", |
||||||
|
"react-native-safe-area-context": "^4.11.0", |
||||||
|
"react-native-svg": "^15.2.0", |
||||||
|
"react-native-worklets": "^0.5.0", |
||||||
|
"react-stately": "^3.39.0", |
||||||
|
"tailwind-variants": "^0.1.20", |
||||||
|
"tailwindcss": "^3.4.17" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@babel/core": "^7.25.2", |
||||||
|
"@types/react": "~19.0.10", |
||||||
|
"typescript": "~5.8.3" |
||||||
|
}, |
||||||
|
"private": true |
||||||
|
} |
||||||
@ -0,0 +1,206 @@ |
|||||||
|
/** @type {import('tailwindcss').Config} */ |
||||||
|
module.exports = { |
||||||
|
darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'class', |
||||||
|
content: [ |
||||||
|
'./app/**/*.{html,js,jsx,ts,tsx,mdx}', |
||||||
|
'./components/**/*.{html,js,jsx,ts,tsx,mdx}', |
||||||
|
'./utils/**/*.{html,js,jsx,ts,tsx,mdx}', |
||||||
|
'./*.{html,js,jsx,ts,tsx,mdx}', |
||||||
|
'./src/**/*.{html,js,jsx,ts,tsx,mdx}', |
||||||
|
], |
||||||
|
presets: [require('nativewind/preset')], |
||||||
|
important: 'html', |
||||||
|
safelist: [ |
||||||
|
{ |
||||||
|
pattern: |
||||||
|
/(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/, |
||||||
|
}, |
||||||
|
], |
||||||
|
theme: { |
||||||
|
extend: { |
||||||
|
colors: { |
||||||
|
primary: { |
||||||
|
0: 'rgb(var(--color-primary-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-primary-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-primary-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-primary-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-primary-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-primary-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-primary-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-primary-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-primary-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-primary-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-primary-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-primary-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
secondary: { |
||||||
|
0: 'rgb(var(--color-secondary-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-secondary-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-secondary-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-secondary-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-secondary-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-secondary-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-secondary-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-secondary-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-secondary-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-secondary-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-secondary-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-secondary-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
tertiary: { |
||||||
|
50: 'rgb(var(--color-tertiary-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-tertiary-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-tertiary-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-tertiary-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-tertiary-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-tertiary-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-tertiary-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-tertiary-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-tertiary-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-tertiary-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-tertiary-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
error: { |
||||||
|
0: 'rgb(var(--color-error-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-error-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-error-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-error-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-error-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-error-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-error-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-error-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-error-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-error-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-error-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-error-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
success: { |
||||||
|
0: 'rgb(var(--color-success-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-success-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-success-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-success-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-success-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-success-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-success-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-success-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-success-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-success-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-success-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-success-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
warning: { |
||||||
|
0: 'rgb(var(--color-warning-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-warning-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-warning-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-warning-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-warning-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-warning-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-warning-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-warning-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-warning-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-warning-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-warning-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-warning-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
info: { |
||||||
|
0: 'rgb(var(--color-info-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-info-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-info-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-info-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-info-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-info-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-info-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-info-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-info-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-info-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-info-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-info-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
typography: { |
||||||
|
0: 'rgb(var(--color-typography-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-typography-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-typography-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-typography-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-typography-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-typography-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-typography-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-typography-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-typography-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-typography-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-typography-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-typography-950)/<alpha-value>)', |
||||||
|
white: '#FFFFFF', |
||||||
|
gray: '#D4D4D4', |
||||||
|
black: '#181718', |
||||||
|
}, |
||||||
|
outline: { |
||||||
|
0: 'rgb(var(--color-outline-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-outline-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-outline-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-outline-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-outline-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-outline-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-outline-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-outline-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-outline-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-outline-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-outline-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-outline-950)/<alpha-value>)', |
||||||
|
}, |
||||||
|
background: { |
||||||
|
0: 'rgb(var(--color-background-0)/<alpha-value>)', |
||||||
|
50: 'rgb(var(--color-background-50)/<alpha-value>)', |
||||||
|
100: 'rgb(var(--color-background-100)/<alpha-value>)', |
||||||
|
200: 'rgb(var(--color-background-200)/<alpha-value>)', |
||||||
|
300: 'rgb(var(--color-background-300)/<alpha-value>)', |
||||||
|
400: 'rgb(var(--color-background-400)/<alpha-value>)', |
||||||
|
500: 'rgb(var(--color-background-500)/<alpha-value>)', |
||||||
|
600: 'rgb(var(--color-background-600)/<alpha-value>)', |
||||||
|
700: 'rgb(var(--color-background-700)/<alpha-value>)', |
||||||
|
800: 'rgb(var(--color-background-800)/<alpha-value>)', |
||||||
|
900: 'rgb(var(--color-background-900)/<alpha-value>)', |
||||||
|
950: 'rgb(var(--color-background-950)/<alpha-value>)', |
||||||
|
error: 'rgb(var(--color-background-error)/<alpha-value>)', |
||||||
|
warning: 'rgb(var(--color-background-warning)/<alpha-value>)', |
||||||
|
muted: 'rgb(var(--color-background-muted)/<alpha-value>)', |
||||||
|
success: 'rgb(var(--color-background-success)/<alpha-value>)', |
||||||
|
info: 'rgb(var(--color-background-info)/<alpha-value>)', |
||||||
|
light: '#FBFBFB', |
||||||
|
dark: '#181719', |
||||||
|
}, |
||||||
|
indicator: { |
||||||
|
primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)', |
||||||
|
info: 'rgb(var(--color-indicator-info)/<alpha-value>)', |
||||||
|
error: 'rgb(var(--color-indicator-error)/<alpha-value>)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
fontFamily: { |
||||||
|
heading: undefined, |
||||||
|
body: undefined, |
||||||
|
mono: undefined, |
||||||
|
jakarta: ['var(--font-plus-jakarta-sans)'], |
||||||
|
roboto: ['var(--font-roboto)'], |
||||||
|
code: ['var(--font-source-code-pro)'], |
||||||
|
inter: ['var(--font-inter)'], |
||||||
|
'space-mono': ['var(--font-space-mono)'], |
||||||
|
}, |
||||||
|
fontWeight: { |
||||||
|
extrablack: '950', |
||||||
|
}, |
||||||
|
fontSize: { |
||||||
|
'2xs': '10px', |
||||||
|
}, |
||||||
|
boxShadow: { |
||||||
|
'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)', |
||||||
|
'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)', |
||||||
|
'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)', |
||||||
|
'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)', |
||||||
|
'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)', |
||||||
|
'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)', |
||||||
|
'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)', |
||||||
|
'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)', |
||||||
|
'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
{ |
||||||
|
"extends": "expo/tsconfig.base", |
||||||
|
"compilerOptions": { |
||||||
|
"strict": true, |
||||||
|
"paths": { |
||||||
|
"@/*": [ |
||||||
|
"./*" |
||||||
|
], |
||||||
|
"tailwind.config": [ |
||||||
|
"./tailwind.config.js" |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue