@helpwave/hightide-native 0.0.2 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -3
- package/src/components/chat/ChatAttachmentCard.tsx +26 -13
- package/src/components/chat/ChatConversationList.tsx +12 -8
- package/src/components/chat/ChatConversationRow.tsx +21 -13
- package/src/components/chat/ChatDateDivider.tsx +18 -8
- package/src/components/chat/ChatMessageBubble.tsx +23 -13
- package/src/components/chat/ChatMessageCard.tsx +25 -14
- package/src/components/chat/ChatMessageComposer.tsx +14 -9
- package/src/components/chat/ChatMessageList.tsx +12 -5
- package/src/components/chat/ChatQuickReplyChip.tsx +7 -6
- package/src/components/chat/ChatSystemLine.tsx +21 -10
- package/src/components/chat/ChatThreadHeader.tsx +19 -9
- package/src/components/menu/Menu.tsx +16 -6
- package/src/components/menu/MenuActionItem.tsx +10 -5
- package/src/components/menu/MenuItem.tsx +16 -6
- package/src/components/menu/MenuNavigationItem.tsx +11 -6
- package/src/components/user-interaction/Button.tsx +18 -11
- package/src/components/user-interaction/Checkbox.tsx +26 -7
- package/src/components/user-interaction/IconButton.tsx +23 -9
- package/src/components/user-interaction/Input.tsx +22 -5
- package/src/components/user-interaction/MultiSelect.tsx +14 -7
- package/src/components/user-interaction/Select.tsx +11 -4
- package/src/components/visualization-and-display/Chip.tsx +21 -9
- package/src/components/visualization-and-display/Icon.tsx +27 -0
- package/src/components/visualization-and-display/index.ts +1 -0
- package/src/global-contexts/HightideContext.ts +4 -1
- package/src/global-contexts/HightideProvider.tsx +21 -9
- package/src/global-contexts/hightide-config/HightideConfigUtils.ts +15 -12
- package/src/global-contexts/localization/LocalizationProvider.tsx +3 -1
- package/src/global-contexts/localization/forward-exports.ts +1 -0
- package/src/global-contexts/theme/ThemeContext.ts +11 -6
- package/src/global-contexts/theme/ThemeProvider.tsx +34 -37
- package/src/hooks/useMultiSelect.ts +1 -0
- package/src/hooks/useNativeKeyValueStore.ts +7 -1
- package/src/hooks/useSelect.ts +1 -0
- package/src/theme/resolvers/button.ts +33 -20
- package/src/theme/resolvers/chat.ts +370 -336
- package/src/theme/resolvers/checkbox.ts +22 -18
- package/src/theme/resolvers/chip.ts +27 -19
- package/src/theme/resolvers/coloring.ts +21 -17
- package/src/theme/resolvers/iconButton.ts +25 -17
- package/src/theme/resolvers/input.ts +25 -18
- package/src/theme/resolvers/menu.ts +37 -29
- package/src/theme/resolvers/multiSelect.ts +20 -16
- package/src/theme/resolvers/select.ts +20 -16
- package/src/theme/themes/createTheme.ts +42 -17
- package/src/theme/themes/nativeThemes.ts +7 -6
- package/src/theme/types/color.ts +60 -0
- package/src/theme/types/components/button.ts +30 -0
- package/src/theme/types/components/chat.ts +198 -0
- package/src/theme/types/{checkbox.ts → components/checkbox.ts} +11 -5
- package/src/theme/types/components/chip.ts +30 -0
- package/src/theme/types/{components.ts → components/hightide.ts} +22 -1
- package/src/theme/types/components/iconButton.ts +30 -0
- package/src/theme/types/components/index.ts +10 -0
- package/src/theme/types/components/input.ts +19 -0
- package/src/theme/types/{menu.ts → components/menu.ts} +21 -14
- package/src/theme/types/{multiSelect.ts → components/multiSelect.ts} +13 -9
- package/src/theme/types/{select.ts → components/select.ts} +18 -11
- package/src/theme/types/decoration.ts +11 -0
- package/src/theme/types/index.ts +4 -9
- package/src/theme/types/layout.ts +46 -0
- package/src/theme/types/theme.ts +14 -10
- package/src/theme/types/typography.ts +18 -0
- package/src/icons/Icon.tsx +0 -35
- package/src/icons/index.ts +0 -1
- package/src/theme/types/button.ts +0 -18
- package/src/theme/types/chat.ts +0 -141
- package/src/theme/types/chip.ts +0 -18
- package/src/theme/types/iconButton.ts +0 -20
- package/src/theme/types/input.ts +0 -15
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createDesignTheme } from './createTheme'
|
|
1
|
+
import { Themes as designThemes } from '@helpwave/hightide-design/tokens'
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
import { createTheme } from './createTheme'
|
|
5
4
|
|
|
6
|
-
export const
|
|
5
|
+
export const lightTheme = createTheme(designThemes.light)
|
|
6
|
+
|
|
7
|
+
export const darkTheme = createTheme(designThemes.dark)
|
|
7
8
|
|
|
8
9
|
export const themes = {
|
|
9
10
|
light: lightTheme,
|
|
10
11
|
dark: darkTheme,
|
|
11
12
|
} as const
|
|
12
13
|
|
|
13
|
-
export type
|
|
14
|
+
export type HightideThemeModes = 'dark' | 'light'
|
|
14
15
|
|
|
15
|
-
export
|
|
16
|
+
export type ThemeMode = string | HightideThemeModes
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export type Color = `#${string}`
|
|
2
|
+
|
|
3
|
+
export type ColorPalette = Record<number, Color>
|
|
4
|
+
|
|
5
|
+
export type HightideColors = {
|
|
6
|
+
white: Color,
|
|
7
|
+
black: Color,
|
|
8
|
+
gray: ColorPalette,
|
|
9
|
+
green: ColorPalette,
|
|
10
|
+
orange: ColorPalette,
|
|
11
|
+
purple: ColorPalette,
|
|
12
|
+
blue: ColorPalette,
|
|
13
|
+
red: ColorPalette,
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export type HightideSemanticColors = {
|
|
17
|
+
background: Color,
|
|
18
|
+
onBackground: Color,
|
|
19
|
+
warning: Color,
|
|
20
|
+
onWarning: Color,
|
|
21
|
+
warningHover: Color,
|
|
22
|
+
positive: Color,
|
|
23
|
+
onPositive: Color,
|
|
24
|
+
positiveHover: Color,
|
|
25
|
+
negative: Color,
|
|
26
|
+
onNegative: Color,
|
|
27
|
+
negativeHover: Color,
|
|
28
|
+
disabled: Color,
|
|
29
|
+
onDisabled: Color,
|
|
30
|
+
surface: Color,
|
|
31
|
+
onSurface: Color,
|
|
32
|
+
surfaceHover: Color,
|
|
33
|
+
surfaceVariant: Color,
|
|
34
|
+
onSurfaceVariant: Color,
|
|
35
|
+
surfaceWarning: Color,
|
|
36
|
+
onSurfaceWarning: Color,
|
|
37
|
+
textPrimary: Color,
|
|
38
|
+
textSecondary: Color,
|
|
39
|
+
textTertiary: Color,
|
|
40
|
+
placeholder: Color,
|
|
41
|
+
description: Color,
|
|
42
|
+
label: Color,
|
|
43
|
+
primary: Color,
|
|
44
|
+
onPrimary: Color,
|
|
45
|
+
primaryHover: Color,
|
|
46
|
+
secondary: Color,
|
|
47
|
+
onSecondary: Color,
|
|
48
|
+
secondaryHover: Color,
|
|
49
|
+
neutral: Color,
|
|
50
|
+
onNeutral: Color,
|
|
51
|
+
neutralHover: Color,
|
|
52
|
+
neutralText: Color,
|
|
53
|
+
neutralTextHover: Color,
|
|
54
|
+
neutralOutline: Color,
|
|
55
|
+
neutralOutlineHover: Color,
|
|
56
|
+
neutralTonalText: Color,
|
|
57
|
+
neutralTonalBackground: Color,
|
|
58
|
+
faded: Color,
|
|
59
|
+
highlight: Color,
|
|
60
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
5
|
+
|
|
6
|
+
import type { ColoringType } from '@helpwave/hightide-design/helpers'
|
|
7
|
+
import type {
|
|
8
|
+
ButtonColoringStyle,
|
|
9
|
+
ElementSize
|
|
10
|
+
} from '@helpwave/hightide-design/types'
|
|
11
|
+
|
|
12
|
+
import type {
|
|
13
|
+
InteractionState,
|
|
14
|
+
StyleResolverFunction
|
|
15
|
+
} from '../resolver'
|
|
16
|
+
|
|
17
|
+
export type ButtonState = InteractionState & {
|
|
18
|
+
size?: ElementSize,
|
|
19
|
+
color?: ColoringType,
|
|
20
|
+
coloringStyle?: ButtonColoringStyle,
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export type ButtonStyle = ViewStyle
|
|
24
|
+
|
|
25
|
+
export type ButtonTextStyle = TextStyle
|
|
26
|
+
|
|
27
|
+
export type ButtonTheme = {
|
|
28
|
+
button: StyleResolverFunction<ButtonState, ButtonStyle>,
|
|
29
|
+
text: StyleResolverFunction<ButtonState, ButtonTextStyle>,
|
|
30
|
+
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
5
|
+
|
|
6
|
+
import type { ColoringType } from '@helpwave/hightide-design/helpers'
|
|
7
|
+
|
|
8
|
+
import type { Color } from '../color'
|
|
9
|
+
import type {
|
|
10
|
+
InteractionState,
|
|
11
|
+
StyleResolverFunction
|
|
12
|
+
} from '../resolver'
|
|
13
|
+
|
|
14
|
+
export type ChatMessageDirection = 'incoming' | 'outgoing'
|
|
15
|
+
|
|
16
|
+
export type ChatConversationRowState = InteractionState & {
|
|
17
|
+
isUnread?: boolean,
|
|
18
|
+
isSelected?: boolean,
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export type ChatConversationRowStyle = ViewStyle
|
|
22
|
+
export type ChatConversationRowTitleStyle = TextStyle
|
|
23
|
+
export type ChatConversationRowTimestampStyle = TextStyle
|
|
24
|
+
export type ChatConversationRowPreviewStyle = TextStyle
|
|
25
|
+
export type ChatConversationRowUnreadBadgeStyle = ViewStyle
|
|
26
|
+
export type ChatConversationRowUnreadBadgeTextStyle = TextStyle
|
|
27
|
+
|
|
28
|
+
export type ChatConversationListStyle = ViewStyle
|
|
29
|
+
export type ChatConversationListHeaderStyle = ViewStyle
|
|
30
|
+
export type ChatConversationListFooterStyle = ViewStyle
|
|
31
|
+
|
|
32
|
+
export type ChatThreadHeaderStyle = ViewStyle
|
|
33
|
+
export type ChatThreadHeaderTitleStyle = TextStyle
|
|
34
|
+
export type ChatThreadHeaderSubtitleStyle = TextStyle
|
|
35
|
+
|
|
36
|
+
export type ChatMessageListStyle = ViewStyle
|
|
37
|
+
|
|
38
|
+
export type ChatMessageBubbleState = {
|
|
39
|
+
direction: ChatMessageDirection,
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export type ChatMessageBubbleContainerStyle = ViewStyle
|
|
43
|
+
export type ChatMessageBubbleStyle = ViewStyle
|
|
44
|
+
export type ChatMessageBubbleContentStyle = TextStyle
|
|
45
|
+
export type ChatMessageBubbleTimestampStyle = TextStyle
|
|
46
|
+
export type ChatMessageBubbleReceiptStyle = ViewStyle
|
|
47
|
+
export type ChatMessageBubbleReceiptTextStyle = TextStyle
|
|
48
|
+
|
|
49
|
+
export type ChatMessageBubbleReceiptIconStyle = {
|
|
50
|
+
color: Color,
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export type ChatMessageCardState = {
|
|
54
|
+
direction: ChatMessageDirection,
|
|
55
|
+
color?: ColoringType,
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export type ChatMessageCardStyle = ViewStyle
|
|
59
|
+
export type ChatMessageCardHeaderStyle = ViewStyle
|
|
60
|
+
export type ChatMessageCardIconStyle = ViewStyle
|
|
61
|
+
|
|
62
|
+
export type ChatMessageCardIconColor = {
|
|
63
|
+
color: Color,
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export type ChatMessageCardTitleStyle = TextStyle
|
|
67
|
+
export type ChatMessageCardSubtitleStyle = TextStyle
|
|
68
|
+
export type ChatMessageCardBodyStyle = ViewStyle
|
|
69
|
+
export type ChatMessageCardActionsStyle = ViewStyle
|
|
70
|
+
|
|
71
|
+
export type ChatAttachmentCardState = {
|
|
72
|
+
direction: ChatMessageDirection,
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export type ChatAttachmentCardStyle = ViewStyle
|
|
76
|
+
export type ChatAttachmentCardIconStyle = ViewStyle
|
|
77
|
+
|
|
78
|
+
export type ChatAttachmentCardIconColor = {
|
|
79
|
+
color: Color,
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export type ChatAttachmentCardNameStyle = TextStyle
|
|
83
|
+
export type ChatAttachmentCardMetadataStyle = TextStyle
|
|
84
|
+
|
|
85
|
+
export type ChatSystemLineState = {
|
|
86
|
+
color?: ColoringType,
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export type ChatSystemLineStyle = ViewStyle
|
|
90
|
+
export type ChatSystemLineTextStyle = TextStyle
|
|
91
|
+
|
|
92
|
+
export type ChatSystemLineIconStyle = {
|
|
93
|
+
color: Color,
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export type ChatDateDividerStyle = ViewStyle
|
|
97
|
+
export type ChatDateDividerTextStyle = TextStyle
|
|
98
|
+
|
|
99
|
+
export type ChatQuickReplyChipState = InteractionState & {
|
|
100
|
+
isActive?: boolean,
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export type ChatQuickReplyChipStyle = ViewStyle
|
|
104
|
+
export type ChatQuickReplyChipTextStyle = TextStyle
|
|
105
|
+
|
|
106
|
+
export type ChatMessageComposerStyle = ViewStyle
|
|
107
|
+
export type ChatMessageComposerInputStyle = TextStyle
|
|
108
|
+
|
|
109
|
+
export type ChatConversationRowTheme = {
|
|
110
|
+
container: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
|
|
111
|
+
title: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTitleStyle>,
|
|
112
|
+
timestamp: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTimestampStyle>,
|
|
113
|
+
preview: StyleResolverFunction<ChatConversationRowState, ChatConversationRowPreviewStyle>,
|
|
114
|
+
unreadBadge: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeStyle>,
|
|
115
|
+
unreadBadgeText: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeTextStyle>,
|
|
116
|
+
sentIndicator: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export type ChatConversationListTheme = {
|
|
120
|
+
container: StyleResolverFunction<Record<string, never>, ChatConversationListStyle>,
|
|
121
|
+
header: StyleResolverFunction<Record<string, never>, ChatConversationListHeaderStyle>,
|
|
122
|
+
footer: StyleResolverFunction<Record<string, never>, ChatConversationListFooterStyle>,
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export type ChatThreadHeaderTheme = {
|
|
126
|
+
container: StyleResolverFunction<Record<string, never>, ChatThreadHeaderStyle>,
|
|
127
|
+
title: StyleResolverFunction<Record<string, never>, ChatThreadHeaderTitleStyle>,
|
|
128
|
+
subtitle: StyleResolverFunction<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export type ChatMessageListTheme = {
|
|
132
|
+
container: StyleResolverFunction<Record<string, never>, ChatMessageListStyle>,
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export type ChatMessageBubbleTheme = {
|
|
136
|
+
container: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
|
|
137
|
+
bubble: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleStyle>,
|
|
138
|
+
content: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContentStyle>,
|
|
139
|
+
timestamp: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleTimestampStyle>,
|
|
140
|
+
receipt: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptStyle>,
|
|
141
|
+
receiptText: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptTextStyle>,
|
|
142
|
+
receiptIcon: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
export type ChatMessageCardTheme = {
|
|
146
|
+
container: StyleResolverFunction<ChatMessageCardState, ChatMessageCardStyle>,
|
|
147
|
+
header: StyleResolverFunction<Record<string, never>, ChatMessageCardHeaderStyle>,
|
|
148
|
+
icon: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconStyle>,
|
|
149
|
+
iconColor: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconColor>,
|
|
150
|
+
title: StyleResolverFunction<ChatMessageCardState, ChatMessageCardTitleStyle>,
|
|
151
|
+
subtitle: StyleResolverFunction<Record<string, never>, ChatMessageCardSubtitleStyle>,
|
|
152
|
+
body: StyleResolverFunction<Record<string, never>, ChatMessageCardBodyStyle>,
|
|
153
|
+
actions: StyleResolverFunction<Record<string, never>, ChatMessageCardActionsStyle>,
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
export type ChatAttachmentCardTheme = {
|
|
157
|
+
container: StyleResolverFunction<ChatAttachmentCardState, ChatAttachmentCardStyle>,
|
|
158
|
+
icon: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconStyle>,
|
|
159
|
+
iconColor: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconColor>,
|
|
160
|
+
name: StyleResolverFunction<Record<string, never>, ChatAttachmentCardNameStyle>,
|
|
161
|
+
metadata: StyleResolverFunction<Record<string, never>, ChatAttachmentCardMetadataStyle>,
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export type ChatSystemLineTheme = {
|
|
165
|
+
container: StyleResolverFunction<ChatSystemLineState, ChatSystemLineStyle>,
|
|
166
|
+
text: StyleResolverFunction<ChatSystemLineState, ChatSystemLineTextStyle>,
|
|
167
|
+
icon: StyleResolverFunction<ChatSystemLineState, ChatSystemLineIconStyle>,
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
export type ChatDateDividerTheme = {
|
|
171
|
+
container: StyleResolverFunction<Record<string, never>, ChatDateDividerStyle>,
|
|
172
|
+
text: StyleResolverFunction<Record<string, never>, ChatDateDividerTextStyle>,
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
export type ChatQuickReplyChipTheme = {
|
|
176
|
+
container: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
|
|
177
|
+
text: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
export type ChatMessageComposerTheme = {
|
|
181
|
+
container: StyleResolverFunction<Record<string, never>, ChatMessageComposerStyle>,
|
|
182
|
+
input: StyleResolverFunction<Record<string, never>, ChatMessageComposerInputStyle>,
|
|
183
|
+
placeholderColor: StyleResolverFunction<Record<string, never>, Color>,
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
export type ChatTheme = {
|
|
187
|
+
conversationRow: ChatConversationRowTheme,
|
|
188
|
+
conversationList: ChatConversationListTheme,
|
|
189
|
+
threadHeader: ChatThreadHeaderTheme,
|
|
190
|
+
messageList: ChatMessageListTheme,
|
|
191
|
+
messageBubble: ChatMessageBubbleTheme,
|
|
192
|
+
messageCard: ChatMessageCardTheme,
|
|
193
|
+
attachmentCard: ChatAttachmentCardTheme,
|
|
194
|
+
systemLine: ChatSystemLineTheme,
|
|
195
|
+
dateDivider: ChatDateDividerTheme,
|
|
196
|
+
quickReplyChip: ChatQuickReplyChipTheme,
|
|
197
|
+
messageComposer: ChatMessageComposerTheme,
|
|
198
|
+
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
import type {
|
|
1
|
+
import type { ViewStyle } from 'react-native'
|
|
2
|
+
|
|
3
|
+
import type { ElementSize } from '@helpwave/hightide-design/types'
|
|
4
|
+
|
|
5
|
+
import type { Color } from '../color'
|
|
6
|
+
import type {
|
|
7
|
+
InteractionState,
|
|
8
|
+
StyleResolverFunction
|
|
9
|
+
} from '../resolver'
|
|
4
10
|
|
|
5
11
|
export type CheckboxSize = 'sm' | 'md' | 'lg'
|
|
6
12
|
|
|
@@ -13,10 +19,10 @@ export type CheckboxState = InteractionState & {
|
|
|
13
19
|
alwaysShowCheckIcon?: boolean,
|
|
14
20
|
}
|
|
15
21
|
|
|
16
|
-
export type CheckboxStyle =
|
|
22
|
+
export type CheckboxStyle = ViewStyle
|
|
17
23
|
|
|
18
24
|
export type CheckboxIconStyle = {
|
|
19
|
-
color:
|
|
25
|
+
color: Color,
|
|
20
26
|
size: Exclude<ElementSize, 'xs'>,
|
|
21
27
|
visible: boolean,
|
|
22
28
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
5
|
+
|
|
6
|
+
import type { ColoringType } from '@helpwave/hightide-design/helpers'
|
|
7
|
+
import type {
|
|
8
|
+
ChipColoringStyle,
|
|
9
|
+
ElementSize
|
|
10
|
+
} from '@helpwave/hightide-design/types'
|
|
11
|
+
|
|
12
|
+
import type {
|
|
13
|
+
InteractionState,
|
|
14
|
+
StyleResolverFunction
|
|
15
|
+
} from '../resolver'
|
|
16
|
+
|
|
17
|
+
export type ChipState = InteractionState & {
|
|
18
|
+
size?: ElementSize,
|
|
19
|
+
color?: ColoringType,
|
|
20
|
+
coloringStyle?: ChipColoringStyle,
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export type ChipStyle = ViewStyle
|
|
24
|
+
|
|
25
|
+
export type ChipTextStyle = TextStyle
|
|
26
|
+
|
|
27
|
+
export type ChipTheme = {
|
|
28
|
+
chip: StyleResolverFunction<ChipState, ChipStyle>,
|
|
29
|
+
text: StyleResolverFunction<ChipState, ChipTextStyle>,
|
|
30
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Color } from '../color'
|
|
1
2
|
import type { ButtonTheme } from './button'
|
|
2
3
|
import type { ChatTheme } from './chat'
|
|
3
4
|
import type { CheckboxTheme } from './checkbox'
|
|
@@ -8,7 +9,27 @@ import type { MenuTheme } from './menu'
|
|
|
8
9
|
import type { MultiSelectTheme } from './multiSelect'
|
|
9
10
|
import type { SelectTheme } from './select'
|
|
10
11
|
|
|
11
|
-
export type
|
|
12
|
+
export type ColoringDefinition = {
|
|
13
|
+
color: Color,
|
|
14
|
+
onColor: Color,
|
|
15
|
+
hover: Color,
|
|
16
|
+
text?: Color,
|
|
17
|
+
textHover?: Color,
|
|
18
|
+
outline?: Color,
|
|
19
|
+
outlineHover?: Color,
|
|
20
|
+
tonalText?: Color,
|
|
21
|
+
tonalBackground?: Color,
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export type HightideComponentThemes = {
|
|
25
|
+
coloring: {
|
|
26
|
+
primary: ColoringDefinition,
|
|
27
|
+
secondary: ColoringDefinition,
|
|
28
|
+
positive: ColoringDefinition,
|
|
29
|
+
warning: ColoringDefinition,
|
|
30
|
+
negative: ColoringDefinition,
|
|
31
|
+
neutral: ColoringDefinition,
|
|
32
|
+
} & Record<string, ColoringDefinition>,
|
|
12
33
|
button: ButtonTheme,
|
|
13
34
|
iconButton: IconButtonTheme,
|
|
14
35
|
chip: ChipTheme,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ViewStyle } from 'react-native'
|
|
2
|
+
|
|
3
|
+
import type { ColoringType } from '@helpwave/hightide-design/helpers'
|
|
4
|
+
import type {
|
|
5
|
+
ButtonColoringStyle,
|
|
6
|
+
ElementSize
|
|
7
|
+
} from '@helpwave/hightide-design/types'
|
|
8
|
+
|
|
9
|
+
import type { Color } from '../color'
|
|
10
|
+
import type {
|
|
11
|
+
InteractionState,
|
|
12
|
+
StyleResolverFunction
|
|
13
|
+
} from '../resolver'
|
|
14
|
+
|
|
15
|
+
export type IconButtonState = InteractionState & {
|
|
16
|
+
size?: ElementSize,
|
|
17
|
+
color?: ColoringType,
|
|
18
|
+
coloringStyle?: ButtonColoringStyle,
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export type IconButtonStyle = ViewStyle
|
|
22
|
+
|
|
23
|
+
export type IconButtonIconStyle = {
|
|
24
|
+
color: Color,
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export type IconButtonTheme = {
|
|
28
|
+
button: StyleResolverFunction<IconButtonState, IconButtonStyle>,
|
|
29
|
+
icon: StyleResolverFunction<IconButtonState, IconButtonIconStyle>,
|
|
30
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export * from './button'
|
|
2
|
+
export * from './chat'
|
|
3
|
+
export * from './checkbox'
|
|
4
|
+
export * from './chip'
|
|
5
|
+
export * from './hightide'
|
|
6
|
+
export * from './iconButton'
|
|
7
|
+
export * from './input'
|
|
8
|
+
export * from './menu'
|
|
9
|
+
export * from './multiSelect'
|
|
10
|
+
export * from './select'
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { TextStyle } from 'react-native'
|
|
2
|
+
|
|
3
|
+
import type { Color } from '../color'
|
|
4
|
+
import type {
|
|
5
|
+
InteractionState,
|
|
6
|
+
StyleResolverFunction
|
|
7
|
+
} from '../resolver'
|
|
8
|
+
|
|
9
|
+
export type InputState = InteractionState & {
|
|
10
|
+
isInvalid?: boolean,
|
|
11
|
+
isReadOnly?: boolean,
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type InputStyle = TextStyle
|
|
15
|
+
|
|
16
|
+
export type InputTheme = {
|
|
17
|
+
input: StyleResolverFunction<InputState, InputStyle>,
|
|
18
|
+
placeholderColor: StyleResolverFunction<InputState, Color>,
|
|
19
|
+
}
|
|
@@ -1,33 +1,40 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
import type { Color } from '../color'
|
|
7
|
+
import type {
|
|
8
|
+
InteractionState,
|
|
9
|
+
StyleResolverFunction
|
|
10
|
+
} from '../resolver'
|
|
6
11
|
|
|
7
|
-
export type
|
|
12
|
+
export type MenuSectionStyle = ViewStyle
|
|
8
13
|
|
|
9
|
-
export type
|
|
14
|
+
export type MenuSectionTitleStyle = TextStyle
|
|
10
15
|
|
|
11
|
-
export type
|
|
16
|
+
export type MenuCardStyle = ViewStyle
|
|
12
17
|
|
|
13
|
-
export type
|
|
18
|
+
export type MenuItemStyle = ViewStyle
|
|
14
19
|
|
|
15
|
-
export type
|
|
20
|
+
export type MenuItemContentStyle = ViewStyle
|
|
16
21
|
|
|
17
|
-
export type
|
|
22
|
+
export type MenuItemLabelStyle = TextStyle
|
|
23
|
+
|
|
24
|
+
export type MenuItemValueStyle = TextStyle
|
|
18
25
|
|
|
19
26
|
export type MenuActionItemState = InteractionState & {
|
|
20
27
|
isDanger?: boolean,
|
|
21
28
|
}
|
|
22
29
|
|
|
23
|
-
export type MenuActionItemStyle =
|
|
30
|
+
export type MenuActionItemStyle = ViewStyle
|
|
24
31
|
|
|
25
|
-
export type MenuActionItemContentStyle =
|
|
32
|
+
export type MenuActionItemContentStyle = ViewStyle
|
|
26
33
|
|
|
27
|
-
export type MenuActionItemLabelStyle =
|
|
34
|
+
export type MenuActionItemLabelStyle = TextStyle
|
|
28
35
|
|
|
29
36
|
export type MenuActionItemIconColor = {
|
|
30
|
-
color:
|
|
37
|
+
color: Color,
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
export type MenuTheme = {
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
5
|
+
|
|
6
|
+
import type { Color } from '../color'
|
|
4
7
|
import type {
|
|
5
8
|
SelectMenuStyle,
|
|
6
9
|
SelectOptionState,
|
|
@@ -9,6 +12,7 @@ import type {
|
|
|
9
12
|
SelectState,
|
|
10
13
|
SelectTriggerTextStyle
|
|
11
14
|
} from './select'
|
|
15
|
+
import type { StyleResolverFunction } from '../resolver'
|
|
12
16
|
|
|
13
17
|
export type MultiSelectState = SelectState & {
|
|
14
18
|
hasSelections?: boolean,
|
|
@@ -16,16 +20,16 @@ export type MultiSelectState = SelectState & {
|
|
|
16
20
|
|
|
17
21
|
export type MultiSelectOptionState = SelectOptionState
|
|
18
22
|
|
|
19
|
-
export type MultiSelectTriggerStyle =
|
|
23
|
+
export type MultiSelectTriggerStyle = ViewStyle
|
|
20
24
|
|
|
21
|
-
export type MultiSelectOptionStyle =
|
|
25
|
+
export type MultiSelectOptionStyle = ViewStyle
|
|
22
26
|
|
|
23
|
-
export type MultiSelectOptionTextStyle =
|
|
27
|
+
export type MultiSelectOptionTextStyle = TextStyle
|
|
24
28
|
|
|
25
|
-
export type MultiSelectCheckboxStyle =
|
|
29
|
+
export type MultiSelectCheckboxStyle = ViewStyle
|
|
26
30
|
|
|
27
31
|
export type MultiSelectCheckboxIconStyle = {
|
|
28
|
-
color:
|
|
32
|
+
color: Color,
|
|
29
33
|
visible: boolean,
|
|
30
34
|
}
|
|
31
35
|
|
|
@@ -35,7 +39,7 @@ export type MultiSelectTheme = {
|
|
|
35
39
|
overlay: StyleResolverFunction<MultiSelectState, SelectOverlayStyle>,
|
|
36
40
|
menu: StyleResolverFunction<MultiSelectState, SelectMenuStyle>,
|
|
37
41
|
search: StyleResolverFunction<MultiSelectState, SelectSearchStyle>,
|
|
38
|
-
searchPlaceholderColor: StyleResolverFunction<MultiSelectState,
|
|
42
|
+
searchPlaceholderColor: StyleResolverFunction<MultiSelectState, Color>,
|
|
39
43
|
option: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
|
|
40
44
|
optionText: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
|
|
41
45
|
checkbox: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type {
|
|
2
|
+
TextStyle,
|
|
3
|
+
ViewStyle
|
|
4
|
+
} from 'react-native'
|
|
5
|
+
|
|
6
|
+
import type { Color } from '../color'
|
|
7
|
+
import type {
|
|
8
|
+
InteractionState,
|
|
9
|
+
StyleResolverFunction
|
|
10
|
+
} from '../resolver'
|
|
4
11
|
|
|
5
12
|
export type SelectState = InteractionState & {
|
|
6
13
|
isInvalid?: boolean,
|
|
@@ -14,19 +21,19 @@ export type SelectOptionState = InteractionState & {
|
|
|
14
21
|
isHighlighted?: boolean,
|
|
15
22
|
}
|
|
16
23
|
|
|
17
|
-
export type SelectTriggerStyle =
|
|
24
|
+
export type SelectTriggerStyle = ViewStyle
|
|
18
25
|
|
|
19
|
-
export type SelectTriggerTextStyle =
|
|
26
|
+
export type SelectTriggerTextStyle = TextStyle
|
|
20
27
|
|
|
21
|
-
export type SelectOverlayStyle =
|
|
28
|
+
export type SelectOverlayStyle = ViewStyle
|
|
22
29
|
|
|
23
|
-
export type SelectMenuStyle =
|
|
30
|
+
export type SelectMenuStyle = ViewStyle
|
|
24
31
|
|
|
25
|
-
export type SelectSearchStyle =
|
|
32
|
+
export type SelectSearchStyle = TextStyle
|
|
26
33
|
|
|
27
|
-
export type SelectOptionStyle =
|
|
34
|
+
export type SelectOptionStyle = ViewStyle
|
|
28
35
|
|
|
29
|
-
export type SelectOptionTextStyle =
|
|
36
|
+
export type SelectOptionTextStyle = TextStyle
|
|
30
37
|
|
|
31
38
|
export type SelectTheme = {
|
|
32
39
|
trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
|
|
@@ -34,7 +41,7 @@ export type SelectTheme = {
|
|
|
34
41
|
overlay: StyleResolverFunction<SelectState, SelectOverlayStyle>,
|
|
35
42
|
menu: StyleResolverFunction<SelectState, SelectMenuStyle>,
|
|
36
43
|
search: StyleResolverFunction<SelectState, SelectSearchStyle>,
|
|
37
|
-
searchPlaceholderColor: StyleResolverFunction<SelectState,
|
|
44
|
+
searchPlaceholderColor: StyleResolverFunction<SelectState, Color>,
|
|
38
45
|
option: StyleResolverFunction<SelectOptionState, SelectOptionStyle>,
|
|
39
46
|
optionText: StyleResolverFunction<SelectOptionState, SelectOptionTextStyle>,
|
|
40
47
|
}
|
package/src/theme/types/index.ts
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
export * from './
|
|
2
|
-
export * from './chat'
|
|
3
|
-
export * from './checkbox'
|
|
4
|
-
export * from './chip'
|
|
1
|
+
export * from './color'
|
|
5
2
|
export * from './components'
|
|
6
|
-
export * from './
|
|
7
|
-
export * from './
|
|
8
|
-
export * from './menu'
|
|
9
|
-
export * from './multiSelect'
|
|
3
|
+
export * from './decoration'
|
|
4
|
+
export * from './layout'
|
|
10
5
|
export * from './resolver'
|
|
11
|
-
export * from './select'
|
|
12
6
|
export * from './theme'
|
|
7
|
+
export * from './typography'
|