Hailey
34582edf3e
* tweaks to constants (#7478) * add did * use correct did * typo * tweak * Prevent Drawer gesture conflicting with Suggestions scroll (#7468) * Extract BlockDrawerGeesture * Block drawer when scrolling interstitials (cherry picked from commit9e3f2f4374) * yolo interstitial * yolo mode * right swipe * fix nav gesture * vibe controls * collapsible post text * rm blurview, cover for tall videos * smarter video source handling * use thumbnails, improve perf significantly * better android loading * improve aspect ratio * optimize source changes * rm spinner on ios * whoops, remove debug `false` * FIX WRONG VIDEOS SHOWING UP * don't spring on way down * release video players when leaving screen * remove jank animation * Add grid * improve contract, fix double tap * Filter out posts without videos * Only do grid on native * Pipe through feedSourceUri and link to feed * Handle passed through params * Partial revert, just filter posts to start at index * Clean up cards, remove entry interstitial * Tweak handle * Change constant name * Rename some things * Make types legit * Clean up more naming * Add placeholder for grid view * Handle web, set up new organization * Begin work on Header * Replace types * Squashed commit of the following: commit3d1be4c0f1Author: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 01:08:05 2025 +0000 extend animation commitc9f199413bAuthor: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 01:01:24 2025 +0000 fix gap commit22e520795fAuthor: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 00:50:16 2025 +0000 thinner bar, format time commitc32427f214Author: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 00:47:57 2025 +0000 fix 2 in 3 screens commitcbf84c08d6Author: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 00:45:46 2025 +0000 rm unneeded var commit7e0e100177Author: Samuel Newman <mozzius@protonmail.com> Date: Fri Jan 17 00:41:18 2025 +0000 scrubberrrrr * use white with opacity rather than gray * Simultaneous gesture * cleanup attempt * fix jank * link to profile on press * fix jitter fr this time * mostly fix android flicker * Maybe fix row generation * Add content hider to video card * emoji in post text * reduce update rate * fix type error * Fix grid layout trailing single item * Add Discover interstitial, settings, includes pin for now * Explore interstitial, handle dimissal, pinning, compact card * Only use grid placeholder on native * Update events * Add feature gate * android nav bar fixes + lower update speed * fix interval + decel rate on interstitials * attempt to fix broken scrub on android (not working) * follow button * Part out the interstitials for perf, add view more * Remove prod web route * Wrap interstitials with BlockDrawerGesture * Bring video cropping in line with images (#7462) * Mimic image cropping for videos on web * Same on native * Rename variables for clarity * Fix Android scrubbing * Add FeedFeedbackProvider * Remove swipe gesture * fix light status bar behaviour * bump * feedback * Copy pasta to new location * Copy pasta part deux * Filter only videos * Make whole text clickable to expand (cherry picked from commit 4cf31120779f4e06eb4c296b3d4b53814d432b07) * move scrubber to own file * end card * add icon to end card * add min view time to viewability config * play haptic on like * tweak feedback * tweak feedback again * Moderation (cherry picked from commit 6b6b471cfb363031284b3e7a1f6e0ade3ac4ae47) * remove bad check * fix feedback for new video grid * change prop name to items as well * Simplify logic * Fix mod footer * Give scrubber more space on android * Add subtle track behind scrubber, adjust opacity * wire in feed context again... * Add better a11y desc to card * Fix key issue * Update a11y copy * Fix scrubber height * improve scrubber animation * Make follow button more obvious * Make header back button more clear * Disable interactions with actual video el * keep content away from the bottom safe area * fix blur * fix moderation issue * improve contrast on mod screen * Make moderation static per item * Memoize rows * Optimizations * Take video moderation into account * Only blur titles for list blur * Change copy * Bump blur radius * animate text in both directions * Rm unused field * Filter by root early * Refactor for clarity * add compose prompt to scrubber * rm log * tweak gradient * Bump SDK, use contentMode to power video feed * Ensure ProfileFeed view also supports video feed * improve scrubber on android * rm border from footer * Update prod video feed did * Separate caches * Add lil hover to View More * Fix undefined logic, remove header for interstitial * Ungate * Fix stuckness * remove extra useless map * Fix effect cleanup * Send seen without cleanup * Simplify react stuff * Earlier early return to avoid loading flash * remove scrubber placeholder * Remove opacity hack * Render useEvent conditionally * Fix Android flash --------- Co-authored-by: dan <dan.abramov@gmail.com> Co-authored-by: Samuel Newman <mozzius@protonmail.com> Co-authored-by: Eric Bailey <git@esb.lol>
586 lines
18 KiB
TypeScript
586 lines
18 KiB
TypeScript
import {atoms} from '#/alf/atoms'
|
|
import {Palette, Theme} from '#/alf/types'
|
|
import {
|
|
BLUE_HUE,
|
|
defaultScale,
|
|
dimScale,
|
|
GREEN_HUE,
|
|
RED_HUE,
|
|
} from '#/alf/util/colorGeneration'
|
|
|
|
const themes = createThemes({
|
|
hues: {
|
|
primary: BLUE_HUE,
|
|
negative: RED_HUE,
|
|
positive: GREEN_HUE,
|
|
},
|
|
})
|
|
|
|
/**
|
|
* @deprecated use ALF and access palette from `useTheme()`
|
|
*/
|
|
export const lightPalette = themes.lightPalette
|
|
/**
|
|
* @deprecated use ALF and access palette from `useTheme()`
|
|
*/
|
|
export const darkPalette = themes.darkPalette
|
|
/**
|
|
* @deprecated use ALF and access palette from `useTheme()`
|
|
*/
|
|
export const dimPalette = themes.dimPalette
|
|
/**
|
|
* @deprecated use ALF and access theme from `useTheme()`
|
|
*/
|
|
export const light = themes.light
|
|
/**
|
|
* @deprecated use ALF and access theme from `useTheme()`
|
|
*/
|
|
export const dark = themes.dark
|
|
/**
|
|
* @deprecated use ALF and access theme from `useTheme()`
|
|
*/
|
|
export const dim = themes.dim
|
|
|
|
export const defaultTheme = themes.light
|
|
|
|
export function createThemes({
|
|
hues,
|
|
}: {
|
|
hues: {
|
|
primary: number
|
|
negative: number
|
|
positive: number
|
|
}
|
|
}): {
|
|
lightPalette: Palette
|
|
darkPalette: Palette
|
|
dimPalette: Palette
|
|
light: Theme
|
|
dark: Theme
|
|
dim: Theme
|
|
} {
|
|
const color = {
|
|
like: '#ec4899',
|
|
trueBlack: '#000000',
|
|
|
|
gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`,
|
|
gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`,
|
|
gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`,
|
|
gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`,
|
|
gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`,
|
|
gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`,
|
|
gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`,
|
|
gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`,
|
|
gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`,
|
|
gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`,
|
|
gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`,
|
|
gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`,
|
|
gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`,
|
|
gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
|
|
gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
|
|
|
|
primary_25: `hsl(${hues.primary}, 99%, 97%)`,
|
|
primary_50: `hsl(${hues.primary}, 99%, 95%)`,
|
|
primary_100: `hsl(${hues.primary}, 99%, 90%)`,
|
|
primary_200: `hsl(${hues.primary}, 99%, 80%)`,
|
|
primary_300: `hsl(${hues.primary}, 99%, 70%)`,
|
|
primary_400: `hsl(${hues.primary}, 99%, 60%)`,
|
|
primary_500: `hsl(${hues.primary}, 99%, 53%)`,
|
|
primary_600: `hsl(${hues.primary}, 99%, 42%)`,
|
|
primary_700: `hsl(${hues.primary}, 99%, 34%)`,
|
|
primary_800: `hsl(${hues.primary}, 99%, 26%)`,
|
|
primary_900: `hsl(${hues.primary}, 99%, 18%)`,
|
|
primary_950: `hsl(${hues.primary}, 99%, 10%)`,
|
|
primary_975: `hsl(${hues.primary}, 99%, 7%)`,
|
|
|
|
green_25: `hsl(${hues.positive}, 82%, 97%)`,
|
|
green_50: `hsl(${hues.positive}, 82%, 95%)`,
|
|
green_100: `hsl(${hues.positive}, 82%, 90%)`,
|
|
green_200: `hsl(${hues.positive}, 82%, 80%)`,
|
|
green_300: `hsl(${hues.positive}, 82%, 70%)`,
|
|
green_400: `hsl(${hues.positive}, 82%, 60%)`,
|
|
green_500: `hsl(${hues.positive}, 82%, 50%)`,
|
|
green_600: `hsl(${hues.positive}, 82%, 42%)`,
|
|
green_700: `hsl(${hues.positive}, 82%, 34%)`,
|
|
green_800: `hsl(${hues.positive}, 82%, 26%)`,
|
|
green_900: `hsl(${hues.positive}, 82%, 18%)`,
|
|
green_950: `hsl(${hues.positive}, 82%, 10%)`,
|
|
green_975: `hsl(${hues.positive}, 82%, 7%)`,
|
|
|
|
red_25: `hsl(${hues.negative}, 91%, 97%)`,
|
|
red_50: `hsl(${hues.negative}, 91%, 95%)`,
|
|
red_100: `hsl(${hues.negative}, 91%, 90%)`,
|
|
red_200: `hsl(${hues.negative}, 91%, 80%)`,
|
|
red_300: `hsl(${hues.negative}, 91%, 70%)`,
|
|
red_400: `hsl(${hues.negative}, 91%, 60%)`,
|
|
red_500: `hsl(${hues.negative}, 91%, 50%)`,
|
|
red_600: `hsl(${hues.negative}, 91%, 42%)`,
|
|
red_700: `hsl(${hues.negative}, 91%, 34%)`,
|
|
red_800: `hsl(${hues.negative}, 91%, 26%)`,
|
|
red_900: `hsl(${hues.negative}, 91%, 18%)`,
|
|
red_950: `hsl(${hues.negative}, 91%, 10%)`,
|
|
red_975: `hsl(${hues.negative}, 91%, 7%)`,
|
|
} as const
|
|
|
|
const lightPalette = {
|
|
white: color.gray_0,
|
|
black: color.gray_1000,
|
|
like: color.like,
|
|
|
|
contrast_25: color.gray_25,
|
|
contrast_50: color.gray_50,
|
|
contrast_100: color.gray_100,
|
|
contrast_200: color.gray_200,
|
|
contrast_300: color.gray_300,
|
|
contrast_400: color.gray_400,
|
|
contrast_500: color.gray_500,
|
|
contrast_600: color.gray_600,
|
|
contrast_700: color.gray_700,
|
|
contrast_800: color.gray_800,
|
|
contrast_900: color.gray_900,
|
|
contrast_950: color.gray_950,
|
|
contrast_975: color.gray_975,
|
|
|
|
primary_25: color.primary_25,
|
|
primary_50: color.primary_50,
|
|
primary_100: color.primary_100,
|
|
primary_200: color.primary_200,
|
|
primary_300: color.primary_300,
|
|
primary_400: color.primary_400,
|
|
primary_500: color.primary_500,
|
|
primary_600: color.primary_600,
|
|
primary_700: color.primary_700,
|
|
primary_800: color.primary_800,
|
|
primary_900: color.primary_900,
|
|
primary_950: color.primary_950,
|
|
primary_975: color.primary_975,
|
|
|
|
positive_25: color.green_25,
|
|
positive_50: color.green_50,
|
|
positive_100: color.green_100,
|
|
positive_200: color.green_200,
|
|
positive_300: color.green_300,
|
|
positive_400: color.green_400,
|
|
positive_500: color.green_500,
|
|
positive_600: color.green_600,
|
|
positive_700: color.green_700,
|
|
positive_800: color.green_800,
|
|
positive_900: color.green_900,
|
|
positive_950: color.green_950,
|
|
positive_975: color.green_975,
|
|
|
|
negative_25: color.red_25,
|
|
negative_50: color.red_50,
|
|
negative_100: color.red_100,
|
|
negative_200: color.red_200,
|
|
negative_300: color.red_300,
|
|
negative_400: color.red_400,
|
|
negative_500: color.red_500,
|
|
negative_600: color.red_600,
|
|
negative_700: color.red_700,
|
|
negative_800: color.red_800,
|
|
negative_900: color.red_900,
|
|
negative_950: color.red_950,
|
|
negative_975: color.red_975,
|
|
} as const
|
|
|
|
const darkPalette: Palette = {
|
|
white: color.gray_25,
|
|
black: color.trueBlack,
|
|
like: color.like,
|
|
|
|
contrast_25: color.gray_975,
|
|
contrast_50: color.gray_950,
|
|
contrast_100: color.gray_900,
|
|
contrast_200: color.gray_800,
|
|
contrast_300: color.gray_700,
|
|
contrast_400: color.gray_600,
|
|
contrast_500: color.gray_500,
|
|
contrast_600: color.gray_400,
|
|
contrast_700: color.gray_300,
|
|
contrast_800: color.gray_200,
|
|
contrast_900: color.gray_100,
|
|
contrast_950: color.gray_50,
|
|
contrast_975: color.gray_25,
|
|
|
|
primary_25: color.primary_975,
|
|
primary_50: color.primary_950,
|
|
primary_100: color.primary_900,
|
|
primary_200: color.primary_800,
|
|
primary_300: color.primary_700,
|
|
primary_400: color.primary_600,
|
|
primary_500: color.primary_500,
|
|
primary_600: color.primary_400,
|
|
primary_700: color.primary_300,
|
|
primary_800: color.primary_200,
|
|
primary_900: color.primary_100,
|
|
primary_950: color.primary_50,
|
|
primary_975: color.primary_25,
|
|
|
|
positive_25: color.green_975,
|
|
positive_50: color.green_950,
|
|
positive_100: color.green_900,
|
|
positive_200: color.green_800,
|
|
positive_300: color.green_700,
|
|
positive_400: color.green_600,
|
|
positive_500: color.green_500,
|
|
positive_600: color.green_400,
|
|
positive_700: color.green_300,
|
|
positive_800: color.green_200,
|
|
positive_900: color.green_100,
|
|
positive_950: color.green_50,
|
|
positive_975: color.green_25,
|
|
|
|
negative_25: color.red_975,
|
|
negative_50: color.red_950,
|
|
negative_100: color.red_900,
|
|
negative_200: color.red_800,
|
|
negative_300: color.red_700,
|
|
negative_400: color.red_600,
|
|
negative_500: color.red_500,
|
|
negative_600: color.red_400,
|
|
negative_700: color.red_300,
|
|
negative_800: color.red_200,
|
|
negative_900: color.red_100,
|
|
negative_950: color.red_50,
|
|
negative_975: color.red_25,
|
|
} as const
|
|
|
|
const dimPalette: Palette = {
|
|
...darkPalette,
|
|
black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
|
|
like: color.like,
|
|
|
|
contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
|
|
contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
|
|
contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
|
|
contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
|
|
contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
|
|
contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
|
|
contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
|
|
contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
|
|
contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
|
|
contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
|
|
contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
|
|
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
|
|
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
|
|
|
|
primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`,
|
|
primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
|
|
primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`,
|
|
primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`,
|
|
primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`,
|
|
primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`,
|
|
primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
|
|
primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`,
|
|
primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`,
|
|
primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`,
|
|
primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`,
|
|
primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`,
|
|
primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`,
|
|
|
|
positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
|
|
positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
|
|
positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
|
|
positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
|
|
positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
|
|
positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
|
|
positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
|
|
positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
|
|
positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
|
|
positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
|
|
positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
|
|
positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`,
|
|
positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`,
|
|
|
|
negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`,
|
|
negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`,
|
|
negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`,
|
|
negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`,
|
|
negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
|
|
negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
|
|
negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
|
|
negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
|
|
negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
|
|
negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`,
|
|
negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`,
|
|
negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`,
|
|
negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`,
|
|
} as const
|
|
|
|
const light: Theme = {
|
|
scheme: 'light',
|
|
name: 'light',
|
|
palette: lightPalette,
|
|
atoms: {
|
|
text: {
|
|
color: lightPalette.black,
|
|
},
|
|
text_contrast_low: {
|
|
color: lightPalette.contrast_400,
|
|
},
|
|
text_contrast_medium: {
|
|
color: lightPalette.contrast_700,
|
|
},
|
|
text_contrast_high: {
|
|
color: lightPalette.contrast_900,
|
|
},
|
|
text_inverted: {
|
|
color: lightPalette.white,
|
|
},
|
|
bg: {
|
|
backgroundColor: lightPalette.white,
|
|
},
|
|
bg_contrast_25: {
|
|
backgroundColor: lightPalette.contrast_25,
|
|
},
|
|
bg_contrast_50: {
|
|
backgroundColor: lightPalette.contrast_50,
|
|
},
|
|
bg_contrast_100: {
|
|
backgroundColor: lightPalette.contrast_100,
|
|
},
|
|
bg_contrast_200: {
|
|
backgroundColor: lightPalette.contrast_200,
|
|
},
|
|
bg_contrast_300: {
|
|
backgroundColor: lightPalette.contrast_300,
|
|
},
|
|
bg_contrast_400: {
|
|
backgroundColor: lightPalette.contrast_400,
|
|
},
|
|
bg_contrast_500: {
|
|
backgroundColor: lightPalette.contrast_500,
|
|
},
|
|
bg_contrast_600: {
|
|
backgroundColor: lightPalette.contrast_600,
|
|
},
|
|
bg_contrast_700: {
|
|
backgroundColor: lightPalette.contrast_700,
|
|
},
|
|
bg_contrast_800: {
|
|
backgroundColor: lightPalette.contrast_800,
|
|
},
|
|
bg_contrast_900: {
|
|
backgroundColor: lightPalette.contrast_900,
|
|
},
|
|
bg_contrast_950: {
|
|
backgroundColor: lightPalette.contrast_950,
|
|
},
|
|
bg_contrast_975: {
|
|
backgroundColor: lightPalette.contrast_975,
|
|
},
|
|
border_contrast_low: {
|
|
borderColor: lightPalette.contrast_100,
|
|
},
|
|
border_contrast_medium: {
|
|
borderColor: lightPalette.contrast_200,
|
|
},
|
|
border_contrast_high: {
|
|
borderColor: lightPalette.contrast_300,
|
|
},
|
|
shadow_sm: {
|
|
...atoms.shadow_sm,
|
|
shadowColor: lightPalette.black,
|
|
},
|
|
shadow_md: {
|
|
...atoms.shadow_md,
|
|
shadowColor: lightPalette.black,
|
|
},
|
|
shadow_lg: {
|
|
...atoms.shadow_lg,
|
|
shadowColor: lightPalette.black,
|
|
},
|
|
},
|
|
}
|
|
|
|
const dark: Theme = {
|
|
scheme: 'dark',
|
|
name: 'dark',
|
|
palette: darkPalette,
|
|
atoms: {
|
|
text: {
|
|
color: darkPalette.white,
|
|
},
|
|
text_contrast_low: {
|
|
color: darkPalette.contrast_400,
|
|
},
|
|
text_contrast_medium: {
|
|
color: darkPalette.contrast_600,
|
|
},
|
|
text_contrast_high: {
|
|
color: darkPalette.contrast_900,
|
|
},
|
|
text_inverted: {
|
|
color: darkPalette.black,
|
|
},
|
|
bg: {
|
|
backgroundColor: darkPalette.black,
|
|
},
|
|
bg_contrast_25: {
|
|
backgroundColor: darkPalette.contrast_25,
|
|
},
|
|
bg_contrast_50: {
|
|
backgroundColor: darkPalette.contrast_50,
|
|
},
|
|
bg_contrast_100: {
|
|
backgroundColor: darkPalette.contrast_100,
|
|
},
|
|
bg_contrast_200: {
|
|
backgroundColor: darkPalette.contrast_200,
|
|
},
|
|
bg_contrast_300: {
|
|
backgroundColor: darkPalette.contrast_300,
|
|
},
|
|
bg_contrast_400: {
|
|
backgroundColor: darkPalette.contrast_400,
|
|
},
|
|
bg_contrast_500: {
|
|
backgroundColor: darkPalette.contrast_500,
|
|
},
|
|
bg_contrast_600: {
|
|
backgroundColor: darkPalette.contrast_600,
|
|
},
|
|
bg_contrast_700: {
|
|
backgroundColor: darkPalette.contrast_700,
|
|
},
|
|
bg_contrast_800: {
|
|
backgroundColor: darkPalette.contrast_800,
|
|
},
|
|
bg_contrast_900: {
|
|
backgroundColor: darkPalette.contrast_900,
|
|
},
|
|
bg_contrast_950: {
|
|
backgroundColor: darkPalette.contrast_950,
|
|
},
|
|
bg_contrast_975: {
|
|
backgroundColor: darkPalette.contrast_975,
|
|
},
|
|
border_contrast_low: {
|
|
borderColor: darkPalette.contrast_100,
|
|
},
|
|
border_contrast_medium: {
|
|
borderColor: darkPalette.contrast_200,
|
|
},
|
|
border_contrast_high: {
|
|
borderColor: darkPalette.contrast_300,
|
|
},
|
|
shadow_sm: {
|
|
...atoms.shadow_sm,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: color.trueBlack,
|
|
},
|
|
shadow_md: {
|
|
...atoms.shadow_md,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: color.trueBlack,
|
|
},
|
|
shadow_lg: {
|
|
...atoms.shadow_lg,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: color.trueBlack,
|
|
},
|
|
},
|
|
}
|
|
|
|
const dim: Theme = {
|
|
...dark,
|
|
scheme: 'dark',
|
|
name: 'dim',
|
|
palette: dimPalette,
|
|
atoms: {
|
|
...dark.atoms,
|
|
text: {
|
|
color: dimPalette.white,
|
|
},
|
|
text_contrast_low: {
|
|
color: dimPalette.contrast_400,
|
|
},
|
|
text_contrast_medium: {
|
|
color: dimPalette.contrast_600,
|
|
},
|
|
text_contrast_high: {
|
|
color: dimPalette.contrast_900,
|
|
},
|
|
text_inverted: {
|
|
color: dimPalette.black,
|
|
},
|
|
bg: {
|
|
backgroundColor: dimPalette.black,
|
|
},
|
|
bg_contrast_25: {
|
|
backgroundColor: dimPalette.contrast_25,
|
|
},
|
|
bg_contrast_50: {
|
|
backgroundColor: dimPalette.contrast_50,
|
|
},
|
|
bg_contrast_100: {
|
|
backgroundColor: dimPalette.contrast_100,
|
|
},
|
|
bg_contrast_200: {
|
|
backgroundColor: dimPalette.contrast_200,
|
|
},
|
|
bg_contrast_300: {
|
|
backgroundColor: dimPalette.contrast_300,
|
|
},
|
|
bg_contrast_400: {
|
|
backgroundColor: dimPalette.contrast_400,
|
|
},
|
|
bg_contrast_500: {
|
|
backgroundColor: dimPalette.contrast_500,
|
|
},
|
|
bg_contrast_600: {
|
|
backgroundColor: dimPalette.contrast_600,
|
|
},
|
|
bg_contrast_700: {
|
|
backgroundColor: dimPalette.contrast_700,
|
|
},
|
|
bg_contrast_800: {
|
|
backgroundColor: dimPalette.contrast_800,
|
|
},
|
|
bg_contrast_900: {
|
|
backgroundColor: dimPalette.contrast_900,
|
|
},
|
|
bg_contrast_950: {
|
|
backgroundColor: dimPalette.contrast_950,
|
|
},
|
|
bg_contrast_975: {
|
|
backgroundColor: dimPalette.contrast_975,
|
|
},
|
|
border_contrast_low: {
|
|
borderColor: dimPalette.contrast_100,
|
|
},
|
|
border_contrast_medium: {
|
|
borderColor: dimPalette.contrast_200,
|
|
},
|
|
border_contrast_high: {
|
|
borderColor: dimPalette.contrast_300,
|
|
},
|
|
shadow_sm: {
|
|
...atoms.shadow_sm,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
|
},
|
|
shadow_md: {
|
|
...atoms.shadow_md,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
|
},
|
|
shadow_lg: {
|
|
...atoms.shadow_lg,
|
|
shadowOpacity: 0.7,
|
|
shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
|
|
},
|
|
},
|
|
}
|
|
|
|
return {
|
|
lightPalette,
|
|
darkPalette,
|
|
dimPalette,
|
|
light,
|
|
dark,
|
|
dim,
|
|
}
|
|
}
|