diff --git a/example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx b/example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx index de841c17a..5f40440cd 100644 --- a/example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx +++ b/example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx @@ -42,7 +42,10 @@ export const Example = () => { Fax - }> + } + > You must select at least three methods diff --git a/package.json b/package.json index a4a3c8326..b42cbe75d 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "prettier --write" ] }, - "version": "3.4.14-rc.0", + "version": "3.4.14-rc.1", "license": "MIT", "private": false, "main": "lib/commonjs/index", @@ -196,6 +196,7 @@ "@react-stately/tabs": "3.0.0-alpha.1", "@react-stately/toggle": "3.2.1", "@types/lodash.has": "^4.5.6", + "@types/use-subscription": "^1.0.0", "lodash.clonedeep": "^4.5.0", "lodash.get": "^4.4.2", "lodash.has": "^4.5.2", diff --git a/src/components/composites/Avatar/Group.tsx b/src/components/composites/Avatar/Group.tsx index f8ffb1ed1..dd9acc091 100644 --- a/src/components/composites/Avatar/Group.tsx +++ b/src/components/composites/Avatar/Group.tsx @@ -29,7 +29,12 @@ const getAvatarGroupChildren = ( }; return [ plusAvatars > 0 ? ( - + {'+ ' + plusAvatars} ) : null, diff --git a/src/components/composites/Collapse/index.tsx b/src/components/composites/Collapse/index.tsx index 6b813cb6a..39d6469d4 100644 --- a/src/components/composites/Collapse/index.tsx +++ b/src/components/composites/Collapse/index.tsx @@ -4,6 +4,7 @@ import { ViewStyle, LayoutAnimation, UIManager, Platform } from 'react-native'; import { Box } from '../../primitives'; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps'; import type { InterfaceBoxProps } from '../../primitives/Box'; +import type { CustomProps } from '../../../components/types'; export type InterfaceCollapseProps = InterfaceBoxProps & { style?: ViewStyle; endingHeight?: number; @@ -15,7 +16,7 @@ export type InterfaceCollapseProps = InterfaceBoxProps & { onAnimationStart?: Function; }; -export type ICollapseProps = InterfaceCollapseProps; +export type ICollapseProps = InterfaceCollapseProps & CustomProps<'Box'>; function usePrevious(value: any) { const ref = useRef(); diff --git a/src/components/composites/IconButton/types.ts b/src/components/composites/IconButton/types.ts index 25dc80f67..dee7fa03f 100644 --- a/src/components/composites/IconButton/types.ts +++ b/src/components/composites/IconButton/types.ts @@ -6,7 +6,7 @@ import type { CustomProps, VariantType } from '../../types'; import type { ThemeComponentSizeType } from '../../../components/types/utils'; export interface InterfaceIconButtonProps extends Omit< - InterfacePressableProps, + InterfacePressableProps, | 'children' | 'color' | '_light' diff --git a/src/components/composites/Modal/ModalContent.tsx b/src/components/composites/Modal/ModalContent.tsx index acbbfd03f..8033ecf61 100644 --- a/src/components/composites/Modal/ModalContent.tsx +++ b/src/components/composites/Modal/ModalContent.tsx @@ -44,6 +44,7 @@ const ModalContent = (props: IBoxProps, ref?: any) => { //@ts-ignore - web only accessibilityRole={Platform.OS === 'web' ? 'dialog' : undefined} accessibilityViewIsModal + _web={{ focusable: false }} /> ); }; diff --git a/src/components/composites/NumberInput/NumberInputStepper.tsx b/src/components/composites/NumberInput/NumberInputStepper.tsx index 74ccbea94..147e4f2bd 100644 --- a/src/components/composites/NumberInput/NumberInputStepper.tsx +++ b/src/components/composites/NumberInput/NumberInputStepper.tsx @@ -64,6 +64,7 @@ const NumberInputStepper = ( ref?: any ) => { const { + //@ts-ignore numberInputStepper, setNumberInputStepper, }: INumberInputContext = React.useContext(NumberInputContext); diff --git a/src/components/composites/Tabs/types.tsx b/src/components/composites/Tabs/types.tsx index 06b57faeb..b1c340512 100644 --- a/src/components/composites/Tabs/types.tsx +++ b/src/components/composites/Tabs/types.tsx @@ -1,6 +1,6 @@ import type { RefObject } from 'react'; import type { ViewProps } from 'react-native'; -import type { InterfaceBoxProps } from '../../primitives/Box'; +import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box'; import type { InterfaceIconProps } from '../../primitives/Icon/types'; import type { ColorSchemeType } from '../../../components/types'; @@ -35,8 +35,8 @@ export type ITabProps = InterfaceBoxProps & { item?: any; }; -export type ITabViewsProps = InterfaceBoxProps; -export type ITabViewProps = InterfaceBoxProps & { +export type ITabViewsProps = IBoxProps; +export type ITabViewProps = IBoxProps & { index?: number; }; diff --git a/src/components/composites/Transitions/types.tsx b/src/components/composites/Transitions/types.tsx index d55f995ab..42d687501 100644 --- a/src/components/composites/Transitions/types.tsx +++ b/src/components/composites/Transitions/types.tsx @@ -1,5 +1,6 @@ import type { ReactNode } from 'react'; import type { ViewProps } from 'react-native'; +import type { CustomProps } from '../../../components/types'; import type { InterfaceBoxProps } from '../../primitives/Box'; import type { IOverlayProps } from '../../primitives/Overlay'; export type IFadeProps = InterfaceBoxProps & { @@ -37,7 +38,7 @@ export type ISlideFadeProps = InterfaceBoxProps & { duration?: number; offsetX?: number; offsetY?: number; -}; +} & CustomProps<'Slide'>; export interface ISupportedTransitions { opacity?: number; diff --git a/src/components/primitives/Heading/types.ts b/src/components/primitives/Heading/types.ts index 7c5c74a8e..747ceed1d 100644 --- a/src/components/primitives/Heading/types.ts +++ b/src/components/primitives/Heading/types.ts @@ -1,8 +1,9 @@ -import type { ITextProps } from '../Text'; +import type { InterfaceTextProps } from '../Text/types'; import type { CustomProps, ThemeComponentSizeType } from '../../types/utils'; -export interface IterfaceHeadingProps extends ITextProps { +export interface IterfaceHeadingProps + extends InterfaceTextProps { /** * The size of the heading. * @default xl diff --git a/src/components/primitives/Icon/Icons/Arrow.tsx b/src/components/primitives/Icon/Icons/Arrow.tsx index c1c5dfdd4..4f60af408 100644 --- a/src/components/primitives/Icon/Icons/Arrow.tsx +++ b/src/components/primitives/Icon/Icons/Arrow.tsx @@ -31,7 +31,7 @@ export const ArrowForwardIcon = createIcon({ path: ( diff --git a/src/components/primitives/Input/Input.tsx b/src/components/primitives/Input/Input.tsx index 4a16c4d72..ebb6c2b76 100644 --- a/src/components/primitives/Input/Input.tsx +++ b/src/components/primitives/Input/Input.tsx @@ -7,7 +7,7 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps'; import { useHover } from '@react-native-aria/interactions'; import { extractInObject, stylingProps } from '../../../theme/tools/utils'; import { usePropsResolution } from '../../../hooks/useThemeProps'; -import { mergeRefs } from '../../../utils'; +import { mergeRefs, resolveStackStyleInput } from '../../../utils'; import { Stack } from '../Stack'; import { makeStyledComponent } from '../../../utils/styled'; import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily'; @@ -36,12 +36,6 @@ const Input = ( callback(); }; - /**Converting into Hash Color Code */ - //@ts-ignore - props.focusOutlineColor = useToken('colors', props.focusOutlineColor); - //@ts-ignore - props.invalidOutlineColor = useToken('colors', props.invalidOutlineColor); - const _ref = React.useRef(null); const { isHovered } = useHover({}, _ref); @@ -113,11 +107,39 @@ const Input = ( 'colors', underlineColorAndroid ); + + /**Converting into Hash Color Code */ + //@ts-ignore + resolvedProps.focusOutlineColor = useToken( + 'colors', + resolvedProps.focusOutlineColor + ); + //@ts-ignore + resolvedProps.invalidOutlineColor = useToken( + 'colors', + resolvedProps.invalidOutlineColor + ); //TODO: refactor for responsive prop if (useHasResponsiveProps(props)) { return null; } + if (resolvedProps.focusOutlineColor && isFocused) { + layoutProps.borderColor = resolvedProps.focusOutlineColor; + _stack.style = resolveStackStyleInput( + props.variant, + resolvedProps.focusOutlineColor + ); + } + + if (resolvedProps.invalidOutlineColor && props.isInvalid) { + layoutProps.borderColor = resolvedProps.invalidOutlineColor; + _stack.style = resolveStackStyleInput( + props.variant, + resolvedProps.invalidOutlineColor + ); + } + return ( ; /** This prop allow you to change outlineColor when input is in focused state*/ focusOutlineColor?: ColorType; - /** This prop allow you to change outlineColor when input is in focused state*/ + /** This prop allow you to change outlineColor when input is in invalid state*/ invalidOutlineColor?: ColorType; ref?: MutableRefObject | RefCallback; } diff --git a/src/components/primitives/Pressable/types.ts b/src/components/primitives/Pressable/types.ts index d98a16392..dfd3ec2fb 100644 --- a/src/components/primitives/Pressable/types.ts +++ b/src/components/primitives/Pressable/types.ts @@ -24,20 +24,20 @@ export interface InterfacePressableProps /** * Style props to be applied when hovered */ - _hover?: Omit, '_hover'>; + _hover?: Omit, '_hover'>; /** * Style props to be applied when pressed */ - _pressed?: Omit, '_pressed'>; + _pressed?: Omit, '_pressed'>; /** * Style props to be applied when focus */ - _focus?: Omit, '_focus'>; + _focus?: Omit, '_focus'>; /** * Style props to be applied when disabled */ - _disabled?: Omit, '_disabled'>; + _disabled?: Omit, '_disabled'>; /** * If true, the p will be disabled. @@ -62,7 +62,7 @@ export interface InterfacePressableProps /** * Style props to be applied when focus visible. These styles will be only applied when user is interacting the app using a keyboard. (Web only) */ - _focusVisible?: Omit, '_focusVisible'>; + _focusVisible?: Omit, '_focusVisible'>; children?: | React.ReactNode diff --git a/src/components/primitives/Select/Select.tsx b/src/components/primitives/Select/Select.tsx index 3bbab6e90..5e4b361d4 100644 --- a/src/components/primitives/Select/Select.tsx +++ b/src/components/primitives/Select/Select.tsx @@ -175,41 +175,7 @@ const Select = ( /> ); - return Platform.OS === 'web' ? ( - - {/* */} - - {/* */} - {commonInput} - - ) : ( + return Platform.OS === 'android' || Platform.OS === 'ios' ? ( <> { @@ -263,6 +229,40 @@ const Select = ( + ) : ( + + {/* */} + + {/* */} + {commonInput} + ); }; diff --git a/src/components/primitives/Stack/HStack.tsx b/src/components/primitives/Stack/HStack.tsx index 8e1b01626..78035e3b2 100644 --- a/src/components/primitives/Stack/HStack.tsx +++ b/src/components/primitives/Stack/HStack.tsx @@ -1,7 +1,11 @@ import React, { memo, forwardRef } from 'react'; import StackMain, { InterfaceStackProps } from './Stack'; import { usePropsResolution } from '../../../hooks/useThemeProps'; -import type { CustomProps, ResponsiveValue } from '../../types'; +import type { + CustomProps, + ResponsiveValue, + // ThemeComponentSizeType, +} from '../../types'; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps'; export interface InterfaceHStackProps extends InterfaceStackProps { /** @@ -14,6 +18,7 @@ export interface InterfaceHStackProps extends InterfaceStackProps { } export type IHStackProps = InterfaceHStackProps & CustomProps<'HStack'>; + const HStack = (props: IHStackProps, ref?: any) => { const resolvedProps = usePropsResolution('HStack', props); //TODO: refactor for responsive prop diff --git a/src/components/primitives/Text/types.tsx b/src/components/primitives/Text/types.tsx index d17d06f70..7c96029ee 100644 --- a/src/components/primitives/Text/types.tsx +++ b/src/components/primitives/Text/types.tsx @@ -10,8 +10,8 @@ import type { import type { CustomProps, PlatformProps, ResponsiveValue } from '../../types'; import type { VariantType } from '../../../components/types'; -export interface InterfaceTextProps - extends PlatformProps, +export interface InterfaceTextProps + extends PlatformProps, StyledProps, TextProps { /** diff --git a/src/components/types/utils.ts b/src/components/types/utils.ts index 0f7d733d9..3404c895f 100644 --- a/src/components/types/utils.ts +++ b/src/components/types/utils.ts @@ -84,7 +84,7 @@ export type CustomComponentProps< undefined > >; -export type CustomProps< +export type CustomPropsTemp< T extends keyof ITheme['components'] > = CustomComponentProps extends never ? {} @@ -97,3 +97,28 @@ export type UnionToIntersection = ( ) extends (k: infer I) => void ? I : never; + +type VariantSizeColorScheme = { + variant?: VariantType; + size?: ThemeComponentSizeType; + colorScheme?: ColorSchemeType; +}; +// export type CustomProps< +// T extends keyof ITheme['components'] +// > = CustomComponentProps extends never +// ? {} | VariantSizeColorScheme +// : // : CustomComponentProps extends Record +// // ? {} +// | (UnionToIntersection> & {}) +// | VariantSizeColorScheme; + +export type CustomProps< + T extends keyof ITheme['components'] +> = UnionToIntersection | VariantSizeColorScheme>; + +// export type CustomProps< +// T extends keyof ITheme['components'] +// > = CustomPropsTemp; +// | CustomPropsTemp +// | { a: string }; +// | { size?: ThemeComponentSizeType }; diff --git a/src/core/color-mode/hooks.tsx b/src/core/color-mode/hooks.tsx index df4be09bd..8e7302a02 100644 --- a/src/core/color-mode/hooks.tsx +++ b/src/core/color-mode/hooks.tsx @@ -6,7 +6,8 @@ import type { } from './types'; import { HybridContext } from './../hybrid-overlay/Context'; import type { IHybridContextProps } from './../hybrid-overlay/types'; -import { Appearance } from 'react-native'; +import { AppState, useColorScheme as _useColorScheme } from 'react-native'; +import { useSubscription } from 'use-subscription'; export const useColorMode = (): IColorModeContextProps => { const { @@ -25,12 +26,40 @@ export function useColorModeValue(light: any, dark: any) { return colorMode === 'dark' ? dark : light; } +export const useAppState = () => { + const subscription = React.useMemo( + () => ({ + getCurrentValue: () => AppState.currentState, + subscribe: (callback: () => void) => { + AppState.addEventListener('change', callback); + return () => AppState.removeEventListener('change', callback); + }, + }), + [] + ); + return useSubscription(subscription); +}; + +export const useColorScheme = () => { + const colorScheme = _useColorScheme(); + const [currentScheme, setCurrentScheme] = useState(colorScheme); + const appState = useAppState(); + + useEffect(() => { + if (appState === 'active') { + setCurrentScheme(colorScheme); + } + }, [appState, colorScheme]); + + return currentScheme; +}; + export function useModeManager( initialColorMode: ColorMode, useSystemColorMode: boolean | undefined, colorModeManager?: StorageManager ) { - const systemColorMode = Appearance.getColorScheme(); + const systemColorMode = useColorScheme(); if (useSystemColorMode) { initialColorMode = systemColorMode; diff --git a/src/hooks/useThemeProps/usePropsResolution.test.tsx b/src/hooks/useThemeProps/usePropsResolution.test.tsx index 1cd5171bb..59beecffb 100644 --- a/src/hooks/useThemeProps/usePropsResolution.test.tsx +++ b/src/hooks/useThemeProps/usePropsResolution.test.tsx @@ -214,7 +214,8 @@ describe('props resolution', () => { testID="test" //@ts-ignore variant="myBox" - size="xs" + //@ts-ignore + // size="xs" > hello world diff --git a/src/theme/components/actionsheet.ts b/src/theme/components/actionsheet.ts index f350a4b02..e6761336a 100644 --- a/src/theme/components/actionsheet.ts +++ b/src/theme/components/actionsheet.ts @@ -15,21 +15,19 @@ export const ActionsheetContent = { py: 2, borderRadius: 'none', roundedTop: 20, - _light: { - _dragIndicator: { - bg: 'muted.500', - }, + _dragIndicator: { + height: 1, + width: 10, + borderRadius: 2, + bg: 'muted.500', }, + _dark: { _dragIndicator: { bg: 'muted.400', }, }, - _dragIndicator: { - height: 1, - width: 10, - borderRadius: 2, - }, + _dragIndicatorWrapper: { pt: 3, pb: 3, @@ -55,35 +53,34 @@ export const ActionsheetItem = { }, p: 4, _text: { + color: 'text.900', fontSize: 'md', fontWeight: 'normal', }, _disabled: { opacity: 40, }, - _light: { - bg: 'muted.50', - _icon: { - color: 'muted.500', - }, - _text: { - color: 'text.900', - }, - _hover: { - bg: 'muted.200', - }, - _pressed: { - bg: 'muted.400', - }, - _focusVisible: { - _web: { - outlineWidth: '0', - style: { boxShadow: `none` }, - bg: 'muted.300', - }, + + bg: 'muted.50', + _icon: { + color: 'muted.500', + }, + + _hover: { + bg: 'muted.200', + }, + _pressed: { + bg: 'muted.400', + }, + _focusVisible: { + _web: { + outlineWidth: '0', + style: { boxShadow: `none` }, bg: 'muted.300', }, + bg: 'muted.300', }, + _dark: { bg: 'muted.800', _icon: { diff --git a/src/theme/components/alert-dialog.ts b/src/theme/components/alert-dialog.ts index 1f614fdd5..6a8493196 100644 --- a/src/theme/components/alert-dialog.ts +++ b/src/theme/components/alert-dialog.ts @@ -63,12 +63,11 @@ export const AlertDialogContent = { rounded: 'lg', maxHeight: `${Dimensions.get('window').height - 150}px`, overflow: 'hidden', - _light: { - bg: 'muted.50', - _text: { - color: 'text.900', - }, + bg: 'muted.50', + _text: { + color: 'text.900', }, + _dark: { bg: 'muted.800', color: 'text.50', @@ -92,18 +91,16 @@ export const AlertDialogCloseButton = { }, _icon: { size: '4', + color: 'muted.500', }, - _light: { - _icon: { - color: 'muted.500', - }, - _hover: { - bg: 'muted.200', - }, - _pressed: { - bg: 'muted.300', - }, + + _hover: { + bg: 'muted.200', + }, + _pressed: { + bg: 'muted.300', }, + _dark: { _icon: { color: 'muted.400', @@ -124,17 +121,14 @@ export const AlertDialogHeader = { p: '4', borderBottomWidth: '1', _text: { + color: 'text.900', fontSize: 'md', fontWeight: 'semibold', lineHeight: 'sm', }, - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, - }, + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', @@ -149,12 +143,12 @@ export const AlertDialogBody = { baseStyle: () => { return { p: '4', - _light: { - bg: 'muted.50', - _text: { - color: 'text.900', - }, + + bg: 'muted.50', + _text: { + color: 'text.900', }, + _dark: { bg: 'muted.800', _text: { @@ -172,10 +166,9 @@ export const AlertDialogFooter = { justifyContent: 'flex-end', flexWrap: 'wrap', borderTopWidth: '1', - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - }, + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts index bff3274ab..3722cee63 100644 --- a/src/theme/components/alert.ts +++ b/src/theme/components/alert.ts @@ -3,9 +3,9 @@ import type { InterfaceAlertProps } from '../../components/composites/Alert/type function getBg( props: InterfaceAlertProps & { theme: any } & { colorScheme: any } ) { - let { theme, colorScheme, status, variant } = props; + const { theme, colorScheme: c, status, variant } = props; - colorScheme = getColorScheme(props, !status ? colorScheme : status); + const colorScheme = getColorScheme(props, !status ? c : status); const lightBg = variant === 'solid' @@ -29,10 +29,8 @@ const variantSubtle = ( colorScheme = getColorScheme(props, !status ? colorScheme : status); return { - _light: { - bg: lightBg, - _icon: { color: `${colorScheme}.700` }, - }, + bg: lightBg, + _icon: { color: `${colorScheme}.700` }, _dark: { bg: darkBg, _icon: { color: `${colorScheme}.600` }, @@ -47,10 +45,8 @@ const variantOutline = (props: InterfaceAlertProps & { colorScheme: any }) => { return { borderWidth: 1, - _light: { - _icon: { color: `${colorScheme}.700` }, - borderColor: `${colorScheme}.700`, - }, + _icon: { color: `${colorScheme}.700` }, + borderColor: `${colorScheme}.700`, _dark: { _icon: { color: `${colorScheme}.600` }, borderColor: `${colorScheme}.600`, @@ -67,10 +63,8 @@ const variantOutlineLight = ( return { borderWidth: 1, - _light: { - _icon: { color: `${colorScheme}.700` }, - borderColor: transparentize(`${colorScheme}.700`, 0.4)(theme), - }, + _icon: { color: `${colorScheme}.700` }, + borderColor: transparentize(`${colorScheme}.700`, 0.4)(theme), _dark: { _icon: { color: `${colorScheme}.600` }, borderColor: transparentize(`${colorScheme}.600`, 0.4)(theme), @@ -83,9 +77,7 @@ const variantSolid = ( ) => { const { lightBg, darkBg } = getBg(props); return { - _light: { - bg: lightBg, - }, + bg: lightBg, _dark: { bg: darkBg, }, @@ -103,11 +95,9 @@ const variantLeftAccent = ( return { borderLeftWidth: 4, - _light: { - bg: lightBg, - _icon: { color: `${colorScheme}.700` }, - borderLeftColor: `${colorScheme}.700`, - }, + bg: lightBg, + _icon: { color: `${colorScheme}.700` }, + borderLeftColor: `${colorScheme}.700`, _dark: { bg: darkBg, _icon: { color: `${colorScheme}.600` }, @@ -126,11 +116,9 @@ const variantTopAccent = ( return { borderTopWidth: 4, - _light: { - bg: lightBg, - _icon: { color: `${colorScheme}.700` }, - borderTopColor: `${colorScheme}.700`, - }, + bg: lightBg, + _icon: { color: `${colorScheme}.700` }, + borderTopColor: `${colorScheme}.700`, _dark: { bg: darkBg, _icon: { color: `${colorScheme}.600` }, diff --git a/src/theme/components/avatar.ts b/src/theme/components/avatar.ts index a1eeb3a29..a65b0ffc6 100644 --- a/src/theme/components/avatar.ts +++ b/src/theme/components/avatar.ts @@ -26,9 +26,7 @@ const baseStyle = (props: InterfaceAvatarProps & { name: string }) => { width: '100%', }, }, - _light: { - borderColor: 'gray.800', - }, + borderColor: 'gray.800', _dark: { borderColor: 'white', }, diff --git a/src/theme/components/badge.ts b/src/theme/components/badge.ts index 3788064de..68fabbeac 100644 --- a/src/theme/components/badge.ts +++ b/src/theme/components/badge.ts @@ -31,7 +31,7 @@ function variantSubtle(props: InterfaceBadgeProps & { colorScheme: any }) { return { _text: { color: `${colorScheme}.900` }, _icon: { color: `${colorScheme}.900` }, - _light: { bg: `${colorScheme}.100` }, + bg: `${colorScheme}.100`, _dark: { bg: `${colorScheme}.300` }, borderWidth: '1', borderRadius: '2', @@ -42,11 +42,9 @@ function variantSubtle(props: InterfaceBadgeProps & { colorScheme: any }) { function variantOutline(props: InterfaceBadgeProps & { colorScheme: any }) { const colorScheme = getColorScheme(props); return { - _light: { - _text: { color: `${colorScheme}.600` }, - _icon: { color: `${colorScheme}.600` }, - borderColor: `${colorScheme}.600`, - }, + _text: { color: `${colorScheme}.600` }, + _icon: { color: `${colorScheme}.600` }, + borderColor: `${colorScheme}.600`, _dark: { _text: { color: `${colorScheme}.300`, diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index 475526ec7..3a0695a7a 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -1,23 +1,13 @@ import type { InterfaceButtonProps } from '../../components/primitives/Button/types'; -import { mode } from './../tools'; const baseStyle = (props: InterfaceButtonProps & { theme: any }) => { const { primary } = props.theme.colors; - const focusRing = mode( - { - boxShadow: `${primary[400]} 0px 0px 0px 2px`, - }, - { - boxShadow: `${primary[500]} 0px 0px 0px 2px`, - } - )(props); return { borderRadius: 'sm', // '4px' flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - _web: { _disabled: { cursor: 'not-allowed', @@ -31,7 +21,15 @@ const baseStyle = (props: InterfaceButtonProps & { theme: any }) => { _focusVisible: { _web: { outlineWidth: '0', - style: { ...focusRing }, + style: { boxShadow: `${primary[400]} 0px 0px 0px 2px` }, + }, + }, + _dark: { + _focusVisible: { + _web: { + outlineWidth: '0', + style: { boxShadow: `${primary[500]} 0px 0px 0px 2px` }, + }, }, }, _stack: { @@ -53,23 +51,22 @@ const baseStyle = (props: InterfaceButtonProps & { theme: any }) => { function variantGhost({ colorScheme }: InterfaceButtonProps) { return { - _light: { - _text: { - color: `${colorScheme}.600`, - }, - _icon: { - color: `${colorScheme}.600`, - }, - _spinner: { - color: `${colorScheme}.600`, - }, - _hover: { - bg: `${colorScheme}.600:alpha.10`, - }, - _pressed: { - bg: `${colorScheme}.600:alpha.20`, - }, + _text: { + color: `${colorScheme}.600`, + }, + _icon: { + color: `${colorScheme}.600`, + }, + _spinner: { + color: `${colorScheme}.600`, + }, + _hover: { + bg: `${colorScheme}.600:alpha.10`, + }, + _pressed: { + bg: `${colorScheme}.600:alpha.20`, }, + _dark: { _text: { color: `${colorScheme}.500`, @@ -93,25 +90,23 @@ function variantGhost({ colorScheme }: InterfaceButtonProps) { function variantOutline({ colorScheme }: InterfaceButtonProps) { return { borderWidth: '1px', - - _light: { - borderColor: 'muted.300', - _text: { - color: `${colorScheme}.600`, - }, - _icon: { - color: `${colorScheme}.600`, - }, - _spinner: { - color: `${colorScheme}.600`, - }, - _hover: { - bg: `${colorScheme}.600:alpha.10`, - }, - _pressed: { - bg: `${colorScheme}.600:alpha.20`, - }, + borderColor: 'muted.300', + _text: { + color: `${colorScheme}.600`, + }, + _icon: { + color: `${colorScheme}.600`, + }, + _spinner: { + color: `${colorScheme}.600`, }, + _hover: { + bg: `${colorScheme}.600:alpha.10`, + }, + _pressed: { + bg: `${colorScheme}.600:alpha.20`, + }, + _dark: { borderColor: 'muted.700', _text: { @@ -144,16 +139,14 @@ function variantSolid({ colorScheme }: InterfaceButtonProps) { _spinner: { color: 'text.50', }, - - _light: { - bg: `${colorScheme}.600`, - _hover: { - bg: `${colorScheme}.700`, - }, - _pressed: { - bg: `${colorScheme}.800`, - }, + bg: `${colorScheme}.600`, + _hover: { + bg: `${colorScheme}.700`, + }, + _pressed: { + bg: `${colorScheme}.800`, }, + _dark: { bg: `${colorScheme}.600`, _hover: { @@ -168,6 +161,7 @@ function variantSolid({ colorScheme }: InterfaceButtonProps) { function variantSubtle({ colorScheme }: InterfaceButtonProps) { return { + bg: `${colorScheme}.100`, _text: { color: `${colorScheme}.900`, }, @@ -177,16 +171,13 @@ function variantSubtle({ colorScheme }: InterfaceButtonProps) { _spinner: { color: `${colorScheme}.900`, }, - - _light: { - bg: `${colorScheme}.100`, - _hover: { - bg: `${colorScheme}.200`, - }, - _pressed: { - bg: `${colorScheme}.300`, - }, + _hover: { + bg: `${colorScheme}.200`, + }, + _pressed: { + bg: `${colorScheme}.300`, }, + _dark: { bg: `${colorScheme}.300`, _hover: { @@ -215,18 +206,13 @@ function variantLink({ colorScheme }: InterfaceButtonProps) { }, _pressed: { _text: { + color: `${colorScheme}.800`, textDecorationLine: 'underline', }, }, - _light: { - _text: { - color: `${colorScheme}.600`, - }, - _pressed: { - _text: { - color: `${colorScheme}.800`, - }, - }, + + _text: { + color: `${colorScheme}.600`, }, _dark: { _text: { diff --git a/src/theme/components/checkbox.ts b/src/theme/components/checkbox.ts index b2602bdd5..aef8f1040 100644 --- a/src/theme/components/checkbox.ts +++ b/src/theme/components/checkbox.ts @@ -9,44 +9,43 @@ const baseStyle = (props: Record) => { opacity: 1, p: 0.5, - _light: { - bg: 'muted.50', - borderColor: 'muted.400', - _text: { - color: 'darkText', - }, - _icon: { - color: `muted.50`, - }, - _checked: { - borderColor: `${c}.600`, - bg: `${c}.600`, - _hover: { - borderColor: `${c}.700`, - bg: `${c}.700`, - _disabled: { - borderColor: `${c}.600`, - bg: `${c}.600`, - }, - }, - _pressed: { - borderColor: `${c}.800`, - bg: `${c}.800`, - }, - }, + bg: 'muted.50', + borderColor: 'muted.400', + _text: { + color: 'darkText', + ml: 2, + }, + _icon: { + color: `muted.50`, + }, + _checked: { + borderColor: `${c}.600`, + bg: `${c}.600`, _hover: { - borderColor: 'muted.500', + borderColor: `${c}.700`, + bg: `${c}.700`, _disabled: { - borderColor: 'muted.400', + borderColor: `${c}.600`, + bg: `${c}.600`, }, }, _pressed: { - borderColor: 'muted.600', + borderColor: `${c}.800`, + bg: `${c}.800`, }, - _invalid: { - borderColor: 'error.600', + }, + _hover: { + borderColor: 'muted.500', + _disabled: { + borderColor: 'muted.400', }, }, + _pressed: { + borderColor: 'muted.600', + }, + _invalid: { + borderColor: 'error.600', + }, _dark: { bg: 'muted.900', @@ -96,10 +95,6 @@ const baseStyle = (props: Record) => { }, }, - _text: { - ml: 2, - }, - _focusVisible: { _web: { style: { diff --git a/src/theme/components/divider.ts b/src/theme/components/divider.ts index 9aed7f5b7..65e518548 100644 --- a/src/theme/components/divider.ts +++ b/src/theme/components/divider.ts @@ -12,9 +12,7 @@ function baseStyle(props: Record) { }; return { - _light: { - bg: 'muted.300', - }, + bg: 'muted.300', _dark: { bg: 'muted.600', }, diff --git a/src/theme/components/form-control.ts b/src/theme/components/form-control.ts index e965d999e..657b0cf3e 100644 --- a/src/theme/components/form-control.ts +++ b/src/theme/components/form-control.ts @@ -12,13 +12,9 @@ export const FormControlErrorMessage = { mt: '2', _text: { fontSize: 'xs', + color: 'error.600', }, _stack: { space: 1, alignItems: 'center' }, - _light: { - _text: { - color: 'error.600', - }, - }, _dark: { _text: { color: 'error.500', @@ -37,15 +33,11 @@ export const FormControlLabel = { _text: { fontSize: 'sm', fontWeight: 'medium', + color: 'text.500', }, my: '1', - _light: { - _text: { - color: 'text.500', - }, - _astrick: { - color: 'error.600', - }, + _astrick: { + color: 'error.600', }, _dark: { _text: { @@ -66,11 +58,7 @@ export const FormControlHelperText = { mt: '2', _text: { fontSize: 'xs', - }, - _light: { - _text: { - color: 'text.500', - }, + color: 'text.500', }, _dark: { _text: { diff --git a/src/theme/components/heading.ts b/src/theme/components/heading.ts index 1de05565f..626f780a4 100644 --- a/src/theme/components/heading.ts +++ b/src/theme/components/heading.ts @@ -1,8 +1,6 @@ const baseStyle = () => { return { - _light: { - color: 'text.900', - }, + color: 'text.900', _dark: { color: 'text.50', }, diff --git a/src/theme/components/hstack.ts b/src/theme/components/hstack.ts index 7d6cde895..7b0c024c0 100644 --- a/src/theme/components/hstack.ts +++ b/src/theme/components/hstack.ts @@ -1,6 +1,8 @@ const baseStyle = {}; const defaultProps = {}; +const sizes = {}; export default { baseStyle, defaultProps, + sizes, }; diff --git a/src/theme/components/icon-button.ts b/src/theme/components/icon-button.ts index 8b988e086..cfb730950 100644 --- a/src/theme/components/icon-button.ts +++ b/src/theme/components/icon-button.ts @@ -1,20 +1,6 @@ -import { mode } from './../tools'; - const baseStyle = (props: any) => { const { colorScheme } = props; const colors = props.theme.colors; - const focusRing = mode( - { - outlineWidth: '2px', - outlineColor: `${colors[colorScheme][600]}`, - outlineStyle: 'solid', - }, - { - outlineWidth: '2px', - outlineColor: `${colors[colorScheme][500]}`, - outlineStyle: 'solid', - } - )(props); return { borderRadius: 'sm', // '4px' @@ -36,7 +22,11 @@ const baseStyle = (props: any) => { }, _focusVisible: { _web: { - style: { ...focusRing }, + style: { + outlineWidth: '2px', + outlineColor: `${colors[colorScheme][600]}`, + outlineStyle: 'solid', + }, }, }, _loading: { @@ -45,21 +35,30 @@ const baseStyle = (props: any) => { _disabled: { opacity: '40', }, + _dark: { + _focusVisible: { + _web: { + style: { + outlineWidth: '2px', + outlineColor: `${colors[colorScheme][500]}`, + outlineStyle: 'solid', + }, + }, + }, + }, }; }; function variantGhost({ colorScheme }: Record) { return { - _light: { - _icon: { - color: `${colorScheme}.600`, - }, - _hover: { - bg: `${colorScheme}.600:alpha.10`, - }, - _pressed: { - bg: `${colorScheme}.600:alpha.20`, - }, + _icon: { + color: `${colorScheme}.600`, + }, + _hover: { + bg: `${colorScheme}.600:alpha.10`, + }, + _pressed: { + bg: `${colorScheme}.600:alpha.20`, }, _dark: { _icon: { @@ -78,28 +77,26 @@ function variantGhost({ colorScheme }: Record) { function variantOutline({ colorScheme }: Record) { return { borderWidth: '1px', - _light: { - borderColor: `${colorScheme}.600`, + borderColor: `${colorScheme}.600`, + _icon: { + color: `${colorScheme}.600`, + }, + _hover: { + bg: `${colorScheme}.700`, _icon: { - color: `${colorScheme}.600`, - }, - _hover: { - bg: `${colorScheme}.700`, - _icon: { - color: 'muted.50', - }, + color: 'muted.50', }, - _pressed: { - bg: `${colorScheme}.800`, - _icon: { - color: 'muted.50', - }, + }, + _pressed: { + bg: `${colorScheme}.800`, + _icon: { + color: 'muted.50', }, - _focus: { - bg: `${colorScheme}.600`, - _icon: { - color: 'muted.50', - }, + }, + _focus: { + bg: `${colorScheme}.600`, + _icon: { + color: 'muted.50', }, }, _dark: { @@ -131,17 +128,15 @@ function variantOutline({ colorScheme }: Record) { function variantSolid({ colorScheme }: Record) { return { - _light: { - bg: `${colorScheme}.600`, - _hover: { - bg: `${colorScheme}.700`, - }, - _pressed: { - bg: `${colorScheme}.800`, - }, - _icon: { - color: 'muted.50', - }, + bg: `${colorScheme}.600`, + _hover: { + bg: `${colorScheme}.700`, + }, + _pressed: { + bg: `${colorScheme}.800`, + }, + _icon: { + color: 'muted.50', }, _dark: { bg: `${colorScheme}.500`, @@ -169,14 +164,12 @@ function variantSubtle({ colorScheme }: Record) { _icon: { color: `${colorScheme}.900`, }, - _light: { - bg: `${colorScheme}.100`, - _hover: { - bg: `${colorScheme}.200`, - }, - _pressed: { - bg: `${colorScheme}.300`, - }, + bg: `${colorScheme}.100`, + _hover: { + bg: `${colorScheme}.200`, + }, + _pressed: { + bg: `${colorScheme}.300`, }, _dark: { bg: `${colorScheme}.300`, @@ -196,19 +189,17 @@ function variantLink({ colorScheme }: Record) { color: `${colorScheme}.600`, }, - _light: { + _icon: { + color: `${colorScheme}.600`, + }, + _hover: { _icon: { - color: `${colorScheme}.600`, - }, - _hover: { - _icon: { - color: `${colorScheme}.700`, - }, + color: `${colorScheme}.700`, }, - _pressed: { - _icon: { - color: `${colorScheme}.800`, - }, + }, + _pressed: { + _icon: { + color: `${colorScheme}.800`, }, }, _dark: { @@ -231,10 +222,8 @@ function variantLink({ colorScheme }: Record) { function variantUnstyled() { return { - _light: { - _icon: { - color: 'muted.900', - }, + _icon: { + color: 'muted.900', }, _dark: { _icon: { diff --git a/src/theme/components/icon.ts b/src/theme/components/icon.ts index 36280b03c..929b83a79 100644 --- a/src/theme/components/icon.ts +++ b/src/theme/components/icon.ts @@ -1,8 +1,6 @@ const baseStyle = () => { return { - _light: { - color: 'muted.500', - }, + color: 'muted.500', _dark: { color: 'muted.400', }, diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts index 9f5075ee7..282338eb5 100644 --- a/src/theme/components/input.ts +++ b/src/theme/components/input.ts @@ -30,22 +30,23 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => { w: '100%', h: '100%', }, - _light: { - placeholderTextColor: 'text.400', - color: 'text.900', - borderColor: 'muted.300', - _hover: { - borderColor: 'primary.600', - }, - _focus: { - borderColor: 'primary.600', - _hover: { borderColor: 'primary.600' }, - _stack: { - style: { - outlineWidth: '1px', - outlineColor: `${props.focusOutlineColor || primary[600]}`, - outlineStyle: 'solid', - }, + placeholderTextColor: 'text.400', + color: 'text.900', + borderColor: 'muted.300', + _hover: { + borderColor: 'primary.600', + }, + _focus: { + borderColor: 'primary.600', + _hover: { borderColor: 'primary.600' }, + _stack: { + flexDirection: 'row', + alignItems: 'center', + // justifyContent: 'space-between', + overflow: 'hidden', + style: { + outlineWidth: '0', + boxShadow: `0 0 0 1px ${primary[600]}`, }, }, _invalid: { @@ -53,9 +54,8 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => { _hover: { borderColor: 'error.600' }, _stack: { style: { - outlineWidth: '1px', - outlineColor: `${props.invalidOutlineColor || error[600]}`, - outlineStyle: 'solid', + outlineWidth: '0', + boxShadow: `0 0 0 1px ${error[600]}`, }, }, }, @@ -71,12 +71,6 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => { borderColor: 'muted.300', }, }, - _stack: { - flexDirection: 'row', - alignItems: 'center', - // justifyContent: 'space-between', - overflow: 'hidden', - }, }, _dark: { placeholderTextColor: 'text.600', @@ -90,9 +84,8 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => { _hover: { borderColor: 'primary.500' }, _stack: { style: { - outlineWidth: '1px', - outlineColor: `${props.focusOutlineColor || primary[500]}`, - outlineStyle: 'solid', + outlineWidth: '0', + boxShadow: `0 0 0 1px ${primary[500]}`, }, }, }, @@ -100,9 +93,8 @@ const baseStyle = (props: InterfaceInputProps & { theme: any }) => { borderColor: 'error.500', _stack: { style: { - outlineWidth: '1px', - outlineColor: `${props.invalidOutlineColor || error[500]}`, - outlineStyle: 'solid', + outlineWidth: '0', + boxShadow: `0 0 0 1px ${error[500]}`, }, }, _hover: { borderColor: 'error.500' }, @@ -161,10 +153,9 @@ function filledStyle(props: InterfaceInputProps & { theme: any }) { borderWidth: 0, }, }, - _light: { - bg: 'muted.100', - borderColor: 'muted.100', - }, + bg: 'muted.100', + borderColor: 'muted.100', + _dark: { bg: 'muted.800', borderColor: 'muted.800', @@ -200,30 +191,29 @@ function underlinedStyle(props: InterfaceInputProps & { theme: any }) { borderWidth: '0', pl: '0', borderBottomWidth: '1', - _light: { - _focus: { - _stack: { - style: { - outlineWidth: '0', - boxShadow: `0 1px 0 0 ${props.focusOutlineColor || primary[600]}`, - }, + _focus: { + _stack: { + style: { + outlineWidth: '0', + boxShadow: `0 1px 0 0 ${primary[600]}`, }, }, - _invalid: { - _stack: { - style: { - outlineWidth: 0, - boxShadow: `0 1px 0 0 ${props.invalidOutlineColor || error[600]}`, - }, + }, + _invalid: { + _stack: { + style: { + outlineWidth: 0, + boxShadow: `0 1px 0 0 ${error[600]}`, }, }, }, + _dark: { _focus: { _stack: { style: { outlineWidth: '0', - boxShadow: `0 1px 0 0 ${props.focusOutlineColor || primary[500]}`, + boxShadow: `0 1px 0 0 ${primary[500]}`, }, }, }, @@ -231,7 +221,7 @@ function underlinedStyle(props: InterfaceInputProps & { theme: any }) { _stack: { style: { outlineWidth: 0, - boxShadow: `0 1px 0 0 ${props.focusOutlineColor || error[500]}`, + boxShadow: `0 1px 0 0 ${error[500]}`, }, }, }, diff --git a/src/theme/components/inputleftaddon.ts b/src/theme/components/inputleftaddon.ts index cf8f4a898..86ad3a7b6 100644 --- a/src/theme/components/inputleftaddon.ts +++ b/src/theme/components/inputleftaddon.ts @@ -6,17 +6,14 @@ const baseStyle = () => { borderRightWidth: '0', borderLeftRadius: 'sm', _text: { + color: 'text.900', fontWeight: 400, }, alignItems: 'center', justifyContent: 'center', - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, - }, + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', diff --git a/src/theme/components/inputrightaddon.ts b/src/theme/components/inputrightaddon.ts index e8de38dfa..e843ec95d 100644 --- a/src/theme/components/inputrightaddon.ts +++ b/src/theme/components/inputrightaddon.ts @@ -6,17 +6,14 @@ const baseStyle = () => { borderLeftWidth: '0', borderRightRadius: 'sm', _text: { + color: 'text.900', fontWeight: 400, }, alignItems: 'center', justifyContent: 'center', - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, - }, + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', diff --git a/src/theme/components/menu.ts b/src/theme/components/menu.ts index ceb1a7a06..db8d6d5c6 100644 --- a/src/theme/components/menu.ts +++ b/src/theme/components/menu.ts @@ -4,9 +4,7 @@ const baseStyle = { py: 2, borderRadius: 'sm', shadow: 6, - _light: { - bg: 'muted.50', - }, + bg: 'muted.50', _dark: { bg: 'muted.800', }, @@ -35,9 +33,7 @@ export const MenuGroup = { _title: { fontSize: 'xs', textTransform: 'uppercase', - _light: { - color: 'text.500', - }, + color: 'text.500', _dark: { color: 'text.400', }, @@ -60,36 +56,31 @@ export const MenuItem = { _icon: { size: 4, opacity: 0, + color: 'muted.500', + }, + _text: { + color: 'text.900', }, - _light: { + _disabled: { _text: { - color: 'text.900', - }, - _disabled: { - _text: { - color: 'text.400', - }, - }, - _hover: { - bg: 'muted.200', + color: 'text.400', }, - _focus: { + }, + _hover: { + bg: 'muted.200', + }, + _focus: { + bg: 'muted.300', + }, + _pressed: { + bg: 'muted.400', + }, + _focusVisible: { + _web: { + outlineWidth: '0', + style: { boxShadow: `none` }, bg: 'muted.300', }, - _pressed: { - bg: 'muted.400', - }, - - _icon: { - color: 'muted.500', - }, - _focusVisible: { - _web: { - outlineWidth: '0', - style: { boxShadow: `none` }, - bg: 'muted.300', - }, - }, }, _dark: { _text: { @@ -113,12 +104,12 @@ export const MenuItem = { _icon: { color: 'muted.400', }, - }, - _focusVisible: { - _web: { - outlineWidth: '0', - style: { boxShadow: `none` }, - bg: 'muted.600', + _focusVisible: { + _web: { + outlineWidth: '0', + style: { boxShadow: `none` }, + bg: 'muted.600', + }, }, }, _checked: { diff --git a/src/theme/components/modal.ts b/src/theme/components/modal.ts index 7befcdb3f..ea011323a 100644 --- a/src/theme/components/modal.ts +++ b/src/theme/components/modal.ts @@ -63,12 +63,11 @@ export const ModalContent = { rounded: 'lg', maxHeight: `${Dimensions.get('window').height - 150}px`, overflow: 'hidden', - _light: { - bg: 'muted.50', - _text: { - color: 'text.900', - }, + bg: 'muted.50', + _text: { + color: 'text.900', }, + _dark: { bg: 'muted.800', _text: { @@ -94,19 +93,17 @@ export const ModalCloseButton = { cursor: 'pointer', }, _icon: { + color: 'muted.500', size: '4', }, - _light: { - _icon: { - color: 'muted.500', - }, - _hover: { - bg: 'muted.200', - }, - _pressed: { - bg: 'muted.300', - }, + + _hover: { + bg: 'muted.200', + }, + _pressed: { + bg: 'muted.300', }, + _dark: { _icon: { color: 'muted.400', @@ -127,17 +124,15 @@ export const ModalHeader = { p: '4', borderBottomWidth: '1', _text: { + color: 'text.900', fontSize: 'md', fontWeight: 'semibold', lineHeight: 'sm', }, - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, - }, + + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', @@ -152,11 +147,11 @@ export const ModalBody = { baseStyle: () => { return { p: '4', - _light: { - _text: { - color: 'text.900', - }, + + _text: { + color: 'text.900', }, + _dark: { _text: { color: 'text.50', @@ -173,10 +168,10 @@ export const ModalFooter = { justifyContent: 'flex-end', flexWrap: 'wrap', borderTopWidth: 1, - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - }, + + bg: 'muted.50', + borderColor: 'muted.300', + _dark: { bg: 'muted.800', borderColor: 'muted.700', diff --git a/src/theme/components/popover.ts b/src/theme/components/popover.ts index 21947aa52..f21e3ff89 100644 --- a/src/theme/components/popover.ts +++ b/src/theme/components/popover.ts @@ -43,11 +43,9 @@ export const PopoverBody = { baseStyle: () => ({ p: '3', shadow: '6', - _light: { - bg: 'muted.50', - _text: { - color: 'text.900', - }, + bg: 'muted.50', + _text: { + color: 'text.900', }, _dark: { bg: 'muted.800', @@ -62,11 +60,9 @@ export const PopoverContent = { baseStyle: () => ({ //TODO: Box inside PopperContent is not able to resolve shadow // shadow: '6', - _light: { - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, + borderColor: 'muted.300', + _text: { + color: 'text.900', }, _dark: { borderColor: 'muted.700', @@ -91,14 +87,10 @@ export const PopoverHeader = { fontSize: 'md', fontWeight: '700', lineHeight: 'sm', + color: 'text.900', }, - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - _text: { - color: 'text.900', - }, - }, + bg: 'muted.50', + borderColor: 'muted.300', _dark: { bg: 'muted.800', borderColor: 'muted.700', @@ -111,10 +103,8 @@ export const PopoverHeader = { export const PopoverArrow = { baseStyle: () => ({ - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - }, + bg: 'muted.50', + borderColor: 'muted.300', _dark: { bg: 'muted.800', borderColor: 'muted.700', @@ -131,10 +121,8 @@ export const PopoverFooter = { justifyContent: 'flex-end', flexWrap: 'wrap', borderTopWidth: 1, - _light: { - bg: 'muted.50', - borderColor: 'muted.300', - }, + bg: 'muted.50', + borderColor: 'muted.300', _dark: { bg: 'muted.800', borderColor: 'muted.700', diff --git a/src/theme/components/pressable.ts b/src/theme/components/pressable.ts index 2b4924e73..94a74198a 100644 --- a/src/theme/components/pressable.ts +++ b/src/theme/components/pressable.ts @@ -1,19 +1,24 @@ -import { mode } from '../tools'; - const baseStyle = (props: any) => { const { primary } = props.theme.colors; - const focusRing = mode( - { - boxShadow: `${primary[400]} 0px 0px 0px 2px`, - }, - { - boxShadow: `${primary[500]} 0px 0px 0px 2px`, - } - )(props); return { _focusVisible: { - _web: { style: { ...focusRing, outlineWidth: 0 } }, + _web: { + style: { + outlineWidth: 0, + boxShadow: `${primary[400]} 0px 0px 0px 2px`, + }, + }, + }, + _dark: { + _focusVisible: { + _web: { + style: { + outlineWidth: 0, + boxShadow: `${primary[500]} 0px 0px 0px 2px`, + }, + }, + }, }, }; }; diff --git a/src/theme/components/progress.ts b/src/theme/components/progress.ts index a3e4641df..adae62210 100644 --- a/src/theme/components/progress.ts +++ b/src/theme/components/progress.ts @@ -14,6 +14,7 @@ function baseStyle(props: Record) { return { overflow: 'hidden', _filledTrack: { + bg: `${c}.600`, shadow: 0, height: '100%', display: 'flex', @@ -25,12 +26,7 @@ function baseStyle(props: Record) { fontWeight: 'bold', }, }, - _light: { - bg: 'muted.200', - _filledTrack: { - bg: `${c}.600`, - }, - }, + bg: 'muted.200', _dark: { bg: 'muted.700', _filledTrack: { diff --git a/src/theme/components/radio.ts b/src/theme/components/radio.ts index 82b53813f..ec317f999 100644 --- a/src/theme/components/radio.ts +++ b/src/theme/components/radio.ts @@ -6,47 +6,45 @@ const baseStyle = (props: Record) => { borderRadius: 'full', p: 1, - _light: { - bg: 'muted.50', - borderColor: 'muted.400', + bg: 'muted.50', + borderColor: 'muted.400', - _checked: { - borderColor: `${c}.600`, - _icon: { - color: `${c}.600`, - }, - _hover: { - borderColor: `${c}.700`, - _icon: { color: `${c}.700` }, - _disabled: { - borderColor: `${c}.600`, - _icon: { - color: `${c}.600`, - }, - }, - }, - _pressed: { - borderColor: `${c}.800`, - _icon: { color: `${c}.800` }, - }, + _checked: { + borderColor: `${c}.600`, + _icon: { + color: `${c}.600`, }, - _hover: { - borderColor: 'muted.500', + borderColor: `${c}.700`, + _icon: { color: `${c}.700` }, _disabled: { - borderColor: 'muted.400', + borderColor: `${c}.600`, + _icon: { + color: `${c}.600`, + }, }, }, - _pressed: { - borderColor: 'muted.600', + borderColor: `${c}.800`, + _icon: { color: `${c}.800` }, }, + }, - _invalid: { - borderColor: 'error.600', + _hover: { + borderColor: 'muted.500', + _disabled: { + borderColor: 'muted.400', }, }, + _pressed: { + borderColor: 'muted.600', + }, + + _invalid: { + borderColor: 'error.600', + }, + _dark: { bg: 'muted.900', borderColor: 'muted.500', diff --git a/src/theme/components/select.ts b/src/theme/components/select.ts index 37ca7a59d..3a42f28e8 100644 --- a/src/theme/components/select.ts +++ b/src/theme/components/select.ts @@ -4,21 +4,25 @@ export const Select = { selection: { start: 0, }, - _light: { - customDropdownIconProps: { color: 'muted.500', mr: '3' }, - _hover: { - borderColor: 'primary.600', - }, - _focus: { - borderColor: 'primary.600', - }, - _disabled: { - bg: 'muted.100', - placeholderTextColor: 'muted.700', - }, - _invalid: { - borderColor: 'error.600', - }, + + customDropdownIconProps: { + color: 'muted.500', + mr: '3', + size: '6', + p: '1', + }, + _hover: { + borderColor: 'primary.600', + }, + _focus: { + borderColor: 'primary.600', + }, + _disabled: { + bg: 'muted.100', + placeholderTextColor: 'muted.700', + }, + _invalid: { + borderColor: 'error.600', }, _dark: { @@ -31,6 +35,7 @@ export const Select = { }, _disabled: { bg: 'muted.800', + opacity: '80', placeholderTextColor: 'text.50', }, _invalid: { @@ -38,10 +43,6 @@ export const Select = { }, }, - customDropdownIconProps: { - size: '6', - p: '1', - }, _webSelect: { style: { appearance: 'none', @@ -57,9 +58,7 @@ export const Select = { _web: { pointerEvents: 'none', }, - _disabled: { - opacity: '80', - }, + _actionSheetBody: { w: '100%', }, diff --git a/src/theme/components/skeleton.ts b/src/theme/components/skeleton.ts index b85856d3e..b286e069a 100644 --- a/src/theme/components/skeleton.ts +++ b/src/theme/components/skeleton.ts @@ -1,10 +1,11 @@ -import { mode } from '../tools'; - // Skeleton export const Skeleton = { - baseStyle: (props: Record) => { + baseStyle: () => { return { - startColor: mode('muted.200', 'muted.600')(props), + startColor: 'muted.200', + _dark: { + startColor: 'muted.600', + }, endColor: 'transparent', overflow: 'hidden', fadeDuration: 0.1, @@ -17,9 +18,12 @@ export const Skeleton = { // SkeletonText export const SkeletonText = { - baseStyle: (props: Record) => { + baseStyle: () => { return { - startColor: mode('muted.200', 'muted.600')(props), + startColor: 'muted.200', + _dark: { + startColor: 'muted.600', + }, endColor: 'transparent', fadeDuration: 0.1, w: '100%', diff --git a/src/theme/components/slider.ts b/src/theme/components/slider.ts index 69859817b..3c009b342 100644 --- a/src/theme/components/slider.ts +++ b/src/theme/components/slider.ts @@ -1,6 +1,7 @@ export const SliderTrack = { baseStyle: ({ isVertical, size }: any) => { return { + bg: 'muted.200', borderRadius: 'lg', overflow: 'hidden', style: { @@ -15,9 +16,6 @@ export const SliderTrack = { py: !isVertical ? '3' : undefined, px: isVertical ? '3' : undefined, }, - _light: { - bg: 'muted.200', - }, _dark: { bg: 'muted.700', }, @@ -46,29 +44,28 @@ export const SliderThumb = { justifyContent: 'center', space: 2, }, - _light: { - bg: `${colorScheme}.600`, - _hover: { - _web: { - outlineWidth: '4px', - outlineColor: primary[300], - outlineStyle: 'solid', - }, + bg: `${colorScheme}.600`, + _hover: { + _web: { + outlineWidth: '4px', + outlineColor: primary[300], + outlineStyle: 'solid', }, - _focus: { - _web: { - outlineWidth: '2px', - outlineColor: primary[400], - outlineStyle: 'solid', - }, + }, + _focus: { + _web: { + outlineWidth: '2px', + outlineColor: primary[400], + outlineStyle: 'solid', }, - _pressed: { - _interactionBox: { - borderWidth: '8', - borderColor: `${colorScheme}.300`, - }, + }, + _pressed: { + _interactionBox: { + borderWidth: '8', + borderColor: `${colorScheme}.300`, }, }, + _dark: { bg: `${colorScheme}.500`, _hover: { @@ -131,9 +128,7 @@ export const SliderFilledTrack = { orientation === 'vertical' ? { height: sliderTrackPosition, width: size } : { width: sliderTrackPosition, height: size }, - _light: { - bg: `${colorScheme}.600`, - }, + bg: `${colorScheme}.600`, _dark: { bg: `${colorScheme}.500`, }, diff --git a/src/theme/components/switch.ts b/src/theme/components/switch.ts index 9dbfeb169..0e6bc187e 100644 --- a/src/theme/components/switch.ts +++ b/src/theme/components/switch.ts @@ -5,22 +5,19 @@ const baseStyle = (props: Record) => { opacity: 0.4, }, _invalid: { + borderColor: 'error.600', borderWidth: 2, borderRadius: 12, }, onThumbColor: 'muted.50', offThumbColor: 'muted.50', - _light: { - offTrackColor: 'muted.300', - onTrackColor: `${c}.600`, - _hover: { - offTrackColor: 'muted.400', - onTrackColor: `${c}.700`, - }, - _invalid: { - borderColor: 'error.600', - }, + offTrackColor: 'muted.300', + onTrackColor: `${c}.600`, + _hover: { + offTrackColor: 'muted.400', + onTrackColor: `${c}.700`, }, + _dark: { offTrackColor: 'muted.700', onTrackColor: `${c}.500`, diff --git a/src/theme/components/text.ts b/src/theme/components/text.ts index 84d125193..5d3c20033 100644 --- a/src/theme/components/text.ts +++ b/src/theme/components/text.ts @@ -1,8 +1,6 @@ const baseStyle = () => { return { - _light: { - color: 'text.900', - }, + color: 'text.900', _dark: { color: 'text.50', }, diff --git a/src/theme/components/tooltip.ts b/src/theme/components/tooltip.ts index 5f9c69a61..cd939e37b 100644 --- a/src/theme/components/tooltip.ts +++ b/src/theme/components/tooltip.ts @@ -6,13 +6,9 @@ const baseStyle = () => { rounded: 'sm', _text: { fontSize: 'sm', + color: `text.50`, }, - _light: { - bg: `muted.800`, - _text: { - color: `text.50`, - }, - }, + bg: `muted.800`, _dark: { bg: `muted.50`, _text: { diff --git a/src/theme/components/vstack.ts b/src/theme/components/vstack.ts index 7d6cde895..7b0c024c0 100644 --- a/src/theme/components/vstack.ts +++ b/src/theme/components/vstack.ts @@ -1,6 +1,8 @@ const baseStyle = {}; const defaultProps = {}; +const sizes = {}; export default { baseStyle, defaultProps, + sizes, }; diff --git a/src/utils/index.ts b/src/utils/index.ts index 321fd9a64..b1b011aa7 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -19,3 +19,4 @@ export { ariaAttr } from './accessibilityUtils'; export { createContext } from './createContext'; export { useKeyboardBottomInset } from './useKeyboardBottomInset'; export { isEmptyObj } from './isEmptyObj'; +export { resolveStackStyleInput } from './resolveStackStyleInput'; diff --git a/src/utils/resolveStackStyleInput.ts b/src/utils/resolveStackStyleInput.ts new file mode 100644 index 000000000..358f79776 --- /dev/null +++ b/src/utils/resolveStackStyleInput.ts @@ -0,0 +1,17 @@ +export const resolveStackStyleInput = (variant: any, color: any) => { + if (variant === 'underlined') { + return { + outlineWidth: '0', + boxShadow: `0 1px 0 0 ${color}`, + }; + } else if (variant === 'unstyled') { + return { + outlineWidth: 0, + }; + } else { + return { + outlineWidth: '0', + boxShadow: `0 0 0 1px ${color}`, + }; + } +}; diff --git a/yarn.lock b/yarn.lock index db1977875..7f0ef35e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3351,6 +3351,11 @@ resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf" integrity sha512-PeHg/AtdW6aaIO2a+98Xj7rWY4KC1E6yOy7AFknJQ7VXUGNrMlyxDFxJo7HqLtjQms/ZhhQX52mLVW/EX3JGOw== +"@types/use-subscription@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/use-subscription/-/use-subscription-1.0.0.tgz#d146f8d834f70f50d48bd8246a481d096f11db19" + integrity sha512-0WWZ5GUDKMXUY/1zy4Ur5/zsC0s/B+JjXfHdkvx6JgDNZzZV5eW+KKhDqsTGyqX56uh99gwGwbsKbVwkcVIKQA== + "@types/yargs-parser@*": version "15.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"