feat: setup gluestack
This commit is contained in:
parent
0d226e7aa2
commit
720d1aacd4
176 changed files with 9737 additions and 18 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -33,3 +33,6 @@ yarn-error.*
|
||||||
|
|
||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# envdir
|
||||||
|
.envrc
|
||||||
|
|
|
||||||
38
App.tsx
38
App.tsx
|
|
@ -1,20 +1,28 @@
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { StatusBar, View } from 'react-native';
|
||||||
import { StyleSheet, Text, View } from 'react-native';
|
import { useFonts, Roboto_400Regular, Roboto_700Bold } from '@expo-google-fonts/roboto';
|
||||||
|
import { Center, GluestackUIProvider, Text } from '@gluestack-ui/themed';
|
||||||
|
import { config } from './config/gluestack-ui.config';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
const [fontsLoaded] = useFonts({
|
||||||
|
Roboto_400Regular,
|
||||||
|
Roboto_700Bold,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<GluestackUIProvider config={config}>
|
||||||
<Text>Open up App.tsx to start working on your app!</Text>
|
{fontsLoaded ? (
|
||||||
<StatusBar style="auto" />
|
<Center flex={1} bg="$gray700">
|
||||||
</View>
|
<Text color="white" fontSize={34}>Ignite Gym</Text>
|
||||||
|
</Center>
|
||||||
|
) : (
|
||||||
|
<Text>Loading...</Text>
|
||||||
|
)}
|
||||||
|
<StatusBar
|
||||||
|
barStyle="light-content"
|
||||||
|
backgroundColor="transparent"
|
||||||
|
translucent
|
||||||
|
/>
|
||||||
|
</GluestackUIProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
|
||||||
5
app.json
5
app.json
|
|
@ -22,6 +22,9 @@
|
||||||
},
|
},
|
||||||
"web": {
|
"web": {
|
||||||
"favicon": "./assets/favicon.png"
|
"favicon": "./assets/favicon.png"
|
||||||
}
|
},
|
||||||
|
"plugins": [
|
||||||
|
"expo-font"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
731
config/gluestack-ui.config.ts
Normal file
731
config/gluestack-ui.config.ts
Normal file
|
|
@ -0,0 +1,731 @@
|
||||||
|
import { AnimationResolver } from '@gluestack-style/animation-resolver';
|
||||||
|
import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
|
||||||
|
import { createConfig, createComponents } from '@gluestack-style/react';
|
||||||
|
import * as componentsTheme from './theme';
|
||||||
|
|
||||||
|
export const gluestackUIConfig = createConfig({
|
||||||
|
aliases: {
|
||||||
|
bg: 'backgroundColor',
|
||||||
|
bgColor: 'backgroundColor',
|
||||||
|
h: 'height',
|
||||||
|
w: 'width',
|
||||||
|
p: 'padding',
|
||||||
|
px: 'paddingHorizontal',
|
||||||
|
py: 'paddingVertical',
|
||||||
|
pt: 'paddingTop',
|
||||||
|
pb: 'paddingBottom',
|
||||||
|
pr: 'paddingRight',
|
||||||
|
pl: 'paddingLeft',
|
||||||
|
m: 'margin',
|
||||||
|
mx: 'marginHorizontal',
|
||||||
|
my: 'marginVertical',
|
||||||
|
mt: 'marginTop',
|
||||||
|
mb: 'marginBottom',
|
||||||
|
mr: 'marginRight',
|
||||||
|
ml: 'marginLeft',
|
||||||
|
rounded: 'borderRadius',
|
||||||
|
} as const,
|
||||||
|
tokens: {
|
||||||
|
colors: {
|
||||||
|
rose50: '#fff1f2',
|
||||||
|
rose100: '#ffe4e6',
|
||||||
|
rose200: '#fecdd3',
|
||||||
|
rose300: '#fda4af',
|
||||||
|
rose400: '#fb7185',
|
||||||
|
rose500: '#f43f5e',
|
||||||
|
rose600: '#e11d48',
|
||||||
|
rose700: '#be123c',
|
||||||
|
rose800: '#9f1239',
|
||||||
|
rose900: '#881337',
|
||||||
|
pink50: '#fdf2f8',
|
||||||
|
pink100: '#fce7f3',
|
||||||
|
pink200: '#fbcfe8',
|
||||||
|
pink300: '#f9a8d4',
|
||||||
|
pink400: '#f472b6',
|
||||||
|
pink500: '#ec4899',
|
||||||
|
pink600: '#db2777',
|
||||||
|
pink700: '#be185d',
|
||||||
|
pink800: '#9d174d',
|
||||||
|
pink900: '#831843',
|
||||||
|
fuchsia50: '#fdf4ff',
|
||||||
|
fuchsia100: '#fae8ff',
|
||||||
|
fuchsia200: '#f5d0fe',
|
||||||
|
fuchsia300: '#f0abfc',
|
||||||
|
fuchsia400: '#e879f9',
|
||||||
|
fuchsia500: '#d946ef',
|
||||||
|
fuchsia600: '#c026d3',
|
||||||
|
fuchsia700: '#a21caf',
|
||||||
|
fuchsia800: '#86198f',
|
||||||
|
fuchsia900: '#701a75',
|
||||||
|
purple50: '#faf5ff',
|
||||||
|
purple100: '#f3e8ff',
|
||||||
|
purple200: '#e9d5ff',
|
||||||
|
purple300: '#d8b4fe',
|
||||||
|
purple400: '#c084fc',
|
||||||
|
purple500: '#a855f7',
|
||||||
|
purple600: '#9333ea',
|
||||||
|
purple700: '#7e22ce',
|
||||||
|
purple800: '#6b21a8',
|
||||||
|
purple900: '#581c87',
|
||||||
|
violet50: '#f5f3ff',
|
||||||
|
violet100: '#ede9fe',
|
||||||
|
violet200: '#ddd6fe',
|
||||||
|
violet300: '#c4b5fd',
|
||||||
|
violet400: '#a78bfa',
|
||||||
|
violet500: '#8b5cf6',
|
||||||
|
violet600: '#7c3aed',
|
||||||
|
violet700: '#6d28d9',
|
||||||
|
violet800: '#5b21b6',
|
||||||
|
violet900: '#4c1d95',
|
||||||
|
indigo50: '#eef2ff',
|
||||||
|
indigo100: '#e0e7ff',
|
||||||
|
indigo200: '#c7d2fe',
|
||||||
|
indigo300: '#a5b4fc',
|
||||||
|
indigo400: '#818cf8',
|
||||||
|
indigo500: '#6366f1',
|
||||||
|
indigo600: '#4f46e5',
|
||||||
|
indigo700: '#4338ca',
|
||||||
|
indigo800: '#3730a3',
|
||||||
|
indigo900: '#312e81',
|
||||||
|
blue50: '#eff6ff',
|
||||||
|
blue100: '#dbeafe',
|
||||||
|
blue200: '#bfdbfe',
|
||||||
|
blue300: '#93c5fd',
|
||||||
|
blue400: '#60a5fa',
|
||||||
|
blue500: '#3b82f6',
|
||||||
|
blue600: '#2563eb',
|
||||||
|
blue700: '#1d4ed8',
|
||||||
|
blue800: '#1e40af',
|
||||||
|
blue900: '#1e3a8a',
|
||||||
|
lightBlue50: '#f0f9ff',
|
||||||
|
lightBlue100: '#e0f2fe',
|
||||||
|
lightBlue200: '#bae6fd',
|
||||||
|
lightBlue300: '#7dd3fc',
|
||||||
|
lightBlue400: '#38bdf8',
|
||||||
|
lightBlue500: '#0ea5e9',
|
||||||
|
lightBlue600: '#0284c7',
|
||||||
|
lightBlue700: '#0369a1',
|
||||||
|
lightBlue800: '#075985',
|
||||||
|
lightBlue900: '#0c4a6e',
|
||||||
|
darkBlue50: '#dbf4ff',
|
||||||
|
darkBlue100: '#addbff',
|
||||||
|
darkBlue200: '#7cc2ff',
|
||||||
|
darkBlue300: '#4aa9ff',
|
||||||
|
darkBlue400: '#1a91ff',
|
||||||
|
darkBlue500: '#0077e6',
|
||||||
|
darkBlue600: '#005db4',
|
||||||
|
darkBlue700: '#004282',
|
||||||
|
darkBlue800: '#002851',
|
||||||
|
darkBlue900: '#000e21',
|
||||||
|
cyan50: '#ecfeff',
|
||||||
|
cyan100: '#cffafe',
|
||||||
|
cyan200: '#a5f3fc',
|
||||||
|
cyan300: '#67e8f9',
|
||||||
|
cyan400: '#22d3ee',
|
||||||
|
cyan500: '#06b6d4',
|
||||||
|
cyan600: '#0891b2',
|
||||||
|
cyan700: '#0e7490',
|
||||||
|
cyan800: '#155e75',
|
||||||
|
cyan900: '#164e63',
|
||||||
|
teal50: '#f0fdfa',
|
||||||
|
teal100: '#ccfbf1',
|
||||||
|
teal200: '#99f6e4',
|
||||||
|
teal300: '#5eead4',
|
||||||
|
teal400: '#2dd4bf',
|
||||||
|
teal500: '#14b8a6',
|
||||||
|
teal600: '#0d9488',
|
||||||
|
teal700: '#0f766e',
|
||||||
|
teal800: '#115e59',
|
||||||
|
teal900: '#134e4a',
|
||||||
|
emerald50: '#ecfdf5',
|
||||||
|
emerald100: '#d1fae5',
|
||||||
|
emerald200: '#a7f3d0',
|
||||||
|
emerald300: '#6ee7b7',
|
||||||
|
emerald400: '#34d399',
|
||||||
|
emerald500: '#10b981',
|
||||||
|
emerald600: '#059669',
|
||||||
|
emerald700: '#047857',
|
||||||
|
emerald800: '#065f46',
|
||||||
|
emerald900: '#064e3b',
|
||||||
|
gray100: "#E1E1E6",
|
||||||
|
gray200: "#C4C4CC",
|
||||||
|
gray300: "#7C7C8A",
|
||||||
|
gray400: "#323238",
|
||||||
|
gray500: "#29292E",
|
||||||
|
gray600: "#202024",
|
||||||
|
gray700: "#121214",
|
||||||
|
gray900: "#121214",
|
||||||
|
green50: '#f0fdf4',
|
||||||
|
green100: '#dcfce7',
|
||||||
|
green200: '#bbf7d0',
|
||||||
|
green300: '#86efac',
|
||||||
|
green400: '#4ade80',
|
||||||
|
green500: "#00B37E",
|
||||||
|
green600: "#16a34a",
|
||||||
|
green700: "#00875F",
|
||||||
|
green800: '#166534',
|
||||||
|
green900: '#14532d',
|
||||||
|
lime50: '#f7fee7',
|
||||||
|
lime100: '#ecfccb',
|
||||||
|
lime200: '#d9f99d',
|
||||||
|
lime300: '#bef264',
|
||||||
|
lime400: '#a3e635',
|
||||||
|
lime500: '#84cc16',
|
||||||
|
lime600: '#65a30d',
|
||||||
|
lime700: '#4d7c0f',
|
||||||
|
lime800: '#3f6212',
|
||||||
|
lime900: '#365314',
|
||||||
|
yellow50: '#fefce8',
|
||||||
|
yellow100: '#fef9c3',
|
||||||
|
yellow200: '#fef08a',
|
||||||
|
yellow300: '#fde047',
|
||||||
|
yellow400: '#facc15',
|
||||||
|
yellow500: '#eab308',
|
||||||
|
yellow600: '#ca8a04',
|
||||||
|
yellow700: '#a16207',
|
||||||
|
yellow800: '#854d0e',
|
||||||
|
yellow900: '#713f12',
|
||||||
|
amber50: '#fffbeb',
|
||||||
|
amber100: '#fef3c7',
|
||||||
|
amber200: '#fde68a',
|
||||||
|
amber300: '#fcd34d',
|
||||||
|
amber400: '#fbbf24',
|
||||||
|
amber500: '#f59e0b',
|
||||||
|
amber600: '#d97706',
|
||||||
|
amber700: '#b45309',
|
||||||
|
amber800: '#92400e',
|
||||||
|
amber900: '#78350f',
|
||||||
|
orange50: '#fff7ed',
|
||||||
|
orange100: '#ffedd5',
|
||||||
|
orange200: '#fed7aa',
|
||||||
|
orange300: '#fdba74',
|
||||||
|
orange400: '#fb923c',
|
||||||
|
orange500: '#f97316',
|
||||||
|
orange600: '#ea580c',
|
||||||
|
orange700: '#c2410c',
|
||||||
|
orange800: '#9a3412',
|
||||||
|
orange900: '#7c2d12',
|
||||||
|
red50: '#fef2f2',
|
||||||
|
red100: '#fee2e2',
|
||||||
|
red200: '#fecaca',
|
||||||
|
red300: '#fca5a5',
|
||||||
|
red400: '#f87171',
|
||||||
|
red500: '#F75A68',
|
||||||
|
red600: '#dc2626',
|
||||||
|
red700: '#b91c1c',
|
||||||
|
red800: '#991b1b',
|
||||||
|
red900: '#7f1d1d',
|
||||||
|
warmGray50: '#fafaf9',
|
||||||
|
warmGray100: '#f5f5f4',
|
||||||
|
warmGray200: '#e7e5e4',
|
||||||
|
warmGray300: '#d6d3d1',
|
||||||
|
warmGray400: '#a8a29e',
|
||||||
|
warmGray500: '#78716c',
|
||||||
|
warmGray600: '#57534e',
|
||||||
|
warmGray700: '#44403c',
|
||||||
|
warmGray800: '#292524',
|
||||||
|
warmGray900: '#1c1917',
|
||||||
|
trueGray50: '#fafafa',
|
||||||
|
trueGray100: '#f5f5f5',
|
||||||
|
trueGray200: '#e5e5e5',
|
||||||
|
trueGray300: '#d4d4d4',
|
||||||
|
trueGray400: '#a3a3a3',
|
||||||
|
trueGray500: '#737373',
|
||||||
|
trueGray600: '#525252',
|
||||||
|
trueGray700: '#404040',
|
||||||
|
trueGray800: '#262626',
|
||||||
|
trueGray900: '#171717',
|
||||||
|
coolGray50: '#f9fafb',
|
||||||
|
coolGray100: '#f3f4f6',
|
||||||
|
coolGray200: '#e5e7eb',
|
||||||
|
coolGray300: '#d1d5db',
|
||||||
|
coolGray400: '#9ca3af',
|
||||||
|
coolGray500: '#6b7280',
|
||||||
|
coolGray600: '#4b5563',
|
||||||
|
coolGray700: '#374151',
|
||||||
|
coolGray800: '#1f2937',
|
||||||
|
coolGray900: '#111827',
|
||||||
|
blueGray50: '#f8fafc',
|
||||||
|
blueGray100: '#f1f5f9',
|
||||||
|
blueGray200: '#e2e8f0',
|
||||||
|
blueGray300: '#cbd5e1',
|
||||||
|
blueGray400: '#94a3b8',
|
||||||
|
blueGray500: '#64748b',
|
||||||
|
blueGray600: '#475569',
|
||||||
|
blueGray700: '#334155',
|
||||||
|
blueGray800: '#1e293b',
|
||||||
|
blueGray900: '#0f172a',
|
||||||
|
tertiary50: '#ecfdf5',
|
||||||
|
tertiary100: '#d1fae5',
|
||||||
|
tertiary200: '#a7f3d0',
|
||||||
|
tertiary300: '#6ee7b7',
|
||||||
|
tertiary400: '#34d399',
|
||||||
|
tertiary500: '#10b981',
|
||||||
|
tertiary600: '#059669',
|
||||||
|
tertiary700: '#047857',
|
||||||
|
tertiary800: '#065f46',
|
||||||
|
tertiary900: '#064e3b',
|
||||||
|
error00: '#FEE9E9',
|
||||||
|
error50: '#FEE2E2',
|
||||||
|
error100: '#FECACA',
|
||||||
|
error200: '#FCA5A5',
|
||||||
|
error300: '#F87171',
|
||||||
|
error400: '#EF4444',
|
||||||
|
error500: '#E63535',
|
||||||
|
error600: '#DC2626',
|
||||||
|
error700: '#B91C1C',
|
||||||
|
error800: '#7F1D1D',
|
||||||
|
error900: '#991B1B',
|
||||||
|
error950: '#220808',
|
||||||
|
success0: '#E4FFF4',
|
||||||
|
success50: '#CAFFE8',
|
||||||
|
success100: '#A2F1C0',
|
||||||
|
success200: '#84D3A2',
|
||||||
|
success300: '#66B584',
|
||||||
|
success400: '#489766',
|
||||||
|
success500: '#348352',
|
||||||
|
success600: '#2A7948',
|
||||||
|
success700: '#206F3E',
|
||||||
|
success800: '#166534',
|
||||||
|
success900: '#14532D',
|
||||||
|
success950: '#071F11',
|
||||||
|
warning50: '#fff7ed',
|
||||||
|
warning100: '#ffedd5',
|
||||||
|
warning200: '#fed7aa',
|
||||||
|
warning300: '#fdba74',
|
||||||
|
warning400: '#fb923c',
|
||||||
|
warning500: '#f97316',
|
||||||
|
warning600: '#ea580c',
|
||||||
|
warning700: '#c2410c',
|
||||||
|
warning800: '#9a3412',
|
||||||
|
warning900: '#7c2d12',
|
||||||
|
info50: '#f0f9ff',
|
||||||
|
info100: '#e0f2fe',
|
||||||
|
info200: '#bae6fd',
|
||||||
|
info300: '#7dd3fc',
|
||||||
|
info400: '#38bdf8',
|
||||||
|
info500: '#0ea5e9',
|
||||||
|
info600: '#0284c7',
|
||||||
|
info700: '#0369a1',
|
||||||
|
info800: '#075985',
|
||||||
|
info900: '#0c4a6e',
|
||||||
|
light50: '#fafaf9',
|
||||||
|
light100: '#f5f5f4',
|
||||||
|
light200: '#e7e5e4',
|
||||||
|
light300: '#d6d3d1',
|
||||||
|
light400: '#a8a29e',
|
||||||
|
light500: '#78716c',
|
||||||
|
light600: '#57534e',
|
||||||
|
light700: '#44403c',
|
||||||
|
light800: '#292524',
|
||||||
|
light900: '#1c1917',
|
||||||
|
primary0: '#E5F1FB',
|
||||||
|
primary50: '#CCE9FF',
|
||||||
|
primary100: '#ADDBFF',
|
||||||
|
primary200: '#7CC2FF',
|
||||||
|
primary300: '#4AA9FF',
|
||||||
|
primary400: '#1A91FF',
|
||||||
|
primary500: '#0077E6',
|
||||||
|
primary600: '#005DB4',
|
||||||
|
primary700: '#004282',
|
||||||
|
primary800: '#002851',
|
||||||
|
primary900: '#011838',
|
||||||
|
primary950: '#000711',
|
||||||
|
secondary0: '#F6F6F6',
|
||||||
|
secondary50: '#F3F3F3',
|
||||||
|
secondary100: '#E9E9E9',
|
||||||
|
secondary200: '#DADADA',
|
||||||
|
secondary300: '#B0B0B0',
|
||||||
|
secondary400: '#737373',
|
||||||
|
secondary500: '#5F5F5F',
|
||||||
|
secondary600: '#525252',
|
||||||
|
secondary700: '#404040',
|
||||||
|
secondary800: '#262626',
|
||||||
|
secondary900: '#171717',
|
||||||
|
secondary950: '#0C0C0C',
|
||||||
|
textLight0: '#FCFCFC',
|
||||||
|
textLight50: '#F5F5F5',
|
||||||
|
textLight100: '#E5E5E5',
|
||||||
|
textLight200: '#DBDBDB',
|
||||||
|
textLight300: '#D4D4D4',
|
||||||
|
textLight400: '#A3A3A3',
|
||||||
|
textLight500: '#8C8C8C',
|
||||||
|
textLight600: '#737373',
|
||||||
|
textLight700: '#525252',
|
||||||
|
textLight800: '#404040',
|
||||||
|
textLight900: '#262626',
|
||||||
|
textLight950: '#171717',
|
||||||
|
textDark0: '#FCFCFC',
|
||||||
|
textDark50: '#F5F5F5',
|
||||||
|
textDark100: '#E5E5E5',
|
||||||
|
textDark200: '#DBDBDB',
|
||||||
|
textDark300: '#D4D4D4',
|
||||||
|
textDark400: '#A3A3A3',
|
||||||
|
textDark500: '#8C8C8C',
|
||||||
|
textDark600: '#737373',
|
||||||
|
textDark700: '#525252',
|
||||||
|
textDark800: '#404040',
|
||||||
|
textDark900: '#262626',
|
||||||
|
textDark950: '#171717',
|
||||||
|
borderDark0: '#FCFCFC',
|
||||||
|
borderDark50: '#F5F5F5',
|
||||||
|
borderDark100: '#E5E5E5',
|
||||||
|
borderDark200: '#DBDBDB',
|
||||||
|
borderDark300: '#D4D4D4',
|
||||||
|
borderDark400: '#A3A3A3',
|
||||||
|
borderDark500: '#8C8C8C',
|
||||||
|
borderDark600: '#737373',
|
||||||
|
borderDark700: '#525252',
|
||||||
|
borderDark800: '#404040',
|
||||||
|
borderDark900: '#262626',
|
||||||
|
borderDark950: '#171717',
|
||||||
|
borderLight0: '#FCFCFC',
|
||||||
|
borderLight50: '#F5F5F5',
|
||||||
|
borderLight100: '#E5E5E5',
|
||||||
|
borderLight200: '#DBDBDB',
|
||||||
|
borderLight300: '#D4D4D4',
|
||||||
|
borderLight400: '#A3A3A3',
|
||||||
|
borderLight500: '#8C8C8C',
|
||||||
|
borderLight600: '#737373',
|
||||||
|
borderLight700: '#525252',
|
||||||
|
borderLight800: '#404040',
|
||||||
|
borderLight900: '#262626',
|
||||||
|
borderLight950: '#171717',
|
||||||
|
backgroundDark0: '#FCFCFC',
|
||||||
|
backgroundDark50: '#F5F5F5',
|
||||||
|
backgroundDark100: '#F1F1F1',
|
||||||
|
backgroundDark200: '#DBDBDB',
|
||||||
|
backgroundDark300: '#D4D4D4',
|
||||||
|
backgroundDark400: '#A3A3A3',
|
||||||
|
backgroundDark500: '#8C8C8C',
|
||||||
|
backgroundDark600: '#737373',
|
||||||
|
backgroundDark700: '#525252',
|
||||||
|
backgroundDark800: '#404040',
|
||||||
|
backgroundDark900: '#262626',
|
||||||
|
backgroundDark950: '#171717',
|
||||||
|
backgroundLight0: '#FCFCFC',
|
||||||
|
backgroundLight50: '#F5F5F5',
|
||||||
|
backgroundLight100: '#F1F1F1',
|
||||||
|
backgroundLight200: '#DBDBDB',
|
||||||
|
backgroundLight300: '#D4D4D4',
|
||||||
|
backgroundLight400: '#A3A3A3',
|
||||||
|
backgroundLight500: '#8C8C8C',
|
||||||
|
backgroundLight600: '#737373',
|
||||||
|
backgroundLight700: '#525252',
|
||||||
|
backgroundLight800: '#404040',
|
||||||
|
backgroundLight900: '#262626',
|
||||||
|
backgroundLight950: '#171717',
|
||||||
|
|
||||||
|
backgroundLightError: '#FEF1F1',
|
||||||
|
backgroundDarkError: '#422B2B',
|
||||||
|
backgroundLightWarning: '#FFF4EB',
|
||||||
|
backgroundDarkWarning: '#412F23',
|
||||||
|
backgroundLightSuccess: '#EDFCF2',
|
||||||
|
backgroundDarkSuccess: '#1C2B21',
|
||||||
|
backgroundLightInfo: '#EBF8FE',
|
||||||
|
backgroundDarkInfo: '#1A282E',
|
||||||
|
backgroundLightMuted: '#F6F6F7',
|
||||||
|
backgroundDarkMuted: '#252526',
|
||||||
|
white: '#FFFFFF',
|
||||||
|
black: '#000000',
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
'px': '1px',
|
||||||
|
'0': 0,
|
||||||
|
'0.5': 2,
|
||||||
|
'1': 4,
|
||||||
|
'1.5': 6,
|
||||||
|
'2': 8,
|
||||||
|
'2.5': 10,
|
||||||
|
'3': 12,
|
||||||
|
'3.5': 14,
|
||||||
|
'4': 16,
|
||||||
|
'4.5': 18,
|
||||||
|
'5': 20,
|
||||||
|
'6': 24,
|
||||||
|
'7': 28,
|
||||||
|
'8': 32,
|
||||||
|
'9': 36,
|
||||||
|
'10': 40,
|
||||||
|
'11': 44,
|
||||||
|
'12': 48,
|
||||||
|
'14': 56,
|
||||||
|
'16': 64,
|
||||||
|
'20': 80,
|
||||||
|
'24': 96,
|
||||||
|
'32': 128,
|
||||||
|
'33': 148,
|
||||||
|
'40': 160,
|
||||||
|
'48': 192,
|
||||||
|
'56': 224,
|
||||||
|
'64': 256,
|
||||||
|
'72': 288,
|
||||||
|
'80': 320,
|
||||||
|
'96': 384,
|
||||||
|
'1/2': '50%',
|
||||||
|
'1/3': '33.333%',
|
||||||
|
'2/3': '66.666%',
|
||||||
|
'1/4': '25%',
|
||||||
|
'2/4': '50%',
|
||||||
|
'3/4': '75%',
|
||||||
|
'1/5': '20%',
|
||||||
|
'2/5': '40%',
|
||||||
|
'3/5': '60%',
|
||||||
|
'4/5': '80%',
|
||||||
|
'1/6': '16.666%',
|
||||||
|
'2/6': '33.333%',
|
||||||
|
'3/6': '50%',
|
||||||
|
'4/6': '66.666%',
|
||||||
|
'5/6': '83.333%',
|
||||||
|
'full': '100%',
|
||||||
|
},
|
||||||
|
borderWidths: {
|
||||||
|
'0': 0,
|
||||||
|
'1': 1,
|
||||||
|
'2': 2,
|
||||||
|
'4': 4,
|
||||||
|
'8': 8,
|
||||||
|
},
|
||||||
|
radii: {
|
||||||
|
'none': 0,
|
||||||
|
'xs': 2,
|
||||||
|
'sm': 4,
|
||||||
|
'md': 6,
|
||||||
|
'lg': 8,
|
||||||
|
'xl': 12,
|
||||||
|
'2xl': 16,
|
||||||
|
'3xl': 24,
|
||||||
|
'full': 9999,
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
base: 0,
|
||||||
|
sm: 480,
|
||||||
|
md: 768,
|
||||||
|
lg: 992,
|
||||||
|
xl: 1280,
|
||||||
|
},
|
||||||
|
mediaQueries: {
|
||||||
|
base: '@media screen and (min-width: 0)',
|
||||||
|
xs: '@media screen and (min-width: 400px)',
|
||||||
|
sm: '@media screen and (min-width: 480px)',
|
||||||
|
md: '@media screen and (min-width: 768px)',
|
||||||
|
lg: '@media screen and (min-width: 992px)',
|
||||||
|
xl: '@media screen and (min-width: 1280px)',
|
||||||
|
},
|
||||||
|
letterSpacings: {
|
||||||
|
'xs': -0.4,
|
||||||
|
'sm': -0.2,
|
||||||
|
'md': 0,
|
||||||
|
'lg': 0.2,
|
||||||
|
'xl': 0.4,
|
||||||
|
'2xl': 1.6,
|
||||||
|
},
|
||||||
|
lineHeights: {
|
||||||
|
'2xs': 16,
|
||||||
|
'xs': 18,
|
||||||
|
'sm': 20,
|
||||||
|
'md': 22,
|
||||||
|
'lg': 24,
|
||||||
|
'xl': 28,
|
||||||
|
'2xl': 32,
|
||||||
|
'3xl': 40,
|
||||||
|
'4xl': 48,
|
||||||
|
'5xl': 56,
|
||||||
|
'6xl': 72,
|
||||||
|
'7xl': 90,
|
||||||
|
},
|
||||||
|
fontWeights: {
|
||||||
|
hairline: '100',
|
||||||
|
thin: '200',
|
||||||
|
light: '300',
|
||||||
|
normal: '400',
|
||||||
|
medium: '500',
|
||||||
|
semibold: '600',
|
||||||
|
bold: '700',
|
||||||
|
extrabold: '800',
|
||||||
|
black: '900',
|
||||||
|
extraBlack: '950',
|
||||||
|
},
|
||||||
|
fonts: {
|
||||||
|
heading: 'Roboto_700Bold',
|
||||||
|
body: 'Roboto_400Regular',
|
||||||
|
mono: undefined,
|
||||||
|
},
|
||||||
|
fontSizes: {
|
||||||
|
'2xs': 10,
|
||||||
|
'xs': 12,
|
||||||
|
'sm': 14,
|
||||||
|
'md': 16,
|
||||||
|
'lg': 18,
|
||||||
|
'xl': 20,
|
||||||
|
'2xl': 24,
|
||||||
|
'3xl': 30,
|
||||||
|
'4xl': 36,
|
||||||
|
'5xl': 48,
|
||||||
|
'6xl': 60,
|
||||||
|
'7xl': 72,
|
||||||
|
'8xl': 96,
|
||||||
|
'9xl': 128,
|
||||||
|
},
|
||||||
|
opacity: {
|
||||||
|
0: 0,
|
||||||
|
5: 0.05,
|
||||||
|
10: 0.1,
|
||||||
|
20: 0.2,
|
||||||
|
25: 0.25,
|
||||||
|
30: 0.3,
|
||||||
|
40: 0.4,
|
||||||
|
50: 0.5,
|
||||||
|
60: 0.6,
|
||||||
|
70: 0.7,
|
||||||
|
75: 0.75,
|
||||||
|
80: 0.8,
|
||||||
|
90: 0.9,
|
||||||
|
95: 0.95,
|
||||||
|
100: 1,
|
||||||
|
},
|
||||||
|
} as const,
|
||||||
|
globalStyle: {
|
||||||
|
variants: {
|
||||||
|
hardShadow: {
|
||||||
|
'1': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: -2,
|
||||||
|
height: 2,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
elevation: 10,
|
||||||
|
},
|
||||||
|
'2': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 3,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
elevation: 10,
|
||||||
|
},
|
||||||
|
'3': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 2,
|
||||||
|
height: 2,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
elevation: 10,
|
||||||
|
},
|
||||||
|
'4': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: -3,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
elevation: 10,
|
||||||
|
},
|
||||||
|
// this 5th version is only for toast shadow
|
||||||
|
// temporary
|
||||||
|
'5': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 3,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
elevation: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
softShadow: {
|
||||||
|
'1': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
shadowRadius: 10,
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
_android: {
|
||||||
|
shadowColor: '$backgroundLight500',
|
||||||
|
elevation: 5,
|
||||||
|
shadowOpacity: 0.05,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'2': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
shadowRadius: 20,
|
||||||
|
elevation: 3,
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
_android: {
|
||||||
|
shadowColor: '$backgroundLight500',
|
||||||
|
elevation: 10,
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'3': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
shadowRadius: 30,
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
elevation: 4,
|
||||||
|
_android: {
|
||||||
|
shadowColor: '$backgroundLight500',
|
||||||
|
elevation: 15,
|
||||||
|
shadowOpacity: 0.15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'4': {
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
shadowRadius: 40,
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
elevation: 10,
|
||||||
|
_android: {
|
||||||
|
shadowColor: '$backgroundLight500',
|
||||||
|
elevation: 20,
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [new AnimationResolver(MotionAnimationDriver)],
|
||||||
|
});
|
||||||
|
|
||||||
|
type Config = typeof gluestackUIConfig; // Assuming `config` is defined elsewhere
|
||||||
|
|
||||||
|
type Components = typeof componentsConfig;
|
||||||
|
|
||||||
|
export const componentsConfig = createComponents(componentsTheme);
|
||||||
|
|
||||||
|
export type { UIConfig, UIComponents } from '@gluestack-ui/themed';
|
||||||
|
|
||||||
|
export interface IConfig {}
|
||||||
|
export interface IComponents {}
|
||||||
|
|
||||||
|
declare module '@gluestack-ui/themed' {
|
||||||
|
interface UIConfig extends Omit<Config, keyof IConfig>, IConfig {}
|
||||||
|
interface UIComponents
|
||||||
|
extends Omit<Components, keyof IComponents>,
|
||||||
|
IComponents {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
...gluestackUIConfig,
|
||||||
|
components: componentsConfig,
|
||||||
|
};
|
||||||
112
config/theme/Accordion.ts
Normal file
112
config/theme/Accordion.ts
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Accordion = createStyle({
|
||||||
|
width: '$full',
|
||||||
|
_icon: {
|
||||||
|
color: '$textLight900',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark50',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_titleText: {
|
||||||
|
color: '$textLight900',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark50',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_contentText: {
|
||||||
|
color: '$textLight700',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark200',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
sm: {
|
||||||
|
_titleText: {
|
||||||
|
fontSize: '$sm',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$bold',
|
||||||
|
lineHeight: '$sm',
|
||||||
|
},
|
||||||
|
_contentText: {
|
||||||
|
fontSize: '$sm',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$normal',
|
||||||
|
lineHeight: '$sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
_titleText: {
|
||||||
|
fontSize: '$md',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$bold',
|
||||||
|
lineHeight: '$md',
|
||||||
|
},
|
||||||
|
_contentText: {
|
||||||
|
fontSize: '$md',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$normal',
|
||||||
|
lineHeight: '$md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
_titleText: {
|
||||||
|
fontSize: '$lg',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$bold',
|
||||||
|
lineHeight: '$lg',
|
||||||
|
},
|
||||||
|
_contentText: {
|
||||||
|
fontSize: '$lg',
|
||||||
|
fontFamily: '$body',
|
||||||
|
fontWeight: '$normal',
|
||||||
|
lineHeight: '$lg',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
filled: {
|
||||||
|
backgroundColor: '$white',
|
||||||
|
_item: {
|
||||||
|
backgroundColor: '$backgroundLight0',
|
||||||
|
},
|
||||||
|
shadowColor: '$backgroundLight900',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 3,
|
||||||
|
},
|
||||||
|
shadowRadius: 8,
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
elevation: 10,
|
||||||
|
_dark: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
_item: {
|
||||||
|
backgroundColor: '$backgroundDark950',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unfilled: {
|
||||||
|
shadowColor: 'transparent',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
},
|
||||||
|
_item: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
_item: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
theme: 'light',
|
||||||
|
size: 'md',
|
||||||
|
variant: 'filled',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/AccordionContent.ts
Normal file
7
config/theme/AccordionContent.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionContent = createStyle({
|
||||||
|
px: '$5',
|
||||||
|
mt: '$2',
|
||||||
|
pb: '$5',
|
||||||
|
});
|
||||||
3
config/theme/AccordionContentText.ts
Normal file
3
config/theme/AccordionContentText.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionContentText = createStyle({});
|
||||||
6
config/theme/AccordionHeader.ts
Normal file
6
config/theme/AccordionHeader.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionHeader = createStyle({
|
||||||
|
mx: '$0',
|
||||||
|
my: '$0',
|
||||||
|
});
|
||||||
7
config/theme/AccordionIcon.ts
Normal file
7
config/theme/AccordionIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/AccordionItem.ts
Normal file
3
config/theme/AccordionItem.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionItem = createStyle({});
|
||||||
6
config/theme/AccordionTitleText.ts
Normal file
6
config/theme/AccordionTitleText.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionTitleText = createStyle({
|
||||||
|
flex: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
});
|
||||||
27
config/theme/AccordionTrigger.ts
Normal file
27
config/theme/AccordionTrigger.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AccordionTrigger = createStyle({
|
||||||
|
'width': '$full',
|
||||||
|
'py': '$5',
|
||||||
|
'px': '$5',
|
||||||
|
'flexDirection': 'row',
|
||||||
|
'justifyContent': 'space-between',
|
||||||
|
'alignItems': 'center',
|
||||||
|
'_web': {
|
||||||
|
outlineWidth: 0,
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
_web: {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':focusVisible': {
|
||||||
|
_light: {
|
||||||
|
bg: '$backgroundLight50',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
9
config/theme/Actionsheet.ts
Normal file
9
config/theme/Actionsheet.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Actionsheet = createStyle({
|
||||||
|
width: '$full',
|
||||||
|
height: '$full',
|
||||||
|
_web: {
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
});
|
||||||
28
config/theme/ActionsheetBackdrop.ts
Normal file
28
config/theme/ActionsheetBackdrop.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetBackdrop = createStyle({
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
'position': 'absolute',
|
||||||
|
'left': 0,
|
||||||
|
'top': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0,
|
||||||
|
'bg': '$backgroundLight950',
|
||||||
|
// @ts-ignore
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark950',
|
||||||
|
},
|
||||||
|
// @ts-ignore
|
||||||
|
'_web': {
|
||||||
|
cursor: 'default',
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
},
|
||||||
|
});
|
||||||
26
config/theme/ActionsheetContent.ts
Normal file
26
config/theme/ActionsheetContent.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetContent = createStyle({
|
||||||
|
alignItems: 'center',
|
||||||
|
borderTopLeftRadius: '$3xl',
|
||||||
|
borderTopRightRadius: '$3xl',
|
||||||
|
h: '$full',
|
||||||
|
p: '$2',
|
||||||
|
bg: '$backgroundLight0',
|
||||||
|
_sectionHeaderBackground: {
|
||||||
|
bg: '$backgroundLight0',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
_sectionHeaderBackground: {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
hardShadow: '5',
|
||||||
|
},
|
||||||
|
_web: {
|
||||||
|
userSelect: 'none',
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
},
|
||||||
|
});
|
||||||
11
config/theme/ActionsheetDragIndicator.ts
Normal file
11
config/theme/ActionsheetDragIndicator.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetDragIndicator = createStyle({
|
||||||
|
height: '$1',
|
||||||
|
width: '$16',
|
||||||
|
bg: '$backgroundLight400',
|
||||||
|
rounded: '$full',
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark500',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/ActionsheetFlatList.ts
Normal file
6
config/theme/ActionsheetFlatList.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetFlatList = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: 'auto',
|
||||||
|
});
|
||||||
12
config/theme/ActionsheetIcon.ts
Normal file
12
config/theme/ActionsheetIcon.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
color: '$backgroundLight500',
|
||||||
|
_dark: {
|
||||||
|
//@ts-ignore
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/ActionsheetIndicatorWrapper.ts
Normal file
7
config/theme/ActionsheetIndicatorWrapper.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetIndicatorWrapper = createStyle({
|
||||||
|
py: '$1',
|
||||||
|
w: '$full',
|
||||||
|
alignItems: 'center',
|
||||||
|
});
|
||||||
53
config/theme/ActionsheetItem.ts
Normal file
53
config/theme/ActionsheetItem.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetItem = createStyle({
|
||||||
|
'p': '$3',
|
||||||
|
'flexDirection': 'row',
|
||||||
|
'alignItems': 'center',
|
||||||
|
'rounded': '$sm',
|
||||||
|
'w': '$full',
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
_web: {
|
||||||
|
// @ts-ignore
|
||||||
|
pointerEvents: 'all !important',
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
bg: '$backgroundLight50',
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focus': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
':hover': {
|
||||||
|
bg: '$backgroundDark800',
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focus': {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
':focusVisible': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
12
config/theme/ActionsheetItemText.ts
Normal file
12
config/theme/ActionsheetItemText.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetItemText = createStyle({
|
||||||
|
mx: '$2',
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
color: '$textLight800',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark100',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/ActionsheetScrollView.ts
Normal file
6
config/theme/ActionsheetScrollView.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetScrollView = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: 'auto',
|
||||||
|
});
|
||||||
11
config/theme/ActionsheetSectionHeaderText.ts
Normal file
11
config/theme/ActionsheetSectionHeaderText.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetSectionHeaderText = createStyle({
|
||||||
|
color: '$textLight500',
|
||||||
|
props: { size: 'xs' },
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
p: '$3',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark400',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/ActionsheetSectionList.ts
Normal file
6
config/theme/ActionsheetSectionList.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetSectionList = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: 'auto',
|
||||||
|
});
|
||||||
6
config/theme/ActionsheetVirtualizedList.ts
Normal file
6
config/theme/ActionsheetVirtualizedList.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ActionsheetVirtualizedList = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: 'auto',
|
||||||
|
});
|
||||||
101
config/theme/Alert.ts
Normal file
101
config/theme/Alert.ts
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Alert = createStyle({
|
||||||
|
alignItems: 'center',
|
||||||
|
p: '$3',
|
||||||
|
flexDirection: 'row',
|
||||||
|
borderRadius: '$sm',
|
||||||
|
variants: {
|
||||||
|
action: {
|
||||||
|
error: {
|
||||||
|
bg: '$backgroundLightError',
|
||||||
|
borderColor: '$error300',
|
||||||
|
_icon: {
|
||||||
|
color: '$error500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkError',
|
||||||
|
borderColor: '$error700',
|
||||||
|
_icon: {
|
||||||
|
color: '$error500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
bg: '$backgroundLightWarning',
|
||||||
|
borderColor: '$warning300',
|
||||||
|
_icon: {
|
||||||
|
color: '$warning500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkWarning',
|
||||||
|
borderColor: '$warning700',
|
||||||
|
_icon: {
|
||||||
|
color: '$warning500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
bg: '$backgroundLightSuccess',
|
||||||
|
borderColor: '$success300',
|
||||||
|
_icon: {
|
||||||
|
color: '$success500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkSuccess',
|
||||||
|
borderColor: '$success700',
|
||||||
|
_icon: {
|
||||||
|
color: '$success500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
bg: '$backgroundLightInfo',
|
||||||
|
borderColor: '$info300',
|
||||||
|
_icon: {
|
||||||
|
color: '$info500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkInfo',
|
||||||
|
borderColor: '$info700',
|
||||||
|
_icon: {
|
||||||
|
color: '$info500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
bg: '$backgroundLightMuted',
|
||||||
|
borderColor: '$secondary300',
|
||||||
|
_icon: {
|
||||||
|
color: '$secondary500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkMuted',
|
||||||
|
borderColor: '$secondary700',
|
||||||
|
_icon: {
|
||||||
|
color: '$secondary500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
variant: {
|
||||||
|
solid: {},
|
||||||
|
outline: {
|
||||||
|
borderWidth: '$1',
|
||||||
|
bg: '$white',
|
||||||
|
_dark: {
|
||||||
|
bg: '$black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
borderLeftWidth: '$4',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: {
|
||||||
|
variant: 'solid',
|
||||||
|
action: 'info',
|
||||||
|
},
|
||||||
|
});
|
||||||
23
config/theme/AlertDialog.ts
Normal file
23
config/theme/AlertDialog.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialog = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xs: { _content: { w: '60%', maxWidth: 360 } },
|
||||||
|
sm: { _content: { w: '70%', maxWidth: 420 } },
|
||||||
|
md: { _content: { w: '80%', maxWidth: 510 } },
|
||||||
|
lg: { _content: { w: '90%', maxWidth: 640 } },
|
||||||
|
full: { _content: { w: '$full' } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: { size: 'md' },
|
||||||
|
|
||||||
|
_web: {
|
||||||
|
pointerEvents: 'box-none',
|
||||||
|
},
|
||||||
|
});
|
||||||
36
config/theme/AlertDialogBackdrop.ts
Normal file
36
config/theme/AlertDialogBackdrop.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogBackdrop = createStyle({
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 250,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'position': 'absolute',
|
||||||
|
'left': 0,
|
||||||
|
'top': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0,
|
||||||
|
'bg': '$backgroundLight950',
|
||||||
|
// @ts-ignore
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark950',
|
||||||
|
},
|
||||||
|
// @ts-ignore
|
||||||
|
'_web': {
|
||||||
|
cursor: 'default',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/AlertDialogBody.ts
Normal file
6
config/theme/AlertDialogBody.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogBody = createStyle({
|
||||||
|
px: '$4',
|
||||||
|
py: '$2',
|
||||||
|
});
|
||||||
77
config/theme/AlertDialogCloseButton.ts
Normal file
77
config/theme/AlertDialogCloseButton.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogCloseButton = createStyle({
|
||||||
|
'zIndex': 1,
|
||||||
|
'rounded': '$sm',
|
||||||
|
'p': '$2',
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark200',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight200',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':focusVisible': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
outlineWidth: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
});
|
||||||
37
config/theme/AlertDialogContent.ts
Normal file
37
config/theme/AlertDialogContent.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogContent = createStyle({
|
||||||
|
'bg': '$backgroundLight50',
|
||||||
|
'rounded': '$lg',
|
||||||
|
'overflow': 'hidden',
|
||||||
|
//@ts-ignore
|
||||||
|
':initial': {
|
||||||
|
scale: 0.9,
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
scale: 1,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
scale: 0.9,
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 250,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
'defaultProps': {
|
||||||
|
softShadow: '3',
|
||||||
|
},
|
||||||
|
});
|
||||||
13
config/theme/AlertDialogFooter.ts
Normal file
13
config/theme/AlertDialogFooter.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogFooter = createStyle({
|
||||||
|
p: '$4',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
borderColor: '$borderLight300',
|
||||||
|
_dark: {
|
||||||
|
borderColor: '$borderDark700',
|
||||||
|
},
|
||||||
|
});
|
||||||
12
config/theme/AlertDialogHeader.ts
Normal file
12
config/theme/AlertDialogHeader.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertDialogHeader = createStyle({
|
||||||
|
p: '$4',
|
||||||
|
borderColor: '$borderLight300',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'row',
|
||||||
|
_dark: {
|
||||||
|
borderColor: '$borderDark700',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/AlertIcon.ts
Normal file
7
config/theme/AlertIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
5
config/theme/AlertText.ts
Normal file
5
config/theme/AlertText.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AlertText = createStyle({
|
||||||
|
flex: 1,
|
||||||
|
});
|
||||||
123
config/theme/Avatar.ts
Normal file
123
config/theme/Avatar.ts
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Avatar = createStyle({
|
||||||
|
borderRadius: '$full',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
bg: '$primary600',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'xs': {
|
||||||
|
w: '$6',
|
||||||
|
h: '$6',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$2',
|
||||||
|
h: '$2',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: '2xs' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'sm': {
|
||||||
|
w: '$8',
|
||||||
|
h: '$8',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$2',
|
||||||
|
h: '$2',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: 'xs' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'md': {
|
||||||
|
w: '$12',
|
||||||
|
h: '$12',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$3',
|
||||||
|
h: '$3',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: 'md' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'lg': {
|
||||||
|
w: '$16',
|
||||||
|
h: '$16',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$4',
|
||||||
|
h: '$4',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: 'xl' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'xl': {
|
||||||
|
w: '$24',
|
||||||
|
h: '$24',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$6',
|
||||||
|
h: '$6',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: '3xl' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'2xl': {
|
||||||
|
w: '$32',
|
||||||
|
h: '$32',
|
||||||
|
|
||||||
|
_badge: {
|
||||||
|
w: '$8',
|
||||||
|
h: '$8',
|
||||||
|
},
|
||||||
|
_image: {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
|
||||||
|
_text: {
|
||||||
|
props: { size: '5xl' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
13
config/theme/AvatarBadge.ts
Normal file
13
config/theme/AvatarBadge.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AvatarBadge = createStyle({
|
||||||
|
w: '$5',
|
||||||
|
h: '$5',
|
||||||
|
bg: '$success500',
|
||||||
|
borderRadius: '$full',
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
borderColor: 'white',
|
||||||
|
borderWidth: 2,
|
||||||
|
});
|
||||||
14
config/theme/AvatarFallbackText.ts
Normal file
14
config/theme/AvatarFallbackText.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AvatarFallbackText = createStyle({
|
||||||
|
color: '$textLight0',
|
||||||
|
fontWeight: '$semibold',
|
||||||
|
props: {
|
||||||
|
size: 'xl',
|
||||||
|
},
|
||||||
|
overflow: 'hidden',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
_web: {
|
||||||
|
cursor: 'default',
|
||||||
|
},
|
||||||
|
});
|
||||||
9
config/theme/AvatarGroup.ts
Normal file
9
config/theme/AvatarGroup.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AvatarGroup = createStyle({
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
position: 'relative',
|
||||||
|
_avatar: {
|
||||||
|
ml: -10,
|
||||||
|
},
|
||||||
|
});
|
||||||
8
config/theme/AvatarImage.ts
Normal file
8
config/theme/AvatarImage.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const AvatarImage = createStyle({
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
borderRadius: '$full',
|
||||||
|
position: 'absolute',
|
||||||
|
});
|
||||||
165
config/theme/Badge.ts
Normal file
165
config/theme/Badge.ts
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Badge = createStyle({
|
||||||
|
'flexDirection': 'row',
|
||||||
|
'alignItems': 'center',
|
||||||
|
'borderRadius': '$xs',
|
||||||
|
'variants': {
|
||||||
|
action: {
|
||||||
|
error: {
|
||||||
|
bg: '$backgroundLightError',
|
||||||
|
borderColor: '$error300',
|
||||||
|
_icon: {
|
||||||
|
color: '$error600',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$error600',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkError',
|
||||||
|
borderColor: '$error700',
|
||||||
|
_text: {
|
||||||
|
color: '$error400',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
color: '$error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
bg: '$backgroundLightWarning',
|
||||||
|
borderColor: '$warning300',
|
||||||
|
_icon: {
|
||||||
|
color: '$warning600',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$warning600',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkWarning',
|
||||||
|
borderColor: '$warning700',
|
||||||
|
_text: {
|
||||||
|
color: '$warning400',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
color: '$warning400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
bg: '$backgroundLightSuccess',
|
||||||
|
borderColor: '$success300',
|
||||||
|
_icon: {
|
||||||
|
color: '$success600',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$success600',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkSuccess',
|
||||||
|
borderColor: '$success700',
|
||||||
|
_text: {
|
||||||
|
color: '$success400',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
color: '$success400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
bg: '$backgroundLightInfo',
|
||||||
|
borderColor: '$info300',
|
||||||
|
_icon: {
|
||||||
|
color: '$info600',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$info600',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkInfo',
|
||||||
|
borderColor: '$info700',
|
||||||
|
_text: {
|
||||||
|
color: '$info400',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
color: '$info400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
bg: '$backgroundLightMuted',
|
||||||
|
borderColor: '$secondary300',
|
||||||
|
_icon: {
|
||||||
|
color: '$secondary600',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$secondary600',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDarkMuted',
|
||||||
|
borderColor: '$secondary700',
|
||||||
|
_text: {
|
||||||
|
color: '$secondary400',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
color: '$secondary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
variant: {
|
||||||
|
solid: {},
|
||||||
|
outline: {
|
||||||
|
borderWidth: '$1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
size: {
|
||||||
|
sm: {
|
||||||
|
px: '$2',
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: '2xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
props: {
|
||||||
|
size: '2xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
px: '$2',
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
props: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
px: '$2',
|
||||||
|
_icon: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
'defaultProps': {
|
||||||
|
action: 'info',
|
||||||
|
variant: 'solid',
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/BadgeIcon.ts
Normal file
7
config/theme/BadgeIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const BadgeIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
5
config/theme/BadgeText.ts
Normal file
5
config/theme/BadgeText.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const BadgeText = createStyle({
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
});
|
||||||
3
config/theme/Box.ts
Normal file
3
config/theme/Box.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Box = createStyle({});
|
||||||
1038
config/theme/Button.ts
Normal file
1038
config/theme/Button.ts
Normal file
File diff suppressed because it is too large
Load diff
80
config/theme/ButtonGroup.ts
Normal file
80
config/theme/ButtonGroup.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonGroup = createStyle({
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xs: {
|
||||||
|
_button: {
|
||||||
|
props: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
_button: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
_button: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
_button: {
|
||||||
|
props: {
|
||||||
|
size: 'lg',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xl: {
|
||||||
|
_button: {
|
||||||
|
_button: {
|
||||||
|
props: {
|
||||||
|
size: 'xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
'xs': {
|
||||||
|
gap: '$1',
|
||||||
|
},
|
||||||
|
'sm': {
|
||||||
|
gap: '$2',
|
||||||
|
},
|
||||||
|
'md': {
|
||||||
|
gap: '$3',
|
||||||
|
},
|
||||||
|
'lg': {
|
||||||
|
gap: '$4',
|
||||||
|
},
|
||||||
|
'xl': {
|
||||||
|
gap: '$5',
|
||||||
|
},
|
||||||
|
'2xl': {
|
||||||
|
gap: '$6',
|
||||||
|
},
|
||||||
|
'3xl': {
|
||||||
|
gap: '$7',
|
||||||
|
},
|
||||||
|
'4xl': {
|
||||||
|
gap: '$8',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isAttached: {
|
||||||
|
true: {
|
||||||
|
gap: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
size: 'md',
|
||||||
|
space: 'sm',
|
||||||
|
},
|
||||||
|
});
|
||||||
23
config/theme/ButtonGroupHSpacer.ts
Normal file
23
config/theme/ButtonGroupHSpacer.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonGroupHSpacer = createStyle({
|
||||||
|
variants: {
|
||||||
|
space: {
|
||||||
|
xs: {
|
||||||
|
w: '$1',
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
w: '$1.5',
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
w: '$2',
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
w: '$3',
|
||||||
|
},
|
||||||
|
xl: {
|
||||||
|
w: '$4',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
23
config/theme/ButtonGroupVSpacer.ts
Normal file
23
config/theme/ButtonGroupVSpacer.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonGroupVSpacer = createStyle({
|
||||||
|
variants: {
|
||||||
|
space: {
|
||||||
|
xs: {
|
||||||
|
h: '$1',
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
h: '$1.5',
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
h: '$2',
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
h: '$3',
|
||||||
|
},
|
||||||
|
xl: {
|
||||||
|
h: '$4',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/ButtonIcon.ts
Normal file
7
config/theme/ButtonIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/ButtonSpinner.ts
Normal file
3
config/theme/ButtonSpinner.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonSpinner = createStyle({});
|
||||||
8
config/theme/ButtonText.ts
Normal file
8
config/theme/ButtonText.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ButtonText = createStyle({
|
||||||
|
color: '$textLight0',
|
||||||
|
_web: {
|
||||||
|
userSelect: 'none',
|
||||||
|
},
|
||||||
|
});
|
||||||
57
config/theme/Card.ts
Normal file
57
config/theme/Card.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Card = createStyle({
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
sm: {
|
||||||
|
p: '$3',
|
||||||
|
borderRadius: '$sm',
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
p: '$4',
|
||||||
|
borderRadius: '$md',
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
p: '$6',
|
||||||
|
borderRadius: '$xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
elevated: {
|
||||||
|
bg: '$backgroundLight0',
|
||||||
|
shadowColor: '$backgroundLight800',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 1,
|
||||||
|
},
|
||||||
|
shadowOpacity: 0.22,
|
||||||
|
shadowRadius: 2.22,
|
||||||
|
elevation: 3,
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '$borderLight200',
|
||||||
|
_dark: {
|
||||||
|
borderColor: '$borderDark800',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ghost: {
|
||||||
|
borderRadius: 'none',
|
||||||
|
},
|
||||||
|
filled: {
|
||||||
|
bg: '$backgroundLight50',
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
theme: 'light',
|
||||||
|
size: 'md',
|
||||||
|
variant: 'elevated',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/Center.ts
Normal file
6
config/theme/Center.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Center = createStyle({
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
});
|
||||||
79
config/theme/Checkbox.ts
Normal file
79
config/theme/Checkbox.ts
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Checkbox = createStyle({
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
lg: {
|
||||||
|
_text: {
|
||||||
|
props: {
|
||||||
|
size: 'lg',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_indicator: {
|
||||||
|
borderWidth: 3,
|
||||||
|
h: '$6',
|
||||||
|
w: '$6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
md: {
|
||||||
|
_text: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_indicator: {
|
||||||
|
borderWidth: 2,
|
||||||
|
h: '$5',
|
||||||
|
w: '$5',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
sm: {
|
||||||
|
_text: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: '2xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_indicator: {
|
||||||
|
borderWidth: 2,
|
||||||
|
h: '$4',
|
||||||
|
w: '$4',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
|
||||||
|
_web: {
|
||||||
|
'cursor': 'pointer',
|
||||||
|
':disabled': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/CheckboxGroup.ts
Normal file
3
config/theme/CheckboxGroup.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const CheckboxGroup = createStyle({});
|
||||||
18
config/theme/CheckboxIcon.ts
Normal file
18
config/theme/CheckboxIcon.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const CheckboxIcon = createStyle({
|
||||||
|
':checked': {
|
||||||
|
color: '$backgroundLight0',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
':checked': {
|
||||||
|
color: '$backgroundDark0',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
112
config/theme/CheckboxIndicator.ts
Normal file
112
config/theme/CheckboxIndicator.ts
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const CheckboxIndicator = createStyle({
|
||||||
|
'justifyContent': 'center',
|
||||||
|
'alignItems': 'center',
|
||||||
|
'borderColor': '$borderLight400',
|
||||||
|
'bg': '$transparent',
|
||||||
|
'borderRadius': 4,
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
':focusVisible': {
|
||||||
|
outlineWidth: '2px',
|
||||||
|
outlineColor: '$primary700',
|
||||||
|
outlineStyle: 'solid',
|
||||||
|
_dark: {
|
||||||
|
outlineColor: '$primary300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':checked': {
|
||||||
|
borderColor: '$primary600',
|
||||||
|
bg: '$primary600',
|
||||||
|
},
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
'borderColor': '$borderLight500',
|
||||||
|
'bg': 'transparent',
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
':checked': {
|
||||||
|
'bg': '$primary700',
|
||||||
|
'borderColor': '$primary700',
|
||||||
|
':disabled': {
|
||||||
|
'borderColor': '$primary600',
|
||||||
|
'bg': '$primary600',
|
||||||
|
'opacity': 0.4,
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
'borderColor': '$borderLight400',
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
':checked': {
|
||||||
|
bg: '$primary800',
|
||||||
|
borderColor: '$primary800',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'borderColor': '$borderDark500',
|
||||||
|
'bg': '$transparent',
|
||||||
|
|
||||||
|
':checked': {
|
||||||
|
borderColor: '$primary500',
|
||||||
|
bg: '$primary500',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
'borderColor': '$borderDark400',
|
||||||
|
'bg': 'transparent',
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
':checked': {
|
||||||
|
'bg': '$primary400',
|
||||||
|
'borderColor': '$primary400',
|
||||||
|
':disabled': {
|
||||||
|
'borderColor': '$primary500',
|
||||||
|
'bg': '$primary500',
|
||||||
|
'opacity': 0.4,
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
'borderColor': '$borderDark500',
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
':checked': {
|
||||||
|
bg: '$primary300',
|
||||||
|
borderColor: '$primary300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':invalid': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
64
config/theme/CheckboxLabel.ts
Normal file
64
config/theme/CheckboxLabel.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const CheckboxLabel = createStyle({
|
||||||
|
'color': '$textLight600',
|
||||||
|
':checked': {
|
||||||
|
color: '$textLight900',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
'color': '$textLight900',
|
||||||
|
':checked': {
|
||||||
|
'color': '$textLight900',
|
||||||
|
':disabled': {
|
||||||
|
color: '$textLight900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
color: '$textLight600',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
'color': '$textLight900',
|
||||||
|
|
||||||
|
':checked': {
|
||||||
|
color: '$textLight900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
MozUserSelect: 'none',
|
||||||
|
WebkitUserSelect: 'none',
|
||||||
|
msUserSelect: 'none',
|
||||||
|
userSelect: 'none',
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
'color': '$textDark400',
|
||||||
|
':checked': {
|
||||||
|
color: '$textDark100',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
'color': '$textDark100',
|
||||||
|
':checked': {
|
||||||
|
'color': '$textDark100',
|
||||||
|
':disabled': {
|
||||||
|
color: '$textDark100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
color: '$textDark100',
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
'color': '$textDark100',
|
||||||
|
|
||||||
|
':checked': {
|
||||||
|
color: '$textDark100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
23
config/theme/Divider.ts
Normal file
23
config/theme/Divider.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Divider = createStyle({
|
||||||
|
bg: '$backgroundLight200',
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundLight800',
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
orientation: {
|
||||||
|
vertical: {
|
||||||
|
width: '$px',
|
||||||
|
height: '$full',
|
||||||
|
},
|
||||||
|
horizontal: {
|
||||||
|
height: '$px',
|
||||||
|
width: '$full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultProps: {
|
||||||
|
orientation: 'horizontal',
|
||||||
|
},
|
||||||
|
});
|
||||||
181
config/theme/Fab.ts
Normal file
181
config/theme/Fab.ts
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Fab = createStyle({
|
||||||
|
'bg': '$primary500',
|
||||||
|
'rounded': '$full',
|
||||||
|
'zIndex': 20,
|
||||||
|
'p': 16,
|
||||||
|
'flexDirection': 'row',
|
||||||
|
|
||||||
|
'alignItems': 'center',
|
||||||
|
'justifyContent': 'center',
|
||||||
|
'position': 'absolute',
|
||||||
|
':hover': {
|
||||||
|
bg: '$primary600',
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
bg: '$primary700',
|
||||||
|
},
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
_web: {
|
||||||
|
// @ts-ignore
|
||||||
|
pointerEvents: 'all !important',
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_text': {
|
||||||
|
color: '$textLight50',
|
||||||
|
fontWeight: '$normal',
|
||||||
|
_dark: {
|
||||||
|
_text: {
|
||||||
|
color: '$textDark50',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_icon': {
|
||||||
|
'color': '$textLight50',
|
||||||
|
':hover': {
|
||||||
|
color: '$textLight0',
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
color: '$textLight0',
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
_icon: {
|
||||||
|
'color': '$textDark0',
|
||||||
|
':hover': {
|
||||||
|
color: '$textDark0',
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
color: '$textDark0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'bg': '$primary400',
|
||||||
|
':hover': {
|
||||||
|
bg: '$primary500',
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
bg: '$primary600',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
_web: {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
':focusVisible': {
|
||||||
|
outlineWidth: 2,
|
||||||
|
outlineColor: '$primary700',
|
||||||
|
outlineStyle: 'solid',
|
||||||
|
_dark: {
|
||||||
|
outlineColor: '$primary300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'variants': {
|
||||||
|
size: {
|
||||||
|
sm: {
|
||||||
|
px: '$2.5',
|
||||||
|
py: '$2.5',
|
||||||
|
_text: {
|
||||||
|
fontSize: '$sm',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
px: '$3',
|
||||||
|
py: '$3',
|
||||||
|
_text: {
|
||||||
|
fontSize: '$md',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
px: '$4',
|
||||||
|
py: '$4',
|
||||||
|
_text: {
|
||||||
|
fontSize: '$lg',
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
placement: {
|
||||||
|
'top right': {
|
||||||
|
top: '$4',
|
||||||
|
right: '$4',
|
||||||
|
},
|
||||||
|
|
||||||
|
'top left': {
|
||||||
|
top: '$4',
|
||||||
|
left: '$4',
|
||||||
|
},
|
||||||
|
|
||||||
|
'bottom right': {
|
||||||
|
bottom: '$4',
|
||||||
|
right: '$4',
|
||||||
|
},
|
||||||
|
|
||||||
|
'bottom left': {
|
||||||
|
bottom: '$4',
|
||||||
|
left: '$4',
|
||||||
|
},
|
||||||
|
|
||||||
|
'top center': {
|
||||||
|
top: '$4',
|
||||||
|
alignSelf: 'center',
|
||||||
|
// TODO: fix this, this is correct way, but React Native doesn't support this on Native
|
||||||
|
// left: '50%',
|
||||||
|
// transform: [
|
||||||
|
// {
|
||||||
|
// // @ts-ignore
|
||||||
|
// translateX: '-50%',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
},
|
||||||
|
|
||||||
|
'bottom center': {
|
||||||
|
bottom: '$4',
|
||||||
|
alignSelf: 'center',
|
||||||
|
// TODO: fix this, this is correct way, but React Native doesn't support this on Native
|
||||||
|
// left: '50%',
|
||||||
|
// transform: [
|
||||||
|
// {
|
||||||
|
// // @ts-ignore
|
||||||
|
// translateX: '-50%',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'defaultProps': {
|
||||||
|
placement: 'bottom right',
|
||||||
|
size: 'md',
|
||||||
|
hardShadow: '2',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/FabIcon.ts
Normal file
7
config/theme/FabIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FabIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
5
config/theme/FabLabel.ts
Normal file
5
config/theme/FabLabel.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FabLabel = createStyle({
|
||||||
|
color: '$textLight50',
|
||||||
|
});
|
||||||
3
config/theme/FlatList.ts
Normal file
3
config/theme/FlatList.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FlatList = createStyle({});
|
||||||
55
config/theme/FormControl.ts
Normal file
55
config/theme/FormControl.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControl = createStyle({
|
||||||
|
flexDirection: 'column',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
sm: {
|
||||||
|
_labelText: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
_labelAstrick: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
_helperText: {
|
||||||
|
props: { size: 'xs' },
|
||||||
|
},
|
||||||
|
_errorText: {
|
||||||
|
props: { size: 'xs' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
_labelText: {
|
||||||
|
props: { size: 'md' },
|
||||||
|
},
|
||||||
|
_labelAstrick: {
|
||||||
|
props: { size: 'md' },
|
||||||
|
},
|
||||||
|
_helperText: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
_errorText: {
|
||||||
|
props: { size: 'sm' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
_labelText: {
|
||||||
|
props: { size: 'lg' },
|
||||||
|
},
|
||||||
|
_labelAstrick: {
|
||||||
|
props: { size: 'lg' },
|
||||||
|
},
|
||||||
|
_helperText: {
|
||||||
|
props: { size: 'md' },
|
||||||
|
},
|
||||||
|
_errorText: {
|
||||||
|
props: { size: 'md' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
9
config/theme/FormControlError.ts
Normal file
9
config/theme/FormControlError.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlError = createStyle({
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
mt: '$1',
|
||||||
|
gap: '$1',
|
||||||
|
});
|
||||||
12
config/theme/FormControlErrorIcon.ts
Normal file
12
config/theme/FormControlErrorIcon.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlErrorIcon = createStyle({
|
||||||
|
color: '$error700',
|
||||||
|
_dark: {
|
||||||
|
//@ts-ignore
|
||||||
|
color: '$error400',
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
});
|
||||||
8
config/theme/FormControlErrorText.ts
Normal file
8
config/theme/FormControlErrorText.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlErrorText = createStyle({
|
||||||
|
color: '$error700',
|
||||||
|
_dark: {
|
||||||
|
color: '$error400',
|
||||||
|
},
|
||||||
|
});
|
||||||
8
config/theme/FormControlHelper.ts
Normal file
8
config/theme/FormControlHelper.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlHelper = createStyle({
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
mt: '$1',
|
||||||
|
});
|
||||||
11
config/theme/FormControlHelperText.ts
Normal file
11
config/theme/FormControlHelperText.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlHelperText = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
color: '$textLight500',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark400',
|
||||||
|
},
|
||||||
|
});
|
||||||
8
config/theme/FormControlLabel.ts
Normal file
8
config/theme/FormControlLabel.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlLabel = createStyle({
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
alignItems: 'center',
|
||||||
|
mb: '$1',
|
||||||
|
});
|
||||||
9
config/theme/FormControlLabelText.ts
Normal file
9
config/theme/FormControlLabelText.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const FormControlLabelText = createStyle({
|
||||||
|
fontWeight: '$medium',
|
||||||
|
color: '$textLight900',
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark50',
|
||||||
|
},
|
||||||
|
});
|
||||||
38
config/theme/HStack.ts
Normal file
38
config/theme/HStack.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const HStack = createStyle({
|
||||||
|
flexDirection: 'row',
|
||||||
|
variants: {
|
||||||
|
space: {
|
||||||
|
'xs': {
|
||||||
|
gap: `$1`,
|
||||||
|
},
|
||||||
|
'sm': {
|
||||||
|
gap: `$2`,
|
||||||
|
},
|
||||||
|
'md': {
|
||||||
|
gap: `$3`,
|
||||||
|
},
|
||||||
|
'lg': {
|
||||||
|
gap: `$4`,
|
||||||
|
},
|
||||||
|
'xl': {
|
||||||
|
gap: `$5`,
|
||||||
|
},
|
||||||
|
'2xl': {
|
||||||
|
gap: `$6`,
|
||||||
|
},
|
||||||
|
'3xl': {
|
||||||
|
gap: `$7`,
|
||||||
|
},
|
||||||
|
'4xl': {
|
||||||
|
gap: `$8`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
reversed: {
|
||||||
|
true: {
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
124
config/theme/Heading.ts
Normal file
124
config/theme/Heading.ts
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
|
||||||
|
|
||||||
|
export const Heading = createStyle({
|
||||||
|
color: '$textLight900',
|
||||||
|
letterSpacing: '$sm',
|
||||||
|
fontWeight: '$bold',
|
||||||
|
fontFamily: '$heading',
|
||||||
|
|
||||||
|
// Overrides expo-html default styling
|
||||||
|
marginVertical: 0,
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark50',
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: {
|
||||||
|
props: {
|
||||||
|
// @ts-ignore
|
||||||
|
numberOfLines: 1,
|
||||||
|
ellipsizeMode: 'tail',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: {
|
||||||
|
fontWeight: '$bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: {
|
||||||
|
textDecorationLine: 'underline',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: {
|
||||||
|
textDecorationLine: 'line-through',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
true: {
|
||||||
|
fontSize: '$xs',
|
||||||
|
lineHeight: '$xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: {
|
||||||
|
fontStyle: 'italic',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: {
|
||||||
|
bg: '$yellow500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'5xl': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H1 },
|
||||||
|
fontSize: '$6xl',
|
||||||
|
lineHeight: '$7xl',
|
||||||
|
},
|
||||||
|
'4xl': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H1 },
|
||||||
|
fontSize: '$5xl',
|
||||||
|
lineHeight: '$6xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'3xl': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H1 },
|
||||||
|
fontSize: '$4xl',
|
||||||
|
lineHeight: '$5xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'2xl': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H2 },
|
||||||
|
fontSize: '$3xl',
|
||||||
|
lineHeight: '$3xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'xl': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H3 },
|
||||||
|
fontSize: '$2xl',
|
||||||
|
lineHeight: '$3xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'lg': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H4 },
|
||||||
|
fontSize: '$xl',
|
||||||
|
lineHeight: '$2xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'md': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H5 },
|
||||||
|
fontSize: '$lg',
|
||||||
|
lineHeight: '$lg',
|
||||||
|
},
|
||||||
|
|
||||||
|
'sm': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H6 },
|
||||||
|
fontSize: '$md',
|
||||||
|
lineHeight: '$lg',
|
||||||
|
},
|
||||||
|
|
||||||
|
'xs': {
|
||||||
|
//@ts-ignore
|
||||||
|
props: { as: H6 },
|
||||||
|
fontSize: '$sm',
|
||||||
|
lineHeight: '$xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: {
|
||||||
|
size: 'lg',
|
||||||
|
},
|
||||||
|
});
|
||||||
76
config/theme/Icon.ts
Normal file
76
config/theme/Icon.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const BaseIcon = createStyle({
|
||||||
|
color: '$backgroundLight800',
|
||||||
|
_dark: {
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'2xs': {
|
||||||
|
h: '$3',
|
||||||
|
w: '$3',
|
||||||
|
props: {
|
||||||
|
// @ts-ignore
|
||||||
|
size: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'xs': {
|
||||||
|
h: '$3.5',
|
||||||
|
w: '$3.5',
|
||||||
|
props: {
|
||||||
|
//@ts-ignore
|
||||||
|
size: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'sm': {
|
||||||
|
h: '$4',
|
||||||
|
w: '$4',
|
||||||
|
props: {
|
||||||
|
//@ts-ignore
|
||||||
|
size: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'md': {
|
||||||
|
h: '$4.5',
|
||||||
|
w: '$4.5',
|
||||||
|
props: {
|
||||||
|
//@ts-ignore
|
||||||
|
size: 18,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'lg': {
|
||||||
|
h: '$5',
|
||||||
|
w: '$5',
|
||||||
|
props: {
|
||||||
|
//@ts-ignore
|
||||||
|
size: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'xl': {
|
||||||
|
h: '$6',
|
||||||
|
w: '$6',
|
||||||
|
props: {
|
||||||
|
//@ts-ignore
|
||||||
|
size: 24,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// defaultProps: {
|
||||||
|
// size: 'md',
|
||||||
|
// },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Icon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
//@ts-ignore
|
||||||
|
fill: 'none',
|
||||||
|
},
|
||||||
|
color: '$backgroundLight800',
|
||||||
|
_dark: {
|
||||||
|
//@ts-ignore
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
});
|
||||||
60
config/theme/Image.ts
Normal file
60
config/theme/Image.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Image = createStyle({
|
||||||
|
maxWidth: '$full',
|
||||||
|
_web: {
|
||||||
|
props: {
|
||||||
|
// set property to revert-layer as RNW always set image height width inline
|
||||||
|
style: {
|
||||||
|
height: 'revert-layer',
|
||||||
|
width: 'revert-layer',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'2xs': {
|
||||||
|
w: '$6',
|
||||||
|
h: '$6',
|
||||||
|
},
|
||||||
|
|
||||||
|
'xs': {
|
||||||
|
w: '$10',
|
||||||
|
h: '$10',
|
||||||
|
},
|
||||||
|
|
||||||
|
'sm': {
|
||||||
|
w: '$16',
|
||||||
|
h: '$16',
|
||||||
|
},
|
||||||
|
|
||||||
|
'md': {
|
||||||
|
w: '$20',
|
||||||
|
h: '$20',
|
||||||
|
},
|
||||||
|
|
||||||
|
'lg': {
|
||||||
|
w: '$24',
|
||||||
|
h: '$24',
|
||||||
|
},
|
||||||
|
|
||||||
|
'xl': {
|
||||||
|
w: '$32',
|
||||||
|
h: '$32',
|
||||||
|
},
|
||||||
|
|
||||||
|
'2xl': {
|
||||||
|
w: '$64',
|
||||||
|
h: '$64',
|
||||||
|
},
|
||||||
|
'full': {
|
||||||
|
w: '$full',
|
||||||
|
h: '$full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/ImageBackground.ts
Normal file
3
config/theme/ImageBackground.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ImageBackground = createStyle({});
|
||||||
352
config/theme/Input.ts
Normal file
352
config/theme/Input.ts
Normal file
|
|
@ -0,0 +1,352 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Input = createStyle({
|
||||||
|
'borderWidth': 1,
|
||||||
|
'borderColor': '$backgroundLight300',
|
||||||
|
'borderRadius': '$sm',
|
||||||
|
'flexDirection': 'row',
|
||||||
|
'overflow': 'hidden',
|
||||||
|
'alignContent': 'center',
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$borderLight400',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$primary700',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$primary700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
'opacity': 0.4,
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$backgroundLight300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_input': {
|
||||||
|
py: 'auto',
|
||||||
|
px: '$3',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
|
||||||
|
'_icon': {
|
||||||
|
color: '$textLight400',
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'borderColor': '$borderDark700',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$borderDark400',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$primary400',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$primary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$borderDark700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'variants': {
|
||||||
|
size: {
|
||||||
|
xl: {
|
||||||
|
h: '$12',
|
||||||
|
_input: {
|
||||||
|
props: {
|
||||||
|
size: 'xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
h: '$11',
|
||||||
|
_input: {
|
||||||
|
props: {
|
||||||
|
size: 'lg',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'lg',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
h: '$10',
|
||||||
|
_input: {
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
h: '$9',
|
||||||
|
_input: {
|
||||||
|
props: {
|
||||||
|
size: 'sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_icon: {
|
||||||
|
props: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
underlined: {
|
||||||
|
'_input': {
|
||||||
|
_web: {
|
||||||
|
outlineWidth: 0,
|
||||||
|
outline: 'none',
|
||||||
|
},
|
||||||
|
px: '$0',
|
||||||
|
},
|
||||||
|
'borderWidth': 0,
|
||||||
|
'borderRadius': 0,
|
||||||
|
'borderBottomWidth': '$1',
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $primary700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderBottomWidth': 2,
|
||||||
|
'borderBottomColor': '$error700',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error700',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error700',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderBottomColor': '$error700',
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $primary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderColor': '$error400',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error400',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderBottomColor': '$error400',
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderBottomColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 -1px 0 0 $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
outline: {
|
||||||
|
'_input': {
|
||||||
|
_web: {
|
||||||
|
outlineWidth: 0,
|
||||||
|
outline: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $primary700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderColor': '$error700',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$error700',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $primary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderColor': '$error400',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$error400',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
rounded: {
|
||||||
|
'borderRadius': 999,
|
||||||
|
'_input': {
|
||||||
|
px: '$4',
|
||||||
|
_web: {
|
||||||
|
outlineWidth: 0,
|
||||||
|
outline: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $primary700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderColor': '$error700',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$error700',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error700',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
':focus': {
|
||||||
|
borderColor: '$primary400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $primary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':invalid': {
|
||||||
|
'borderColor': '$error400',
|
||||||
|
'_web': {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
'borderColor': '$error400',
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
':hover': {
|
||||||
|
borderColor: '$error400',
|
||||||
|
_web: {
|
||||||
|
boxShadow: 'inset 0 0 0 1px $error400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'defaultProps': {
|
||||||
|
size: 'md',
|
||||||
|
variant: 'outline',
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/InputAccessoryView.ts
Normal file
3
config/theme/InputAccessoryView.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const InputAccessoryView = createStyle({});
|
||||||
67
config/theme/InputField.ts
Normal file
67
config/theme/InputField.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const InputField = createStyle({
|
||||||
|
flex: 1,
|
||||||
|
color: '$textLight900',
|
||||||
|
props: {
|
||||||
|
placeholderTextColor: '$textLight500',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
color: '$textDark50',
|
||||||
|
props: {
|
||||||
|
placeholderTextColor: '$textDark400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_web: {
|
||||||
|
'cursor': 'text',
|
||||||
|
':disabled': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'2xs': {
|
||||||
|
fontSize: '$2xs',
|
||||||
|
},
|
||||||
|
'xs': {
|
||||||
|
fontSize: '$xs',
|
||||||
|
},
|
||||||
|
|
||||||
|
'sm': {
|
||||||
|
fontSize: '$sm',
|
||||||
|
},
|
||||||
|
|
||||||
|
'md': {
|
||||||
|
fontSize: '$md',
|
||||||
|
},
|
||||||
|
|
||||||
|
'lg': {
|
||||||
|
fontSize: '$lg',
|
||||||
|
},
|
||||||
|
|
||||||
|
'xl': {
|
||||||
|
fontSize: '$xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'2xl': {
|
||||||
|
fontSize: '$2xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'3xl': {
|
||||||
|
fontSize: '$3xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'4xl': {
|
||||||
|
fontSize: '$4xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'5xl': {
|
||||||
|
fontSize: '$5xl',
|
||||||
|
},
|
||||||
|
|
||||||
|
'6xl': {
|
||||||
|
fontSize: '$6xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/InputIcon.ts
Normal file
7
config/theme/InputIcon.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const InputIcon = createStyle({
|
||||||
|
props: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
11
config/theme/InputSlot.ts
Normal file
11
config/theme/InputSlot.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const InputSlot = createStyle({
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
_web: {
|
||||||
|
':disabled': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/KeyboardAvoidingView.ts
Normal file
3
config/theme/KeyboardAvoidingView.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const KeyboardAvoidingView = createStyle({});
|
||||||
38
config/theme/Link.ts
Normal file
38
config/theme/Link.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Link = createStyle({
|
||||||
|
_web: {
|
||||||
|
'outlineWidth': 0,
|
||||||
|
':disabled': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
':focusVisible': {
|
||||||
|
outlineWidth: 2,
|
||||||
|
outlineColor: '$primary700',
|
||||||
|
outlineStyle: 'solid',
|
||||||
|
_dark: {
|
||||||
|
outlineColor: '$primary400',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
':hover': {
|
||||||
|
color: '$info600',
|
||||||
|
textDecorationLine: 'none',
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
color: '$info700',
|
||||||
|
},
|
||||||
|
':disabled': {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
':hover': {
|
||||||
|
color: '$info400',
|
||||||
|
},
|
||||||
|
':active': {
|
||||||
|
color: '$info300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
9
config/theme/LinkText.ts
Normal file
9
config/theme/LinkText.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const LinkText = createStyle({
|
||||||
|
textDecorationLine: 'underline',
|
||||||
|
color: '$info700',
|
||||||
|
_dark: {
|
||||||
|
color: '$info300',
|
||||||
|
},
|
||||||
|
});
|
||||||
32
config/theme/Menu.ts
Normal file
32
config/theme/Menu.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Menu = createStyle({
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 200,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'minWidth': 200,
|
||||||
|
'py': '$2',
|
||||||
|
'rounded': '$sm',
|
||||||
|
'bg': '$backgroundLight0',
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
'defaultProps': {
|
||||||
|
softShadow: '3',
|
||||||
|
},
|
||||||
|
});
|
||||||
15
config/theme/MenuBackdrop.ts
Normal file
15
config/theme/MenuBackdrop.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const MenuBackdrop = createStyle({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
// use this for when you want to give background colour to backdrop
|
||||||
|
// opacity: 0.5,
|
||||||
|
// bg: '$backgroundLight500',
|
||||||
|
_web: {
|
||||||
|
cursor: 'default',
|
||||||
|
},
|
||||||
|
});
|
||||||
64
config/theme/MenuItem.ts
Normal file
64
config/theme/MenuItem.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const MenuItem = createStyle({
|
||||||
|
'p': '$3',
|
||||||
|
'flexDirection': 'row',
|
||||||
|
'alignItems': 'center',
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
|
||||||
|
':disabled': {
|
||||||
|
'opacity': 0.4,
|
||||||
|
'_web': {
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
':focus': {
|
||||||
|
bg: 'transparent',
|
||||||
|
},
|
||||||
|
'_dark': {
|
||||||
|
':focus': {
|
||||||
|
bg: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
bg: '$backgroundLight200',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focus': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
// @ts-ignore
|
||||||
|
outlineWidth: '$0',
|
||||||
|
outlineStyle: 'none',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focusVisible': {
|
||||||
|
// @ts-ignore
|
||||||
|
outlineWidth: '$0.5',
|
||||||
|
outlineColor: '$primary700',
|
||||||
|
outlineStyle: 'solid',
|
||||||
|
_dark: {
|
||||||
|
outlineColor: '$primary300',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
':hover': {
|
||||||
|
bg: '$backgroundDark800',
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
},
|
||||||
|
|
||||||
|
':focus': {
|
||||||
|
bg: '$backgroundDark800',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'_web': {
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
});
|
||||||
3
config/theme/MenuLabel.ts
Normal file
3
config/theme/MenuLabel.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const MenuLabel = createStyle({});
|
||||||
23
config/theme/Modal.ts
Normal file
23
config/theme/Modal.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Modal = createStyle({
|
||||||
|
width: '$full',
|
||||||
|
height: '$full',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xs: { _content: { width: '60%', maxWidth: 360 } },
|
||||||
|
sm: { _content: { width: '70%', maxWidth: 420 } },
|
||||||
|
md: { _content: { width: '80%', maxWidth: 510 } },
|
||||||
|
lg: { _content: { width: '90%', maxWidth: 640 } },
|
||||||
|
full: { _content: { width: '100%' } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: { size: 'md' },
|
||||||
|
|
||||||
|
_web: {
|
||||||
|
pointerEvents: 'box-none',
|
||||||
|
},
|
||||||
|
});
|
||||||
36
config/theme/ModalBackdrop.ts
Normal file
36
config/theme/ModalBackdrop.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalBackdrop = createStyle({
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 250,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'position': 'absolute',
|
||||||
|
'left': 0,
|
||||||
|
'top': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0,
|
||||||
|
'bg': '$backgroundLight950',
|
||||||
|
// @ts-ignore
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark950',
|
||||||
|
},
|
||||||
|
// @ts-ignore
|
||||||
|
'_web': {
|
||||||
|
cursor: 'default',
|
||||||
|
},
|
||||||
|
});
|
||||||
7
config/theme/ModalBody.ts
Normal file
7
config/theme/ModalBody.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalBody = createStyle({
|
||||||
|
px: '$4',
|
||||||
|
paddingTop: 0,
|
||||||
|
paddingBottom: '$2',
|
||||||
|
});
|
||||||
80
config/theme/ModalCloseButton.ts
Normal file
80
config/theme/ModalCloseButton.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalCloseButton = createStyle({
|
||||||
|
'zIndex': 1,
|
||||||
|
'p': '$2',
|
||||||
|
'rounded': '$sm',
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark200',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundDark200',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark100',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundDark100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':focusVisible': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
outlineWidth: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
});
|
||||||
35
config/theme/ModalContent.ts
Normal file
35
config/theme/ModalContent.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalContent = createStyle({
|
||||||
|
'bg': '$backgroundLight50',
|
||||||
|
'rounded': '$lg',
|
||||||
|
'overflow': 'hidden',
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 250,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// @ts-ignore
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
|
||||||
|
'defaultProps': {
|
||||||
|
softShadow: '3',
|
||||||
|
},
|
||||||
|
});
|
||||||
9
config/theme/ModalFooter.ts
Normal file
9
config/theme/ModalFooter.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalFooter = createStyle({
|
||||||
|
p: '$4',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
});
|
||||||
10
config/theme/ModalHeader.ts
Normal file
10
config/theme/ModalHeader.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const ModalHeader = createStyle({
|
||||||
|
px: '$4',
|
||||||
|
paddingTop: '$4',
|
||||||
|
paddingBottom: '$2',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'row',
|
||||||
|
});
|
||||||
23
config/theme/Popover.ts
Normal file
23
config/theme/Popover.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const Popover = createStyle({
|
||||||
|
width: '$full',
|
||||||
|
height: '$full',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xs: { _content: { width: '60%', maxWidth: 360 } },
|
||||||
|
sm: { _content: { width: '70%', maxWidth: 420 } },
|
||||||
|
md: { _content: { width: '80%', maxWidth: 510 } },
|
||||||
|
lg: { _content: { width: '90%', maxWidth: 640 } },
|
||||||
|
full: { _content: { width: '100%' } },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
defaultProps: { size: 'md' },
|
||||||
|
|
||||||
|
_web: {
|
||||||
|
pointerEvents: 'box-none',
|
||||||
|
},
|
||||||
|
});
|
||||||
27
config/theme/PopoverArrow.ts
Normal file
27
config/theme/PopoverArrow.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const PopoverArrow = createStyle({
|
||||||
|
'bg': '$backgroundLight50',
|
||||||
|
'zIndex': 1,
|
||||||
|
'position': 'absolute',
|
||||||
|
'overflow': 'hidden',
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark900',
|
||||||
|
},
|
||||||
|
'h': '$3.5',
|
||||||
|
'w': '$3.5',
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 250,
|
||||||
|
mass: 0.9,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 50,
|
||||||
|
delay: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'props': {
|
||||||
|
softShadow: '3',
|
||||||
|
},
|
||||||
|
});
|
||||||
36
config/theme/PopoverBackdrop.ts
Normal file
36
config/theme/PopoverBackdrop.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const PopoverBackdrop = createStyle({
|
||||||
|
':initial': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':animate': {
|
||||||
|
opacity: 0.1,
|
||||||
|
},
|
||||||
|
':exit': {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
':transition': {
|
||||||
|
type: 'spring',
|
||||||
|
damping: 18,
|
||||||
|
stiffness: 450,
|
||||||
|
mass: 0.9,
|
||||||
|
opacity: {
|
||||||
|
type: 'timing',
|
||||||
|
duration: 50,
|
||||||
|
delay: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'position': 'absolute',
|
||||||
|
'left': 0,
|
||||||
|
'top': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0,
|
||||||
|
'bg': '$backgroundLight950',
|
||||||
|
'_dark': {
|
||||||
|
bg: '$backgroundDark950',
|
||||||
|
},
|
||||||
|
'_web': {
|
||||||
|
cursor: 'default',
|
||||||
|
},
|
||||||
|
});
|
||||||
6
config/theme/PopoverBody.ts
Normal file
6
config/theme/PopoverBody.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const PopoverBody = createStyle({
|
||||||
|
p: '$4',
|
||||||
|
pt: '$2',
|
||||||
|
});
|
||||||
80
config/theme/PopoverCloseButton.ts
Normal file
80
config/theme/PopoverCloseButton.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { createStyle } from '@gluestack-style/react';
|
||||||
|
|
||||||
|
export const PopoverCloseButton = createStyle({
|
||||||
|
'zIndex': 1,
|
||||||
|
'p': '$2',
|
||||||
|
'rounded': '$sm',
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundLight400',
|
||||||
|
},
|
||||||
|
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_dark': {
|
||||||
|
'_icon': {
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
'_text': {
|
||||||
|
color: '$backgroundDark400',
|
||||||
|
},
|
||||||
|
':hover': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark200',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundDark200',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
':active': {
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundDark100',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundDark100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
':focusVisible': {
|
||||||
|
bg: '$backgroundLight100',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight900',
|
||||||
|
},
|
||||||
|
_dark: {
|
||||||
|
bg: '$backgroundDark700',
|
||||||
|
_icon: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
_text: {
|
||||||
|
color: '$backgroundLight100',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
'_web': {
|
||||||
|
outlineWidth: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
});
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue