forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Theme tweaks (#3004)
* Improve contrast using existing scale
* Make it mathy
* Tweaks
* Adjust noty
* Remove console
* Cleanup
* Match saturation
* Replace usages of tokens with correct palette
(cherry picked from commit 1d9c7079dc25dfa492bd482c1c7661ea2e822d68)
* Replace other colors, tweak usages
(cherry picked from commit df97f249b2f140bbc010449fddb011a31795919a)
* Last couple things
(cherry picked from commit 3b5cee131f68ea8f4125f2c32b9a4b20f5b91086)
* fix "Users" being the wrong color on user list about
---------
Co-authored-by: Hailey <me@haileyok.com>
authored by
Eric Bailey
Hailey
and committed by
GitHub
2962862d
411061ea
+195
-133
+72
-36
src/alf/themes.ts
+72
-36
src/alf/themes.ts
···
1
1
import * as tokens from '#/alf/tokens'
2
2
import type {Mutable} from '#/alf/types'
3
3
import {atoms} from '#/alf/atoms'
4
+
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
4
5
5
6
export type ThemeName = 'light' | 'dim' | 'dark'
6
7
export type ReadonlyTheme = typeof light
···
73
74
white: tokens.color.gray_0,
74
75
black: tokens.color.trueBlack,
75
76
76
-
contrast_25: `hsl(211, 28%, 8%)`,
77
-
contrast_50: `hsl(211, 28%, 11%)`,
78
-
contrast_100: `hsl(211, 28%, 16%)`,
79
-
contrast_200: `hsl(211, 28%, 24%)`,
80
-
contrast_300: `hsl(211, 24%, 31%)`,
81
-
contrast_400: `hsl(211, 24%, 38%)`,
82
-
contrast_500: `hsl(211, 20%, 44%)`,
83
-
contrast_600: `hsl(211, 20%, 55%)`,
84
-
contrast_700: `hsl(211, 20%, 63%)`,
85
-
contrast_800: `hsl(211, 20%, 71%)`,
86
-
contrast_900: `hsl(211, 20%, 79%)`,
87
-
contrast_950: `hsl(211, 20%, 87%)`,
88
-
contrast_975: `hsl(211, 20%, 95%)`,
77
+
contrast_25: tokens.color.gray_1000,
78
+
contrast_50: tokens.color.gray_975,
79
+
contrast_100: tokens.color.gray_950,
80
+
contrast_200: tokens.color.gray_900,
81
+
contrast_300: tokens.color.gray_800,
82
+
contrast_400: tokens.color.gray_700,
83
+
contrast_500: tokens.color.gray_600,
84
+
contrast_600: tokens.color.gray_500,
85
+
contrast_700: tokens.color.gray_400,
86
+
contrast_800: tokens.color.gray_300,
87
+
contrast_900: tokens.color.gray_200,
88
+
contrast_950: tokens.color.gray_100,
89
+
contrast_975: tokens.color.gray_50,
89
90
90
91
primary_25: tokens.color.blue_25,
91
92
primary_50: tokens.color.blue_50,
···
132
133
133
134
export const dimPalette: Palette = {
134
135
...darkPalette,
135
-
black: `hsl(211, 28%, 12%)`,
136
+
black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
136
137
137
-
contrast_25: `hsl(211, 28%, 15%)`,
138
-
contrast_50: `hsl(211, 28%, 18%)`,
139
-
contrast_100: `hsl(211, 28%, 24%)`,
140
-
contrast_200: `hsl(211, 28%, 27%)`,
141
-
contrast_300: `hsl(211, 24%, 34%)`,
142
-
contrast_400: `hsl(211, 24%, 41%)`,
143
-
contrast_500: `hsl(211, 20%, 52%)`,
144
-
contrast_600: `hsl(211, 20%, 55%)`,
145
-
contrast_700: `hsl(211, 20%, 67%)`,
146
-
contrast_800: `hsl(211, 20%, 71%)`,
147
-
contrast_900: `hsl(211, 20%, 79%)`,
148
-
contrast_950: `hsl(211, 20%, 87%)`,
149
-
contrast_975: `hsl(211, 20%, 95%)`,
138
+
contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`,
139
+
contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`,
140
+
contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`,
141
+
contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`,
142
+
contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`,
143
+
contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`,
144
+
contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`,
145
+
contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`,
146
+
contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`,
147
+
contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`,
148
+
contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`,
149
+
contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`,
150
+
contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`,
150
151
151
-
primary_600: `hsl(211, 95%, 39%)`,
152
-
primary_700: `hsl(211, 90%, 30%)`,
153
-
primary_800: `hsl(211, 90%, 23%)`,
154
-
primary_900: `hsl(211, 80%, 16%)`,
155
-
primary_950: `hsl(211, 80%, 13%)`,
156
-
primary_975: `hsl(211, 80%, 10%)`,
152
+
primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[13]}%)`,
153
+
primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[12]}%)`,
154
+
primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[11]}%)`,
155
+
primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[10]}%)`,
156
+
primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[9]}%)`,
157
+
primary_400: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[8]}%)`,
158
+
primary_500: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[7]}%)`,
159
+
primary_600: `hsl(${BLUE_HUE}, 95%, ${tokens.dimScale[6]}%)`,
160
+
primary_700: `hsl(${BLUE_HUE}, 90%, ${tokens.dimScale[5]}%)`,
161
+
primary_800: `hsl(${BLUE_HUE}, 82%, ${tokens.dimScale[4]}%)`,
162
+
primary_900: `hsl(${BLUE_HUE}, 70%, ${tokens.dimScale[3]}%)`,
163
+
primary_950: `hsl(${BLUE_HUE}, 60%, ${tokens.dimScale[2]}%)`,
164
+
primary_975: `hsl(${BLUE_HUE}, 50%, ${tokens.dimScale[1]}%)`,
165
+
166
+
positive_25: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[13]}%)`,
167
+
positive_50: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[12]}%)`,
168
+
positive_100: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[11]}%)`,
169
+
positive_200: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[10]}%)`,
170
+
positive_300: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[9]}%)`,
171
+
positive_400: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[8]}%)`,
172
+
positive_500: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[7]}%)`,
173
+
positive_600: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[6]}%)`,
174
+
positive_700: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[5]}%)`,
175
+
positive_800: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[4]}%)`,
176
+
positive_900: `hsl(${GREEN_HUE}, 70%, ${tokens.dimScale[3]}%)`,
177
+
positive_950: `hsl(${GREEN_HUE}, 60%, ${tokens.dimScale[2]}%)`,
178
+
positive_975: `hsl(${GREEN_HUE}, 50%, ${tokens.dimScale[1]}%)`,
179
+
180
+
negative_25: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[13]}%)`,
181
+
negative_50: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[12]}%)`,
182
+
negative_100: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[11]}%)`,
183
+
negative_200: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[10]}%)`,
184
+
negative_300: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[9]}%)`,
185
+
negative_400: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[8]}%)`,
186
+
negative_500: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[7]}%)`,
187
+
negative_600: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[6]}%)`,
188
+
negative_700: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[5]}%)`,
189
+
negative_800: `hsl(${RED_HUE}, 88%, ${tokens.dimScale[4]}%)`,
190
+
negative_900: `hsl(${RED_HUE}, 84%, ${tokens.dimScale[3]}%)`,
191
+
negative_950: `hsl(${RED_HUE}, 80%, ${tokens.dimScale[2]}%)`,
192
+
negative_975: `hsl(${RED_HUE}, 70%, ${tokens.dimScale[1]}%)`,
157
193
} as const
158
194
159
195
export const light = {
···
404
440
shadow_sm: {
405
441
...atoms.shadow_sm,
406
442
shadowOpacity: 0.7,
407
-
shadowColor: `hsl(211, 28%, 3%)`,
443
+
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
408
444
},
409
445
shadow_md: {
410
446
...atoms.shadow_md,
411
447
shadowOpacity: 0.7,
412
-
shadowColor: `hsl(211, 28%, 3%)`,
448
+
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
413
449
},
414
450
shadow_lg: {
415
451
...atoms.shadow_lg,
416
452
shadowOpacity: 0.7,
417
-
shadowColor: `hsl(211, 28%, 3%)`,
453
+
shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
418
454
},
419
455
},
420
456
}
+25
-18
src/alf/tokens.ts
+25
-18
src/alf/tokens.ts
···
1
-
const BLUE_HUE = 211
2
-
const RED_HUE = 346
3
-
const GREEN_HUE = 152
1
+
import {
2
+
BLUE_HUE,
3
+
RED_HUE,
4
+
GREEN_HUE,
5
+
generateScale,
6
+
} from '#/alf/util/colorGeneration'
7
+
8
+
export const scale = generateScale(6, 100)
9
+
// dim shifted 6% lighter
10
+
export const dimScale = generateScale(12, 100)
4
11
5
12
export const color = {
6
13
trueBlack: '#000000',
7
14
8
-
gray_0: `hsl(${BLUE_HUE}, 20%, 100%)`,
9
-
gray_25: `hsl(${BLUE_HUE}, 20%, 97%)`,
10
-
gray_50: `hsl(${BLUE_HUE}, 20%, 95%)`,
11
-
gray_100: `hsl(${BLUE_HUE}, 20%, 90%)`,
12
-
gray_200: `hsl(${BLUE_HUE}, 20%, 80%)`,
13
-
gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
14
-
gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
15
-
gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
16
-
gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
17
-
gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
18
-
gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
19
-
gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
20
-
gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
21
-
gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
22
-
gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
15
+
gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`,
16
+
gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`,
17
+
gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`,
18
+
gray_100: `hsl(${BLUE_HUE}, 20%, ${scale[11]}%)`,
19
+
gray_200: `hsl(${BLUE_HUE}, 20%, ${scale[10]}%)`,
20
+
gray_300: `hsl(${BLUE_HUE}, 20%, ${scale[9]}%)`,
21
+
gray_400: `hsl(${BLUE_HUE}, 20%, ${scale[8]}%)`,
22
+
gray_500: `hsl(${BLUE_HUE}, 20%, ${scale[7]}%)`,
23
+
gray_600: `hsl(${BLUE_HUE}, 24%, ${scale[6]}%)`,
24
+
gray_700: `hsl(${BLUE_HUE}, 24%, ${scale[5]}%)`,
25
+
gray_800: `hsl(${BLUE_HUE}, 28%, ${scale[4]}%)`,
26
+
gray_900: `hsl(${BLUE_HUE}, 28%, ${scale[3]}%)`,
27
+
gray_950: `hsl(${BLUE_HUE}, 28%, ${scale[2]}%)`,
28
+
gray_975: `hsl(${BLUE_HUE}, 28%, ${scale[1]}%)`,
29
+
gray_1000: `hsl(${BLUE_HUE}, 28%, ${scale[0]}%)`,
23
30
24
31
blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
25
32
blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
+17
src/alf/util/colorGeneration.ts
+17
src/alf/util/colorGeneration.ts
···
1
+
export const BLUE_HUE = 211
2
+
export const RED_HUE = 346
3
+
export const GREEN_HUE = 152
4
+
5
+
/**
6
+
* Smooth progression of lightness "stops" for generating HSL colors.
7
+
*/
8
+
export const COLOR_STOPS = [
9
+
0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1,
10
+
]
11
+
12
+
export function generateScale(start: number, end: number) {
13
+
const range = end - start
14
+
return COLOR_STOPS.map(stop => {
15
+
return start + range * stop
16
+
})
17
+
}
+20
-28
src/components/Button.tsx
+20
-28
src/components/Button.tsx
···
165
165
166
166
if (!disabled) {
167
167
baseStyles.push(a.border, {
168
-
borderColor: tokens.color.blue_500,
168
+
borderColor: t.palette.primary_500,
169
169
})
170
170
hoverStyles.push(a.border, {
171
171
backgroundColor: light
···
174
174
})
175
175
} else {
176
176
baseStyles.push(a.border, {
177
-
borderColor: light ? tokens.color.blue_200 : tokens.color.blue_900,
177
+
borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
178
178
})
179
179
}
180
180
} else if (variant === 'ghost') {
···
191
191
if (variant === 'solid') {
192
192
if (!disabled) {
193
193
baseStyles.push({
194
-
backgroundColor: light
195
-
? tokens.color.gray_50
196
-
: tokens.color.gray_900,
194
+
backgroundColor: t.palette.contrast_50,
197
195
})
198
196
hoverStyles.push({
199
-
backgroundColor: light
200
-
? tokens.color.gray_100
201
-
: tokens.color.gray_950,
197
+
backgroundColor: t.palette.contrast_100,
202
198
})
203
199
} else {
204
200
baseStyles.push({
205
-
backgroundColor: light
206
-
? tokens.color.gray_200
207
-
: tokens.color.gray_950,
201
+
backgroundColor: t.palette.contrast_200,
208
202
})
209
203
}
210
204
} else if (variant === 'outline') {
···
214
208
215
209
if (!disabled) {
216
210
baseStyles.push(a.border, {
217
-
borderColor: light ? tokens.color.gray_300 : tokens.color.gray_700,
211
+
borderColor: t.palette.contrast_300,
218
212
})
219
-
hoverStyles.push(a.border, t.atoms.bg_contrast_50)
213
+
hoverStyles.push(t.atoms.bg_contrast_50)
220
214
} else {
221
215
baseStyles.push(a.border, {
222
-
borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800,
216
+
borderColor: t.palette.contrast_200,
223
217
})
224
218
}
225
219
} else if (variant === 'ghost') {
226
220
if (!disabled) {
227
221
baseStyles.push(t.atoms.bg)
228
222
hoverStyles.push({
229
-
backgroundColor: light
230
-
? tokens.color.gray_100
231
-
: tokens.color.gray_900,
223
+
backgroundColor: t.palette.contrast_100,
232
224
})
233
225
}
234
226
}
···
236
228
if (variant === 'solid') {
237
229
if (!disabled) {
238
230
baseStyles.push({
239
-
backgroundColor: t.palette.negative_400,
231
+
backgroundColor: t.palette.negative_500,
240
232
})
241
233
hoverStyles.push({
242
-
backgroundColor: t.palette.negative_500,
234
+
backgroundColor: t.palette.negative_600,
243
235
})
244
236
} else {
245
237
baseStyles.push({
246
-
backgroundColor: t.palette.negative_600,
238
+
backgroundColor: t.palette.negative_700,
247
239
})
248
240
}
249
241
} else if (variant === 'outline') {
···
253
245
254
246
if (!disabled) {
255
247
baseStyles.push(a.border, {
256
-
borderColor: t.palette.negative_400,
248
+
borderColor: t.palette.negative_500,
257
249
})
258
250
hoverStyles.push(a.border, {
259
251
backgroundColor: light
···
273
265
hoverStyles.push({
274
266
backgroundColor: light
275
267
? t.palette.negative_100
276
-
: t.palette.negative_950,
268
+
: t.palette.negative_975,
277
269
})
278
270
}
279
271
}
···
461
453
if (variant === 'solid' || variant === 'gradient') {
462
454
if (!disabled) {
463
455
baseStyles.push({
464
-
color: light ? tokens.color.gray_700 : tokens.color.gray_100,
456
+
color: t.palette.contrast_700,
465
457
})
466
458
} else {
467
459
baseStyles.push({
468
-
color: light ? tokens.color.gray_400 : tokens.color.gray_700,
460
+
color: t.palette.contrast_400,
469
461
})
470
462
}
471
463
} else if (variant === 'outline') {
472
464
if (!disabled) {
473
465
baseStyles.push({
474
-
color: light ? tokens.color.gray_600 : tokens.color.gray_300,
466
+
color: t.palette.contrast_600,
475
467
})
476
468
} else {
477
469
baseStyles.push({
478
-
color: light ? tokens.color.gray_400 : tokens.color.gray_700,
470
+
color: t.palette.contrast_300,
479
471
})
480
472
}
481
473
} else if (variant === 'ghost') {
482
474
if (!disabled) {
483
475
baseStyles.push({
484
-
color: light ? tokens.color.gray_600 : tokens.color.gray_300,
476
+
color: t.palette.contrast_600,
485
477
})
486
478
} else {
487
479
baseStyles.push({
488
-
color: light ? tokens.color.gray_400 : tokens.color.gray_600,
480
+
color: t.palette.contrast_300,
489
481
})
490
482
}
491
483
}
+2
-2
src/components/forms/TextField.tsx
+2
-2
src/components/forms/TextField.tsx
···
10
10
} from 'react-native'
11
11
12
12
import {HITSLOP_20} from 'lib/constants'
13
-
import {useTheme, atoms as a, web, tokens, android} from '#/alf'
13
+
import {useTheme, atoms as a, web, android} from '#/alf'
14
14
import {Text} from '#/components/Typography'
15
15
import {useInteractionState} from '#/components/hooks/useInteractionState'
16
16
import {Props as SVGIconProps} from '#/components/icons/common'
···
110
110
{
111
111
backgroundColor:
112
112
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
113
-
borderColor: tokens.color.red_500,
113
+
borderColor: t.palette.negative_500,
114
114
},
115
115
]
116
116
+2
-2
src/components/forms/Toggle.tsx
+2
-2
src/components/forms/Toggle.tsx
···
301
301
if (isInvalid) {
302
302
base.push({
303
303
backgroundColor:
304
-
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
304
+
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_975,
305
305
borderColor:
306
306
t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800,
307
307
})
···
310
310
baseHover.push({
311
311
backgroundColor:
312
312
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
313
-
borderColor: t.palette.negative_500,
313
+
borderColor: t.palette.negative_600,
314
314
})
315
315
}
316
316
}
+2
-2
src/lib/themes.ts
+2
-2
src/lib/themes.ts
···
357
357
textVeryLight: dimPalette.contrast_400,
358
358
replyLine: dimPalette.contrast_200,
359
359
replyLineDot: dimPalette.contrast_200,
360
-
unreadNotifBg: `hsl(211, 48%, 17%)`,
361
-
unreadNotifBorder: `hsl(211, 48%, 30%)`,
360
+
unreadNotifBg: dimPalette.primary_975,
361
+
unreadNotifBorder: dimPalette.primary_900,
362
362
postCtrl: dimPalette.contrast_500,
363
363
brandText: dimPalette.primary_500,
364
364
emptyStateIcon: dimPalette.contrast_300,
+10
-5
src/view/screens/ProfileList.tsx
+10
-5
src/view/screens/ProfileList.tsx
···
60
60
import {logger} from '#/logger'
61
61
import {useAnalytics} from '#/lib/analytics/analytics'
62
62
import {listenSoftReset} from '#/state/events'
63
-
import {atoms as a} from '#/alf'
63
+
import {atoms as a, useTheme} from '#/alf'
64
64
65
65
const SECTION_TITLES_CURATE = ['Posts', 'About']
66
66
const SECTION_TITLES_MOD = ['About']
···
699
699
ref,
700
700
) {
701
701
const pal = usePalette('default')
702
+
const t = useTheme()
702
703
const {_} = useLingui()
703
704
const {isMobile} = useWebMediaQueries()
704
705
const {currentAccount} = useSession()
···
792
793
paddingBottom: isMobile ? 14 : 18,
793
794
},
794
795
]}>
795
-
<Text type="lg-bold">
796
+
<Text type="lg-bold" style={t.atoms.text}>
796
797
<Trans>Users</Trans>
797
798
</Text>
798
799
{isOwner && (
···
817
818
</View>
818
819
)
819
820
}, [
820
-
pal,
821
-
list,
822
821
isMobile,
822
+
pal.border,
823
+
pal.textLight,
824
+
pal.colors.link,
825
+
pal.link,
823
826
descriptionRT,
824
827
isCurateList,
825
828
isOwner,
826
-
onPressAddUser,
829
+
list.creator,
830
+
t.atoms.text,
827
831
_,
832
+
onPressAddUser,
828
833
])
829
834
830
835
const renderEmptyState = useCallback(() => {
+45
-40
src/view/screens/Storybook/Palette.tsx
+45
-40
src/view/screens/Storybook/Palette.tsx
···
1
1
import React from 'react'
2
2
import {View} from 'react-native'
3
3
4
-
import * as tokens from '#/alf/tokens'
5
4
import {atoms as a, useTheme} from '#/alf'
6
5
7
6
export function Palette() {
···
28
27
<View
29
28
style={[
30
29
a.flex_1,
31
-
{height: 60, backgroundColor: tokens.color.blue_25},
30
+
{height: 60, backgroundColor: t.palette.primary_25},
32
31
]}
33
32
/>
34
33
<View
35
34
style={[
36
35
a.flex_1,
37
-
{height: 60, backgroundColor: tokens.color.blue_50},
36
+
{height: 60, backgroundColor: t.palette.primary_50},
38
37
]}
39
38
/>
40
39
<View
41
40
style={[
42
41
a.flex_1,
43
-
{height: 60, backgroundColor: tokens.color.blue_100},
42
+
{height: 60, backgroundColor: t.palette.primary_100},
44
43
]}
45
44
/>
46
45
<View
47
46
style={[
48
47
a.flex_1,
49
-
{height: 60, backgroundColor: tokens.color.blue_200},
48
+
{height: 60, backgroundColor: t.palette.primary_200},
50
49
]}
51
50
/>
52
51
<View
53
52
style={[
54
53
a.flex_1,
55
-
{height: 60, backgroundColor: tokens.color.blue_300},
54
+
{height: 60, backgroundColor: t.palette.primary_300},
56
55
]}
57
56
/>
58
57
<View
59
58
style={[
60
59
a.flex_1,
61
-
{height: 60, backgroundColor: tokens.color.blue_400},
60
+
{height: 60, backgroundColor: t.palette.primary_400},
62
61
]}
63
62
/>
64
63
<View
65
64
style={[
66
65
a.flex_1,
67
-
{height: 60, backgroundColor: tokens.color.blue_500},
66
+
{height: 60, backgroundColor: t.palette.primary_500},
68
67
]}
69
68
/>
70
69
<View
71
70
style={[
72
71
a.flex_1,
73
-
{height: 60, backgroundColor: tokens.color.blue_600},
72
+
{height: 60, backgroundColor: t.palette.primary_600},
74
73
]}
75
74
/>
76
75
<View
77
76
style={[
78
77
a.flex_1,
79
-
{height: 60, backgroundColor: tokens.color.blue_700},
78
+
{height: 60, backgroundColor: t.palette.primary_700},
80
79
]}
81
80
/>
82
81
<View
83
82
style={[
84
83
a.flex_1,
85
-
{height: 60, backgroundColor: tokens.color.blue_800},
84
+
{height: 60, backgroundColor: t.palette.primary_800},
86
85
]}
87
86
/>
88
87
<View
89
88
style={[
90
89
a.flex_1,
91
-
{height: 60, backgroundColor: tokens.color.blue_900},
90
+
{height: 60, backgroundColor: t.palette.primary_900},
92
91
]}
93
92
/>
94
93
<View
95
94
style={[
96
95
a.flex_1,
97
-
{height: 60, backgroundColor: tokens.color.blue_950},
96
+
{height: 60, backgroundColor: t.palette.primary_950},
98
97
]}
99
98
/>
100
99
<View
101
100
style={[
102
101
a.flex_1,
103
-
{height: 60, backgroundColor: tokens.color.blue_975},
102
+
{height: 60, backgroundColor: t.palette.primary_975},
104
103
]}
105
104
/>
106
105
</View>
···
108
107
<View
109
108
style={[
110
109
a.flex_1,
111
-
{height: 60, backgroundColor: tokens.color.green_25},
110
+
{height: 60, backgroundColor: t.palette.positive_25},
112
111
]}
113
112
/>
114
113
<View
115
114
style={[
116
115
a.flex_1,
117
-
{height: 60, backgroundColor: tokens.color.green_50},
116
+
{height: 60, backgroundColor: t.palette.positive_50},
118
117
]}
119
118
/>
120
119
<View
121
120
style={[
122
121
a.flex_1,
123
-
{height: 60, backgroundColor: tokens.color.green_100},
122
+
{height: 60, backgroundColor: t.palette.positive_100},
124
123
]}
125
124
/>
126
125
<View
127
126
style={[
128
127
a.flex_1,
129
-
{height: 60, backgroundColor: tokens.color.green_200},
128
+
{height: 60, backgroundColor: t.palette.positive_200},
130
129
]}
131
130
/>
132
131
<View
133
132
style={[
134
133
a.flex_1,
135
-
{height: 60, backgroundColor: tokens.color.green_300},
134
+
{height: 60, backgroundColor: t.palette.positive_300},
136
135
]}
137
136
/>
138
137
<View
139
138
style={[
140
139
a.flex_1,
141
-
{height: 60, backgroundColor: tokens.color.green_400},
140
+
{height: 60, backgroundColor: t.palette.positive_400},
142
141
]}
143
142
/>
144
143
<View
145
144
style={[
146
145
a.flex_1,
147
-
{height: 60, backgroundColor: tokens.color.green_500},
146
+
{height: 60, backgroundColor: t.palette.positive_500},
148
147
]}
149
148
/>
150
149
<View
151
150
style={[
152
151
a.flex_1,
153
-
{height: 60, backgroundColor: tokens.color.green_600},
152
+
{height: 60, backgroundColor: t.palette.positive_600},
154
153
]}
155
154
/>
156
155
<View
157
156
style={[
158
157
a.flex_1,
159
-
{height: 60, backgroundColor: tokens.color.green_700},
158
+
{height: 60, backgroundColor: t.palette.positive_700},
160
159
]}
161
160
/>
162
161
<View
163
162
style={[
164
163
a.flex_1,
165
-
{height: 60, backgroundColor: tokens.color.green_800},
164
+
{height: 60, backgroundColor: t.palette.positive_800},
166
165
]}
167
166
/>
168
167
<View
169
168
style={[
170
169
a.flex_1,
171
-
{height: 60, backgroundColor: tokens.color.green_900},
170
+
{height: 60, backgroundColor: t.palette.positive_900},
172
171
]}
173
172
/>
174
173
<View
175
174
style={[
176
175
a.flex_1,
177
-
{height: 60, backgroundColor: tokens.color.green_950},
176
+
{height: 60, backgroundColor: t.palette.positive_950},
178
177
]}
179
178
/>
180
179
<View
181
180
style={[
182
181
a.flex_1,
183
-
{height: 60, backgroundColor: tokens.color.green_975},
182
+
{height: 60, backgroundColor: t.palette.positive_975},
184
183
]}
185
184
/>
186
185
</View>
187
186
<View style={[a.flex_row, a.gap_md]}>
188
187
<View
189
-
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_25}]}
188
+
style={[
189
+
a.flex_1,
190
+
{height: 60, backgroundColor: t.palette.negative_25},
191
+
]}
190
192
/>
191
193
<View
192
-
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]}
194
+
style={[
195
+
a.flex_1,
196
+
{height: 60, backgroundColor: t.palette.negative_50},
197
+
]}
193
198
/>
194
199
<View
195
200
style={[
196
201
a.flex_1,
197
-
{height: 60, backgroundColor: tokens.color.red_100},
202
+
{height: 60, backgroundColor: t.palette.negative_100},
198
203
]}
199
204
/>
200
205
<View
201
206
style={[
202
207
a.flex_1,
203
-
{height: 60, backgroundColor: tokens.color.red_200},
208
+
{height: 60, backgroundColor: t.palette.negative_200},
204
209
]}
205
210
/>
206
211
<View
207
212
style={[
208
213
a.flex_1,
209
-
{height: 60, backgroundColor: tokens.color.red_300},
214
+
{height: 60, backgroundColor: t.palette.negative_300},
210
215
]}
211
216
/>
212
217
<View
213
218
style={[
214
219
a.flex_1,
215
-
{height: 60, backgroundColor: tokens.color.red_400},
220
+
{height: 60, backgroundColor: t.palette.negative_400},
216
221
]}
217
222
/>
218
223
<View
219
224
style={[
220
225
a.flex_1,
221
-
{height: 60, backgroundColor: tokens.color.red_500},
226
+
{height: 60, backgroundColor: t.palette.negative_500},
222
227
]}
223
228
/>
224
229
<View
225
230
style={[
226
231
a.flex_1,
227
-
{height: 60, backgroundColor: tokens.color.red_600},
232
+
{height: 60, backgroundColor: t.palette.negative_600},
228
233
]}
229
234
/>
230
235
<View
231
236
style={[
232
237
a.flex_1,
233
-
{height: 60, backgroundColor: tokens.color.red_700},
238
+
{height: 60, backgroundColor: t.palette.negative_700},
234
239
]}
235
240
/>
236
241
<View
237
242
style={[
238
243
a.flex_1,
239
-
{height: 60, backgroundColor: tokens.color.red_800},
244
+
{height: 60, backgroundColor: t.palette.negative_800},
240
245
]}
241
246
/>
242
247
<View
243
248
style={[
244
249
a.flex_1,
245
-
{height: 60, backgroundColor: tokens.color.red_900},
250
+
{height: 60, backgroundColor: t.palette.negative_900},
246
251
]}
247
252
/>
248
253
<View
249
254
style={[
250
255
a.flex_1,
251
-
{height: 60, backgroundColor: tokens.color.red_950},
256
+
{height: 60, backgroundColor: t.palette.negative_950},
252
257
]}
253
258
/>
254
259
<View
255
260
style={[
256
261
a.flex_1,
257
-
{height: 60, backgroundColor: tokens.color.red_975},
262
+
{height: 60, backgroundColor: t.palette.negative_975},
258
263
]}
259
264
/>
260
265
</View>