added basic and navigation
parent
838095406f
commit
408be36ddf
81
README.md
81
README.md
|
|
@ -1,79 +1,6 @@
|
|||
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
|
||||
## Download debug apk
|
||||
/app/android/app/build/outputs/apk/debug/
|
||||
|
||||
# Getting Started
|
||||
|
||||
>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
|
||||
|
||||
## Step 1: Start the Metro Server
|
||||
|
||||
First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
|
||||
|
||||
To start Metro, run the following command from the _root_ of your React Native project:
|
||||
|
||||
```bash
|
||||
# using npm
|
||||
npm start
|
||||
|
||||
# OR using Yarn
|
||||
yarn start
|
||||
```
|
||||
|
||||
## Step 2: Start your Application
|
||||
|
||||
Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
|
||||
|
||||
### For Android
|
||||
|
||||
```bash
|
||||
# using npm
|
||||
npm run android
|
||||
|
||||
# OR using Yarn
|
||||
yarn android
|
||||
```
|
||||
|
||||
### For iOS
|
||||
|
||||
```bash
|
||||
# using npm
|
||||
npm run ios
|
||||
|
||||
# OR using Yarn
|
||||
yarn ios
|
||||
```
|
||||
|
||||
If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
|
||||
|
||||
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
|
||||
|
||||
## Step 3: Modifying your App
|
||||
|
||||
Now that you have successfully run the app, let's modify it.
|
||||
|
||||
1. Open `App.tsx` in your text editor of choice and edit some lines.
|
||||
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
|
||||
|
||||
For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
|
||||
|
||||
## Congratulations! :tada:
|
||||
|
||||
You've successfully run and modified your React Native App. :partying_face:
|
||||
|
||||
### Now what?
|
||||
|
||||
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
|
||||
- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
|
||||
|
||||
# Troubleshooting
|
||||
|
||||
If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
|
||||
|
||||
# Learn More
|
||||
|
||||
To learn more about React Native, take a look at the following resources:
|
||||
|
||||
- [React Native Website](https://reactnative.dev) - learn more about React Native.
|
||||
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
|
||||
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
|
||||
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
|
||||
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
|
||||
## Simplify imports
|
||||
https://javascript.plainenglish.io/react-native-path-aliasing-with-simplify-your-imports-and-enhance-your-codebase-9897efee96a8
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
import 'react-native';
|
||||
import React from 'react';
|
||||
import App from '../App';
|
||||
import App from '../src/App';
|
||||
|
||||
// Note: import explicitly to use the types shiped with jest.
|
||||
import {it} from '@jest/globals';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
apply plugin: "com.android.application"
|
||||
apply plugin: "com.facebook.react"
|
||||
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
|
||||
|
||||
/**
|
||||
* This is the configuration block to customize your React Native Android app.
|
||||
|
|
|
|||
|
|
@ -5,8 +5,20 @@ import com.facebook.react.ReactActivityDelegate;
|
|||
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
|
||||
import com.facebook.react.defaults.DefaultReactActivityDelegate;
|
||||
|
||||
import android.os.Bundle;
|
||||
|
||||
public class MainActivity extends ReactActivity {
|
||||
|
||||
/**
|
||||
* We override onCreate to pass null to super.onCreate to avoid calling
|
||||
* setContentView. This is because we are using the React Native
|
||||
* root view as the root view for our activity.
|
||||
*/
|
||||
@Override
|
||||
protected void onCreate(Bundle savedInstanceState) {
|
||||
super.onCreate(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the name of the main component registered from JavaScript. This is used to schedule
|
||||
* rendering of the component.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,30 @@
|
|||
module.exports = {
|
||||
presets: ['module:metro-react-native-babel-preset'],
|
||||
plugins: [
|
||||
// ... other configs, if any
|
||||
[
|
||||
'module-resolver',
|
||||
{
|
||||
extensions: ['.ios.js', '.android.js', '.ios.jsx', '.android.jsx', '.js', '.jsx', '.json', '.ts', '.tsx'],
|
||||
root: ['.'],
|
||||
alias: {
|
||||
"@redux": "./src/redux",
|
||||
'@lang': './src/lang',
|
||||
'@pages': './src/pages',
|
||||
'@api': './src/api',
|
||||
'@assets': './src/assets',
|
||||
'@components': './src/components',
|
||||
'@scenes': './src/scenes',
|
||||
'@theme': './src/theme',
|
||||
'@utils': './src/utils',
|
||||
'@navigation': './src/navigation',
|
||||
'@configs': './src/configs',
|
||||
'@helper': './src/helper',
|
||||
'@user': './src/user'
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
// ... other configs, if any
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
declare module "*.gif";
|
||||
declare module "*.jpg";
|
||||
declare module "*.png";
|
||||
2
index.js
2
index.js
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
import {AppRegistry} from 'react-native';
|
||||
import App from './App';
|
||||
import App from './src/App';
|
||||
import {name as appName} from './app.json';
|
||||
|
||||
AppRegistry.registerComponent(appName, () => App);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
|
|
@ -10,8 +10,28 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gluestack-style/react": "^1.0.18",
|
||||
"@gluestack-ui/config": "^1.0.4",
|
||||
"@gluestack-ui/themed": "^1.0.18",
|
||||
"@react-navigation/bottom-tabs": "^6.5.11",
|
||||
"@react-navigation/native": "^6.1.9",
|
||||
"@react-navigation/native-stack": "^6.9.17",
|
||||
"@react-spring/native": "^9.7.3",
|
||||
"@reduxjs/toolkit": "^1.9.7",
|
||||
"@types/react-native-vector-icons": "^6.4.18",
|
||||
"password-quality-calculator": "^1.0.4",
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.72.7"
|
||||
"react-native": "0.72.7",
|
||||
"react-native-encrypted-storage": "^4.0.3",
|
||||
"react-native-linear-gradient": "^2.8.3",
|
||||
"react-native-safe-area-context": "^4.7.4",
|
||||
"react-native-screens": "^3.27.0",
|
||||
"react-native-svg": "^13.4.0",
|
||||
"react-native-user-agent": "^2.3.1",
|
||||
"react-native-vector-icons": "^10.0.2",
|
||||
"react-redux": "^8.1.3",
|
||||
"realm": "^12.3.1",
|
||||
"redux": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
module.exports = {
|
||||
dependencies: {
|
||||
'react-native-vector-icons': {
|
||||
platforms: {
|
||||
ios: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import React, {useEffect, Fragment} from 'react';
|
||||
|
||||
import {View, Text} from 'react-native';
|
||||
import {NavigationContainer} from '@react-navigation/native';
|
||||
|
||||
import {Provider, useSelector} from 'react-redux';
|
||||
import {RootState, store} from '@redux/store';
|
||||
|
||||
import {appStatus} from '@configs/appNonSaveVar';
|
||||
import {appNonSaveVarActions} from '@configs/appNonSaveVarReducer';
|
||||
import {ThemeMode} from '@configs/colors';
|
||||
|
||||
import StartHelper from '@pages/appStart/StartHelper';
|
||||
|
||||
import {GluestackUIProvider} from '@gluestack-ui/themed';
|
||||
|
||||
import configDarkTheme, {ThemeType} from '@configs/colors';
|
||||
import Navigation from '@navigation/navigation';
|
||||
/*
|
||||
function Test() {
|
||||
const lang = useSelector((state: RootState) => state.appVariables.lang);
|
||||
|
||||
return (
|
||||
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
|
||||
<Text style={{color: '#f00'}}>
|
||||
{lang.account.registration.stepTwo.resendError[401]}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
} */
|
||||
|
||||
const App = () => {
|
||||
useEffect(() => {
|
||||
console.log('App opened.');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<OtherProviders />
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const OtherProviders = () => {
|
||||
const globalTheme = useSelector(
|
||||
(state: RootState) => state.appVariables.preferences.theme,
|
||||
);
|
||||
|
||||
const navigationTheme = {
|
||||
dark: globalTheme !== ThemeMode.Light,
|
||||
colors: {
|
||||
primary: '#ff7d4f',
|
||||
background: '#222',
|
||||
card: '#222',
|
||||
text: '#fff',
|
||||
border: '#ff7d4f',
|
||||
notification: '#fff',
|
||||
},
|
||||
};
|
||||
|
||||
const themeConfig: ThemeType = configDarkTheme;
|
||||
|
||||
useEffect(() => {
|
||||
appNonSaveVarActions.setThemeColors(themeConfig.tokens.colors);
|
||||
});
|
||||
|
||||
return (
|
||||
// <NativeBaseProvider theme={theme(globalTheme)}>
|
||||
<NavigationContainer theme={navigationTheme} /*linking={linking}*/>
|
||||
<GluestackUIProvider config={themeConfig}>
|
||||
<MainComponent />
|
||||
</GluestackUIProvider>
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MainComponent = () => {
|
||||
const currentAppStatus = useSelector(
|
||||
(state: RootState) => state.nonSaveVariables.appStatus,
|
||||
);
|
||||
return (
|
||||
<Fragment>
|
||||
<StartHelper />
|
||||
{/*<StatusBar />*/}
|
||||
{currentAppStatus === appStatus.APP_RUNNING ? <Navigation /> : null}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1,33 @@
|
|||
//these variables should not changed by the user and will not be saved in storage
|
||||
|
||||
import {getVersionByNum, VersionType} from '@helper/version';
|
||||
import configDarkTheme, {ThemeColorsType} from '@configs/colors';
|
||||
|
||||
export const APP_VERSION = getVersionByNum(1);
|
||||
export const AppVarMaxBackups: number = 10;
|
||||
|
||||
export enum appStatus {
|
||||
IS_LOADING,
|
||||
APP_RUNNING,
|
||||
}
|
||||
|
||||
export enum connectionStatus {
|
||||
UNKNOWN,
|
||||
OFFLINE,
|
||||
ONLINE,
|
||||
RECONNECTING,
|
||||
}
|
||||
|
||||
export interface NON_SAVE_VARS {
|
||||
currentAppVersion: VersionType;
|
||||
appStatus: appStatus;
|
||||
connectionStatus: connectionStatus;
|
||||
themeColors: ThemeColorsType;
|
||||
}
|
||||
|
||||
export const non_save_vars: NON_SAVE_VARS = {
|
||||
currentAppVersion: APP_VERSION,
|
||||
appStatus: appStatus.IS_LOADING,
|
||||
connectionStatus: connectionStatus.UNKNOWN,
|
||||
themeColors: configDarkTheme.tokens.colors,
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {createSlice} from '@reduxjs/toolkit';
|
||||
import type {PayloadAction} from '@reduxjs/toolkit';
|
||||
|
||||
import {appStatus, non_save_vars} from './appNonSaveVar';
|
||||
|
||||
import {ThemeColorsType} from '@configs/colors';
|
||||
|
||||
export const appNonSaveVariablesSlice = createSlice({
|
||||
name: 'non_save_vars',
|
||||
initialState: non_save_vars,
|
||||
reducers: {
|
||||
setAppStatus: (state, action: PayloadAction<appStatus>) => {
|
||||
state.appStatus = action.payload;
|
||||
},
|
||||
setThemeColors: (state, action: PayloadAction<ThemeColorsType>) => {
|
||||
state.themeColors = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Action creators are generated for each case reducer function
|
||||
const {actions} = appNonSaveVariablesSlice;
|
||||
export const appNonSaveVarActions = actions;
|
||||
|
||||
export default appNonSaveVariablesSlice.reducer;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import {EMail, UserId, XToken} from '@configs/types';
|
||||
import {VersionType} from '@helper/version';
|
||||
import {MyUserAccount} from '@user/types';
|
||||
import {APP_VERSION} from './appNonSaveVar';
|
||||
import {ThemeMode} from './colors';
|
||||
|
||||
export function applyUpdateChanges(appVar: any): Promise<void> {
|
||||
return new Promise<void>(function (resolve, reject) {
|
||||
appVar.version += 1;
|
||||
|
||||
console.log(appVar.version);
|
||||
|
||||
function finish() {
|
||||
resolve();
|
||||
}
|
||||
|
||||
switch (appVar.version) {
|
||||
case 3: {
|
||||
let appVarF = appVar as PREFERENCES_VARS;
|
||||
|
||||
appVar = appVarF;
|
||||
finish();
|
||||
break;
|
||||
}
|
||||
|
||||
case 2: {
|
||||
let appVarF = appVar;
|
||||
|
||||
appVar = appVarF;
|
||||
finish();
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
finish();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//these variables may be changed by the user and will be saved in storage
|
||||
export interface RegisterProcess {
|
||||
isRegistering: false | 'stepTwo' | 'stepFinal';
|
||||
XToken: XToken | undefined;
|
||||
EMail: EMail;
|
||||
}
|
||||
|
||||
export interface PREFERENCES_VARS {
|
||||
version: VersionType;
|
||||
theme: ThemeMode;
|
||||
RegisterProcess: RegisterProcess;
|
||||
selectedAccount: UserId | 'none';
|
||||
accounts: {[key: UserId]: MyUserAccount};
|
||||
}
|
||||
|
||||
export const preferences_vars_default: PREFERENCES_VARS = {
|
||||
version: APP_VERSION, //version of datatypes in storage
|
||||
theme: ThemeMode.Dark,
|
||||
RegisterProcess: {
|
||||
isRegistering: false,
|
||||
XToken: undefined,
|
||||
EMail: '',
|
||||
},
|
||||
selectedAccount: 'none',
|
||||
accounts: {},
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import {createSlice} from '@reduxjs/toolkit';
|
||||
import type {PayloadAction} from '@reduxjs/toolkit';
|
||||
|
||||
import {
|
||||
PREFERENCES_VARS,
|
||||
preferences_vars_default,
|
||||
RegisterProcess,
|
||||
ThemeMode,
|
||||
} from './appVar';
|
||||
import {non_save_vars, NON_SAVE_VARS} from './appNonSaveVar';
|
||||
import LangFormat from '@lang/default';
|
||||
import {lang as defaultLang} from '@lang/en';
|
||||
import { UserId } from './types';
|
||||
import { MyUserAccount } from '@user/types';
|
||||
|
||||
export interface appVariablesState {
|
||||
preferences: PREFERENCES_VARS;
|
||||
lang: LangFormat;
|
||||
}
|
||||
|
||||
const initialState: appVariablesState = {
|
||||
preferences: preferences_vars_default,
|
||||
lang: defaultLang,
|
||||
};
|
||||
|
||||
export const appVariablesSlice = createSlice({
|
||||
name: 'appVariables',
|
||||
initialState,
|
||||
reducers: {
|
||||
setTheme: (state, action: PayloadAction<ThemeMode>) => {
|
||||
state.preferences.theme = action.payload;
|
||||
},
|
||||
setLang: (state, action: PayloadAction<LangFormat>) => {
|
||||
state.lang = action.payload;
|
||||
},
|
||||
loadPreferences: (state, action: PayloadAction<PREFERENCES_VARS>) => {
|
||||
state.preferences = action.payload;
|
||||
},
|
||||
setRegisterProcess: (state, action: PayloadAction<RegisterProcess>) => {
|
||||
state.preferences.RegisterProcess = action.payload;
|
||||
},
|
||||
setCurrentAccount:(state, action: PayloadAction<UserId>) => {
|
||||
state.preferences.selectedAccount = action.payload;
|
||||
},
|
||||
setAccount:(state, action: PayloadAction<MyUserAccount>) => {
|
||||
state.preferences.accounts[action.payload.UserId] = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Action creators are generated for each case reducer function
|
||||
const {actions} = appVariablesSlice;
|
||||
export const appVarActions = actions;
|
||||
|
||||
export default appVariablesSlice.reducer;
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
import {config} from '@configs/gluestack-ui.config'; // default dark theme
|
||||
|
||||
type ThemeType = typeof config;
|
||||
type ThemeColorsType = typeof config.tokens.colors;
|
||||
|
||||
export type {ThemeType, ThemeColorsType};
|
||||
export default config;
|
||||
|
||||
export enum ThemeMode {
|
||||
Dark = 1,
|
||||
Light = 2,
|
||||
}
|
||||
|
||||
/*import {Platform} from 'react-native';
|
||||
import {extendTheme, Theme, useColorMode} from 'native-base';
|
||||
import {ThemeMode} from './appVar';
|
||||
|
||||
import {useSelector} from 'react-redux';
|
||||
import {RootState} from '@redux/store';
|
||||
import {useEffect} from 'react';
|
||||
|
||||
export const theme = (_theme: ThemeMode) => {
|
||||
return extendTheme({
|
||||
config: {
|
||||
// Changing initialColorMode to 'dark'
|
||||
initialColorMode: 'dark',
|
||||
},
|
||||
fonts: {
|
||||
header: 'Outfit-Regular',
|
||||
medium: 'Outfit-Regular',
|
||||
regular: 'Outfit-Regular',
|
||||
semibold: 'Outfit-Regular',
|
||||
},
|
||||
colors: {
|
||||
black: [
|
||||
{
|
||||
// darkest
|
||||
100: '#414755',
|
||||
200: '#313640',
|
||||
300: '#293037',
|
||||
400: '#282e35',
|
||||
500: '#23272e',
|
||||
600: '#1a1d22',
|
||||
700: '#19191e',
|
||||
800: '#101013',
|
||||
900: '#060607',
|
||||
},
|
||||
{
|
||||
//dark
|
||||
100: '#414755',
|
||||
200: '#313640',
|
||||
300: '#293037',
|
||||
400: '#282e35',
|
||||
500: '#23272e',
|
||||
600: '#1a1d22',
|
||||
700: '#19191e',
|
||||
800: '#101013',
|
||||
900: '#060607',
|
||||
},
|
||||
{
|
||||
//light
|
||||
900: '#e9e8f0',
|
||||
800: '#e4e3ec',
|
||||
700: '#dfdde8',
|
||||
600: '#dad8e4',
|
||||
500: '#d7d5e1',
|
||||
400: '#d4d2de',
|
||||
300: '#d2d0db',
|
||||
200: '#cfcdd8',
|
||||
100: '#cdcbd5',
|
||||
},
|
||||
][_theme],
|
||||
blackBG: [
|
||||
{
|
||||
// darkest
|
||||
100: '#000',
|
||||
200: '#000',
|
||||
300: '#000',
|
||||
400: '#000',
|
||||
500: '#000',
|
||||
600: '#000',
|
||||
700: '#000',
|
||||
800: '#000',
|
||||
900: '#000',
|
||||
},
|
||||
{
|
||||
//dark
|
||||
100: '#414755',
|
||||
200: '#313640',
|
||||
300: '#293037',
|
||||
400: '#282e35',
|
||||
500: '#23272e',
|
||||
600: '#1a1d22',
|
||||
700: '#19191e',
|
||||
800: '#101013',
|
||||
900: '#060607',
|
||||
},
|
||||
{
|
||||
//light
|
||||
900: '#e9e8f0',
|
||||
800: '#e4e3ec',
|
||||
700: '#dfdde8',
|
||||
600: '#dad8e4',
|
||||
500: '#d7d5e1',
|
||||
400: '#d4d2de',
|
||||
300: '#d2d0db',
|
||||
200: '#cfcdd8',
|
||||
100: '#cdcbd5',
|
||||
},
|
||||
][_theme],
|
||||
white: [
|
||||
{
|
||||
// darkest
|
||||
100: '#ccc',
|
||||
200: '#ccc',
|
||||
300: '#ccc',
|
||||
400: '#ccc',
|
||||
500: '#ccc',
|
||||
600: '#ccc',
|
||||
700: '#ccc',
|
||||
800: '#ccc',
|
||||
900: '#ccc',
|
||||
},
|
||||
{
|
||||
//dark
|
||||
|
||||
900: '#e9e8f0',
|
||||
800: '#e4e3ec',
|
||||
700: '#dfdde8',
|
||||
600: '#dad8e4',
|
||||
500: '#d7d5e1',
|
||||
400: '#d4d2de',
|
||||
300: '#d2d0db',
|
||||
200: '#cfcdd8',
|
||||
100: '#cdcbd5',
|
||||
},
|
||||
{
|
||||
//light
|
||||
100: '#414755',
|
||||
200: '#313640',
|
||||
300: '#293037',
|
||||
400: '#282e35',
|
||||
500: '#23272e',
|
||||
600: '#1a1d22',
|
||||
700: '#19191e',
|
||||
800: '#101013',
|
||||
900: '#060607',
|
||||
},
|
||||
][_theme],
|
||||
|
||||
primary: {
|
||||
50: '#fff4f1',
|
||||
100: '#ffd6c9',
|
||||
200: '#ffb9a1',
|
||||
300: '#ff9b79',
|
||||
400: '#ff7d4f',
|
||||
500: '#f96e40',
|
||||
600: '#f26030',
|
||||
700: '#e95321',
|
||||
800: '#d54b1d',
|
||||
900: '#ba4721',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Divider: {
|
||||
baseStyle: ({colorMode}) => {
|
||||
return {
|
||||
backgroundColor: colorMode === 'dark' ? 'black.100' : 'black.200',
|
||||
};
|
||||
},
|
||||
},
|
||||
Text: {
|
||||
defaultProps: {
|
||||
size: 'md',
|
||||
fontFamily: 'Outfit-Regular',
|
||||
colorScheme: 'black',
|
||||
},
|
||||
sizes: {
|
||||
xl: {
|
||||
fontSize: '64px',
|
||||
},
|
||||
lg: {
|
||||
fontSize: '32px',
|
||||
},
|
||||
md: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
sm: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
},
|
||||
Button: {
|
||||
// Can simply pass default props to change default behaviour of components.
|
||||
baseStyle: {
|
||||
rounded: 'md',
|
||||
},
|
||||
defaultProps: {
|
||||
colorScheme: 'primary',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export function getBackgroundColor(tm: ThemeMode): string {
|
||||
switch (tm) {
|
||||
case ThemeMode.Light:
|
||||
return '#fff';
|
||||
case ThemeMode.Darkest:
|
||||
return '#000';
|
||||
default:
|
||||
return '#1b1c22';
|
||||
}
|
||||
}
|
||||
|
||||
export function isThemeDark(tm: ThemeMode): boolean {
|
||||
return tm <= 1;
|
||||
}
|
||||
|
||||
export function ThemeSwitcher() {
|
||||
const myTheme = useSelector(
|
||||
(state: RootState) => state.appVariables.preferences.theme,
|
||||
);
|
||||
const {setColorMode} = useColorMode();
|
||||
|
||||
useEffect(() => {
|
||||
if (myTheme === ThemeMode.Darkest || myTheme === ThemeMode.Dark)
|
||||
setColorMode('dark');
|
||||
else setColorMode('light');
|
||||
|
||||
if (Platform.OS === 'web') {
|
||||
document.body.setAttribute(
|
||||
'style',
|
||||
'background: ' + getBackgroundColor(myTheme) + ';',
|
||||
);
|
||||
}
|
||||
|
||||
console.log('refreshed');
|
||||
}, [myTheme]);
|
||||
|
||||
return null;
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,721 @@
|
|||
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',
|
||||
green50: '#f0fdf4',
|
||||
green100: '#dcfce7',
|
||||
green200: '#bbf7d0',
|
||||
green300: '#86efac',
|
||||
green400: '#4ade80',
|
||||
green500: '#22c55e',
|
||||
green600: '#16a34a',
|
||||
green700: '#15803d',
|
||||
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: '#ef4444',
|
||||
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,
|
||||
'16': 64,
|
||||
'20': 80,
|
||||
'24': 96,
|
||||
'32': 128,
|
||||
'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: undefined,
|
||||
body: undefined,
|
||||
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,
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const Actionsheet = createStyle({
|
||||
width: '$full',
|
||||
height: '$full',
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
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',
|
||||
},
|
||||
},
|
||||
userSelect: 'none',
|
||||
defaultProps: {
|
||||
hardShadow: '5',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetFlatList = createStyle({
|
||||
w: '$full',
|
||||
h: 'auto',
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetIcon = createStyle({
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
color: '$backgroundLight500',
|
||||
_dark: {
|
||||
//@ts-ignore
|
||||
color: '$backgroundDark400',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetIndicatorWrapper = createStyle({
|
||||
py: '$1',
|
||||
w: '$full',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetItemText = createStyle({
|
||||
mx: '$2',
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
color: '$textLight800',
|
||||
_dark: {
|
||||
color: '$textDark100',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetScrollView = createStyle({
|
||||
w: '$full',
|
||||
h: 'auto',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetSectionList = createStyle({
|
||||
w: '$full',
|
||||
h: 'auto',
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ActionsheetVirtualizedList = createStyle({
|
||||
w: '$full',
|
||||
h: 'auto',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const AlertDialogBody = createStyle({
|
||||
px: '$4',
|
||||
py: '$2',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const AlertIcon = createStyle({
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const AlertText = createStyle({
|
||||
flex: 1,
|
||||
});
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
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',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: '2xs' },
|
||||
},
|
||||
},
|
||||
|
||||
'sm': {
|
||||
w: '$8',
|
||||
h: '$8',
|
||||
|
||||
_badge: {
|
||||
w: '$2',
|
||||
h: '$2',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: 'xs' },
|
||||
},
|
||||
},
|
||||
|
||||
'md': {
|
||||
w: '$12',
|
||||
h: '$12',
|
||||
|
||||
_badge: {
|
||||
w: '$3',
|
||||
h: '$3',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: 'md' },
|
||||
},
|
||||
},
|
||||
|
||||
'lg': {
|
||||
w: '$16',
|
||||
h: '$16',
|
||||
|
||||
_badge: {
|
||||
w: '$4',
|
||||
h: '$4',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: 'xl' },
|
||||
},
|
||||
},
|
||||
|
||||
'xl': {
|
||||
w: '$24',
|
||||
h: '$24',
|
||||
|
||||
_badge: {
|
||||
w: '$6',
|
||||
h: '$6',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: '3xl' },
|
||||
},
|
||||
},
|
||||
|
||||
'2xl': {
|
||||
w: '$32',
|
||||
h: '$32',
|
||||
|
||||
_badge: {
|
||||
w: '$8',
|
||||
h: '$8',
|
||||
},
|
||||
|
||||
_text: {
|
||||
props: { size: '5xl' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultProps: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -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,
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const AvatarGroup = createStyle({
|
||||
flexDirection: 'row-reverse',
|
||||
position: 'relative',
|
||||
_avatar: {
|
||||
ml: -10,
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const AvatarImage = createStyle({
|
||||
w: '$full',
|
||||
h: '$full',
|
||||
borderRadius: '$full',
|
||||
position: 'absolute',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const BadgeIcon = createStyle({
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const BadgeText = createStyle({
|
||||
textTransform: 'uppercase',
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const Box = createStyle({});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ButtonIcon = createStyle({
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ButtonSpinner = createStyle({});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ButtonText = createStyle({
|
||||
color: '$textLight0',
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const Center = createStyle({
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const CheckboxGroup = createStyle({});
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FabIcon = createStyle({
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FabLabel = createStyle({
|
||||
color: '$textLight50',
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FlatList = createStyle({});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlErrorIcon = createStyle({
|
||||
color: '$error700',
|
||||
_dark: {
|
||||
//@ts-ignore
|
||||
color: '$error400',
|
||||
},
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlErrorText = createStyle({
|
||||
color: '$error700',
|
||||
_dark: {
|
||||
color: '$error400',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlHelper = createStyle({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
mt: '$1',
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlHelperText = createStyle({
|
||||
props: {
|
||||
size: 'xs',
|
||||
},
|
||||
color: '$textLight500',
|
||||
_dark: {
|
||||
color: '$textDark400',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlLabel = createStyle({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
mb: '$1',
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const FormControlLabelText = createStyle({
|
||||
fontWeight: '$medium',
|
||||
color: '$textLight900',
|
||||
_dark: {
|
||||
color: '$textDark50',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const Image = createStyle({
|
||||
maxWidth: '$full',
|
||||
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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
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',
|
||||
},
|
||||
|
||||
'_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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
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',
|
||||
lineHeight: '$2xs',
|
||||
},
|
||||
'xs': {
|
||||
fontSize: '$xs',
|
||||
lineHeight: '$sm',
|
||||
},
|
||||
|
||||
'sm': {
|
||||
fontSize: '$sm',
|
||||
lineHeight: '$sm',
|
||||
},
|
||||
|
||||
'md': {
|
||||
fontSize: '$md',
|
||||
lineHeight: '$md',
|
||||
},
|
||||
|
||||
'lg': {
|
||||
fontSize: '$lg',
|
||||
lineHeight: '$xl',
|
||||
},
|
||||
|
||||
'xl': {
|
||||
fontSize: '$xl',
|
||||
lineHeight: '$xl',
|
||||
},
|
||||
|
||||
'2xl': {
|
||||
fontSize: '$2xl',
|
||||
lineHeight: '$2xl',
|
||||
},
|
||||
|
||||
'3xl': {
|
||||
fontSize: '$3xl',
|
||||
lineHeight: '$3xl',
|
||||
},
|
||||
|
||||
'4xl': {
|
||||
fontSize: '$4xl',
|
||||
lineHeight: '$4xl',
|
||||
},
|
||||
|
||||
'5xl': {
|
||||
fontSize: '$5xl',
|
||||
lineHeight: '$6xl',
|
||||
},
|
||||
|
||||
'6xl': {
|
||||
fontSize: '$6xl',
|
||||
lineHeight: '$7xl',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const InputIcon = createStyle({
|
||||
props: {
|
||||
size: 'md',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const InputSlot = createStyle({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
_web: {
|
||||
':disabled': {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const KeyboardAvoidingView = createStyle({});
|
||||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const LinkText = createStyle({
|
||||
textDecorationLine: 'underline',
|
||||
color: '$info700',
|
||||
_dark: {
|
||||
color: '$info300',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const MenuLabel = createStyle({});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { createStyle } from '@gluestack-style/react';
|
||||
|
||||
export const ModalBody = createStyle({
|
||||
px: '$4',
|
||||
paddingTop: 0,
|
||||
paddingBottom: '$2',
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
@ -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',
|
||||
});
|
||||
|
|
@ -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',
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue