mirror of
https://github.com/Jellify-Music/App.git
synced 2025-12-16 16:26:33 -06:00
83cffb7dc9
removes transparency on the linear gradients in the library fixes text in the library selector for real this time fixes teal color for light and dark modes
149 lines
4.2 KiB
TypeScript
149 lines
4.2 KiB
TypeScript
import { animations, tokens as TamaguiTokens, media, shorthands } from '@tamagui/config/v4'
|
|
import { createTamagui, createTokens } from 'tamagui' // or '@tamagui/core'
|
|
import { headingFont, bodyFont } from './fonts.config'
|
|
|
|
const tokens = createTokens({
|
|
...TamaguiTokens,
|
|
color: {
|
|
danger: '#ff9966',
|
|
purpleDark: '#0C0622',
|
|
tealLight: 'rgba(16, 175, 141, 1)',
|
|
tealDark: 'rgba(87, 233, 201, 1)',
|
|
purple: '#100538',
|
|
purpleGray: '#66617B',
|
|
|
|
amethyst: 'rgba(126, 114, 175, 1)',
|
|
amethyst25: 'rgba(126, 114, 175, 0.25)',
|
|
amethyst50: 'rgba(126, 114, 175, 0.5)',
|
|
amethyst75: 'rgba(126, 114, 175, 0.75)',
|
|
|
|
secondary: '#cc2f71',
|
|
|
|
primaryLight: '#6D2FFF',
|
|
primaryDark: '#887BFF',
|
|
white: '#ffffff',
|
|
neutral: '#77748E',
|
|
|
|
darkBackground: 'rgba(25, 24, 28, 1)',
|
|
darkBackground75: 'rgba(25, 24, 28, 0.75)',
|
|
darkBackground50: 'rgba(25, 24, 28, 0.5)',
|
|
darkBackground25: 'rgba(25, 24, 28, 0.25)',
|
|
|
|
darkBorder: '#CEAAFF',
|
|
|
|
lightBackground: 'rgb(235, 221, 255)',
|
|
lightBackground75: 'rgba(235, 221, 255, 0.75)',
|
|
lightBackground50: 'rgba(235, 221, 255, 0.5)',
|
|
lightBackground25: 'rgba(235, 221, 255, 0.25)',
|
|
|
|
black: '#000000',
|
|
black10: 'rgba(0, 0, 0, 0.1)',
|
|
black25: 'rgba(0, 0, 0, 0.25)',
|
|
black50: 'rgba(0, 0, 0, 0.5)',
|
|
black75: 'rgba(0, 0, 0, 0.75)',
|
|
|
|
lightTranslucent: 'rgba(255, 255, 255, 0.75)',
|
|
darkTranslucent: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
})
|
|
|
|
const jellifyConfig = createTamagui({
|
|
animations,
|
|
fonts: {
|
|
heading: headingFont,
|
|
body: bodyFont,
|
|
},
|
|
media,
|
|
shorthands,
|
|
tokens,
|
|
themes: {
|
|
dark: {
|
|
background: tokens.color.darkBackground,
|
|
background75: tokens.color.darkBackground75,
|
|
background50: tokens.color.darkBackground50,
|
|
background25: tokens.color.darkBackground25,
|
|
borderColor: tokens.color.neutral,
|
|
color: tokens.color.white,
|
|
success: tokens.color.tealDark,
|
|
secondary: tokens.color.secondary,
|
|
primary: tokens.color.primaryDark,
|
|
danger: tokens.color.danger,
|
|
neutral: tokens.color.neutral,
|
|
|
|
translucent: tokens.color.darkTranslucent,
|
|
},
|
|
oled: {
|
|
// True black OLED theme
|
|
background: tokens.color.black,
|
|
background75: tokens.color.black75,
|
|
background50: tokens.color.black50,
|
|
background25: tokens.color.black25,
|
|
borderColor: tokens.color.neutral,
|
|
color: tokens.color.white,
|
|
success: tokens.color.tealDark,
|
|
secondary: tokens.color.secondary,
|
|
primary: tokens.color.primaryDark,
|
|
danger: tokens.color.danger,
|
|
neutral: tokens.color.neutral,
|
|
|
|
translucent: tokens.color.darkTranslucent,
|
|
},
|
|
dark_inverted_purple: {
|
|
color: tokens.color.purpleDark,
|
|
borderColor: tokens.color.amethyst,
|
|
background: tokens.color.amethyst,
|
|
background25: tokens.color.amethyst25,
|
|
background50: tokens.color.amethyst50,
|
|
background75: tokens.color.amethyst75,
|
|
success: tokens.color.tealDark,
|
|
secondary: tokens.color.secondary,
|
|
primary: tokens.color.primaryDark,
|
|
danger: tokens.color.danger,
|
|
neutral: tokens.color.neutral,
|
|
|
|
translucent: tokens.color.darkTranslucent,
|
|
},
|
|
light: {
|
|
background: tokens.color.white,
|
|
background75: tokens.color.lightBackground75,
|
|
background50: tokens.color.lightBackground50,
|
|
background25: tokens.color.lightBackground25,
|
|
borderColor: tokens.color.neutral,
|
|
color: tokens.color.purpleDark,
|
|
success: tokens.color.tealLight,
|
|
secondary: tokens.color.secondary,
|
|
primary: tokens.color.primaryLight,
|
|
danger: tokens.color.danger,
|
|
neutral: tokens.color.neutral,
|
|
|
|
translucent: tokens.color.lightTranslucent,
|
|
},
|
|
light_inverted_purple: {
|
|
color: tokens.color.purpleDark,
|
|
borderColor: tokens.color.neutral,
|
|
background: tokens.color.amethyst,
|
|
background25: tokens.color.amethyst25,
|
|
background50: tokens.color.amethyst50,
|
|
background75: tokens.color.amethyst75,
|
|
success: tokens.color.tealLight,
|
|
secondary: tokens.color.secondary,
|
|
primary: tokens.color.primaryLight,
|
|
danger: tokens.color.danger,
|
|
neutral: tokens.color.neutral,
|
|
|
|
translucent: tokens.color.lightTranslucent,
|
|
},
|
|
},
|
|
})
|
|
|
|
export type JellifyConfig = typeof jellifyConfig
|
|
|
|
declare module 'tamagui' {
|
|
// or '@tamagui/core'
|
|
// overrides TamaguiCustomConfig so your custom types
|
|
// work everywhere you import `tamagui`
|
|
interface TamaguiCustomConfig extends JellifyConfig {}
|
|
}
|
|
|
|
export default jellifyConfig
|