patch of color scheme selector · round #0 · pull #6 · jollywhoppers.com/witchsky.app

+33 -3

src/alf/index.tsx

···

       1
       1
        
       import React from 'react'

     

       2
       2
        
       import {type Theme, type ThemeName} from '@bsky.app/alf'

     

       3
       3
        
       

     

       4
       4
       +
       import {useThemePrefs} from '#/state/shell/color-mode'

     

       4
       5
        
       import {

     

       5
       6
        
         computeFontScaleMultiplier,

     

       6
       7
        
         getFontFamily,

     
···

       8
       9
        
         setFontFamily as persistFontFamily,

     

       9
       10
        
         setFontScale as persistFontScale,

     

       10
       11
        
       } from '#/alf/fonts'

     

       11
       11
       -
       import {themes} from '#/alf/themes'

     

       12
       12
       +
       import {

     

       13
       13
       +
         blackskyscheme,

     

       14
       14
       +
         blueskyscheme,

     

       15
       15
       +
         deerscheme,

     

       16
       16
       +
         themes,

     

       17
       17
       +
         witchskyscheme,

     

       18
       18
       +
         zeppelinscheme,

     

       19
       19
       +
       } from '#/alf/themes'

     

       12
       20
        
       import {type Device} from '#/storage'

     

       13
       21
        
       

     

       14
       22
        
       export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf'

     
···

       56
       64
        
       })

     

       57
       65
        
       Context.displayName = 'AlfContext'

     

       58
       66
        
       

     

       67
       67
       +
       export type SchemeType = typeof themes

     

       68
       68
       +
       

     

       69
       69
       +
       export function selectScheme(colorScheme: string | undefined): SchemeType {

     

       70
       70
       +
         switch (colorScheme) {

     

       71
       71
       +
           case 'witchsky':

     

       72
       72
       +
             return witchskyscheme

     

       73
       73
       +
           case 'bluesky':

     

       74
       74
       +
             return blueskyscheme

     

       75
       75
       +
           case 'blacksky':

     

       76
       76
       +
             return blackskyscheme

     

       77
       77
       +
           case 'deer':

     

       78
       78
       +
             return deerscheme

     

       79
       79
       +
           case 'zeppelin':

     

       80
       80
       +
             return zeppelinscheme

     

       81
       81
       +
           default:

     

       82
       82
       +
             return themes

     

       83
       83
       +
         }

     

       84
       84
       +
       }

     

       85
       85
       +
       

     

       59
       86
        
       export function ThemeProvider({

     

       60
       87
        
         children,

     

       61
       88
        
         theme: themeName,

     

       62
       89
        
       }: React.PropsWithChildren<{theme: ThemeName}>) {

     

       90
       90
       +
         const {colorScheme} = useThemePrefs()

     

       91
       91
       +
         const currentScheme = selectScheme(colorScheme)

     

       63
       92
        
         const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() =>

     

       64
       93
        
           getFontScale(),

     

       65
       94
        
         )

     
···

       91
       120
        
       

     

       92
       121
        
         const value = React.useMemo<Alf>(

     

       93
       122
        
           () => ({

     

       94
       94
       -
             themes,

     

       123
       123
       +
             themes: currentScheme,

     

       95
       124
        
             themeName: themeName,

     

       96
       96
       -
             theme: themes[themeName],

     

       125
       125
       +
             theme: currentScheme[themeName],

     

       97
       126
        
             fonts: {

     

       98
       127
        
               scale: fontScale,

     

       99
       128
        
               scaleMultiplier: fontScaleMultiplier,

     
···

       104
       133
        
             flags: {},

     

       105
       134
        
           }),

     

       106
       135
        
           [

     

       136
       136
       +
             currentScheme,

     

       107
       137
        
             themeName,

     

       108
       138
        
             fontScale,

     

       109
       139
        
             setFontScaleAndPersist,

+712

src/alf/themes.ts

···

       5
       5
        
         //  DEFAULT_SUBDUED_PALETTE,

     

       6
       6
        
       } from '@bsky.app/alf'

     

       7
       7
        
       

     

       8
       8
       +
       import {

     

       9
       9
       +
         BLUE_HUE as BLACKSKY_BLUE_HUE,

     

       10
       10
       +
         // defaultScale as BLACKSKY_defaultScale,

     

       11
       11
       +
         dimScale as BLACKSKY_dimScale,

     

       12
       12
       +
         GREEN_HUE as BLACKSKY_GREEN_HUE,

     

       13
       13
       +
         RED_HUE as BLACKSKY_RED_HUE,

     

       14
       14
       +
       } from '#/alf/util/blackskyColorGeneration'

     

       15
       15
       +
       import {

     

       16
       16
       +
         BLUE_HUE as ZEPPELIN_BLUE_HUE,

     

       17
       17
       +
         defaultScale as ZEPPELIN_defaultScale,

     

       18
       18
       +
         dimScale as ZEPPELIN_dimScale,

     

       19
       19
       +
         GREEN_HUE as ZEPPELIN_GREEN_HUE,

     

       20
       20
       +
         RED_HUE as ZEPPELIN_RED_HUE,

     

       21
       21
       +
       } from '#/alf/util/blackskyColorGeneration'

     

       22
       22
       +
       import {

     

       23
       23
       +
         BLUE_HUE as DEER_BLUE_HUE,

     

       24
       24
       +
         defaultScale as DEER_defaultScale,

     

       25
       25
       +
         // dimScale as DEER_dimScale,

     

       26
       26
       +
         GREEN_HUE as DEER_GREEN_HUE,

     

       27
       27
       +
         RED_HUE as DEER_RED_HUE,

     

       28
       28
       +
       } from '#/alf/util/deerColorGeneration'

     

       29
       29
       +
       

     

       8
       30
        
       export type Palette = {

     

       9
       31
        
         white: string

     

       10
       32
        
         black: string

     
···

       277
       299
        
         dim: DEFAULT_THEMES.dim,

     

       278
       300
        
       }

     

       279
       301
        
       

     

       302
       302
       +
       export const witchskyscheme = themes

     

       303
       303
       +
       

     

       304
       304
       +
       // const BLUESKY_THEMES = createThemes({

     

       305
       305
       +
       //   defaultPalette: BLUESKY_PALETTE,

     

       306
       306
       +
       //   subduedPalette: BLUESKY_SUBDUED_PALETTE,

     

       307
       307
       +
       // })

     

       308
       308
       +
       

     

       309
       309
       +
       // export const blueskyscheme = {

     

       310
       310
       +
       //   lightPalette: BLUESKY_THEMES.light.palette,

     

       311
       311
       +
       //   darkPalette: BLUESKY_THEMES.dark.palette,

     

       312
       312
       +
       //   dimPalette: BLUESKY_THEMES.dim.palette,

     

       313
       313
       +
       //   light: BLUESKY_THEMES.light,

     

       314
       314
       +
       //   dark: BLUESKY_THEMES.dark,

     

       315
       315
       +
       //   dim: BLUESKY_THEMES.dim,

     

       316
       316
       +
       // }

     

       317
       317
       +
       // export const YELLOW_PALETTE: Palette = {

     

       318
       318
       +
       //   white: '#FEFBFB',

     

       319
       319
       +
       //   black: '#000000',

     

       320
       320
       +
       //   like: '#dd5e8f',

     

       321
       321
       +
       

     

       322
       322
       +
       //   contrast_0: '#FEFBFB',

     

       323
       323
       +
       //   contrast_25: '#F8F6EB',

     

       324
       324
       +
       //   contrast_50: '#F2EDD8',

     

       325
       325
       +
       //   contrast_100: '#E9E3C1',

     

       326
       326
       +
       //   contrast_200: '#E0D9AA',

     

       327
       327
       +
       //   contrast_300: '#D6CF94',

     

       328
       328
       +
       //   contrast_400: '#CBC47F',

     

       329
       329
       +
       //   contrast_500: '#C0B96B',

     

       330
       330
       +
       //   contrast_600: '#A49D59',

     

       331
       331
       +
       //   contrast_700: '#888249',

     

       332
       332
       +
       //   contrast_800: '#6D683A',

     

       333
       333
       +
       //   contrast_900: '#544F2C',

     

       334
       334
       +
       //   contrast_950: '#3E391F',

     

       335
       335
       +
       //   contrast_975: '#262413',

     

       336
       336
       +
       //   contrast_1000: '#000000',

     

       337
       337
       +
       

     

       338
       338
       +
       //   primary_25: `hsl(50, 70%, 97%)`,

     

       339
       339
       +
       //   primary_50: `hsl(50, 70%, 94%)`,

     

       340
       340
       +
       //   primary_100: `hsl(50, 70%, 88%)`,

     

       341
       341
       +
       //   primary_200: `hsl(50, 75%, 78%)`,

     

       342
       342
       +
       //   primary_300: `hsl(50, 78%, 68%)`,

     

       343
       343
       +
       //   primary_400: `hsl(50, 82%, 58%)`,

     

       344
       344
       +
       //   primary_500: `hsl(50, 85%, 52%)`,

     

       345
       345
       +
       //   primary_600: `hsl(50, 80%, 46%)`,

     

       346
       346
       +
       //   primary_700: `hsl(50, 60%, 33%)`,

     

       347
       347
       +
       //   primary_800: `hsl(50, 48%, 26%)`,

     

       348
       348
       +
       //   primary_900: `hsl(50, 45%, 18%)`,

     

       349
       349
       +
       //   primary_950: `hsl(50, 40%, 10%)`,

     

       350
       350
       +
       //   primary_975: `hsl(50, 38%, 7%)`,

     

       351
       351
       +
       

     

       352
       352
       +
       //   positive_25: '#F3FCEB',

     

       353
       353
       +
       //   positive_50: '#E8F9D5',

     

       354
       354
       +
       //   positive_100: '#D4F4AE',

     

       355
       355
       +
       //   positive_200: '#BEED81',

     

       356
       356
       +
       //   positive_300: '#A4E34D',

     

       357
       357
       +
       //   positive_400: '#8FD61E',

     

       358
       358
       +
       //   positive_500: '#7AB815',

     

       359
       359
       +
       //   positive_600: '#629412',

     

       360
       360
       +
       //   positive_700: '#4E720F',

     

       361
       361
       +
       //   positive_800: '#3C560C',

     

       362
       362
       +
       //   positive_900: '#2D4109',

     

       363
       363
       +
       //   positive_950: '#203006',

     

       364
       364
       +
       //   positive_975: '#162204',

     

       365
       365
       +
       

     

       366
       366
       +
       //   negative_25: '#FFF7EB',

     

       367
       367
       +
       //   negative_50: '#FEEBD3',

     

       368
       368
       +
       //   negative_100: '#FDDBB3',

     

       369
       369
       +
       //   negative_200: '#FBC68B',

     

       370
       370
       +
       //   negative_300: '#F7A44E',

     

       371
       371
       +
       //   negative_400: '#EF8217',

     

       372
       372
       +
       //   negative_500: '#D86E0F',

     

       373
       373
       +
       //   negative_600: '#B55B0D',

     

       374
       374
       +
       //   negative_700: '#8E480A',

     

       375
       375
       +
       //   negative_800: '#6C3708',

     

       376
       376
       +
       //   negative_900: '#4F2906',

     

       377
       377
       +
       //   negative_950: '#371D04',

     

       378
       378
       +
       //   negative_975: '#261403',

     

       379
       379
       +
       // }

     

       380
       380
       +
       

     

       381
       381
       +
       // export const YELLOW_SUBDUED_PALETTE: Palette = {

     

       382
       382
       +
       //   white: '#FEFBFB',

     

       383
       383
       +
       //   black: '#383434',

     

       384
       384
       +
       //   like: '#dd5e8f',

     

       385
       385
       +
       

     

       386
       386
       +
       //   contrast_0: '#FEFBFB',

     

       387
       387
       +
       //   contrast_25: '#F8F6EB',

     

       388
       388
       +
       //   contrast_50: '#F2EDD8',

     

       389
       389
       +
       //   contrast_100: '#E9E3C1',

     

       390
       390
       +
       //   contrast_200: '#E0D9AA',

     

       391
       391
       +
       //   contrast_300: '#D6CF94',

     

       392
       392
       +
       //   contrast_400: '#CBC47F',

     

       393
       393
       +
       //   contrast_500: '#C0B96B',

     

       394
       394
       +
       //   contrast_600: '#A49D59',

     

       395
       395
       +
       //   contrast_700: '#888249',

     

       396
       396
       +
       //   contrast_800: '#6D683A',

     

       397
       397
       +
       //   contrast_900: '#544F2C',

     

       398
       398
       +
       //   contrast_950: '#3E391F',

     

       399
       399
       +
       //   contrast_975: '#312F1A',

     

       400
       400
       +
       //   contrast_1000: '#262414',

     

       401
       401
       +
       

     

       402
       402
       +
       //   primary_25: `hsl(50, 70%, 97%)`,

     

       403
       403
       +
       //   primary_50: `hsl(50, 70%, 94%)`,

     

       404
       404
       +
       //   primary_100: `hsl(50, 70%, 88%)`,

     

       405
       405
       +
       //   primary_200: `hsl(50, 75%, 78%)`,

     

       406
       406
       +
       //   primary_300: `hsl(50, 78%, 68%)`,

     

       407
       407
       +
       //   primary_400: `hsl(50, 78%, 62%)`,

     

       408
       408
       +
       //   primary_500: `hsl(50, 75%, 52%)`,

     

       409
       409
       +
       //   primary_600: `hsl(50, 70%, 46%)`,

     

       410
       410
       +
       //   primary_700: `hsl(50, 58%, 40%)`,

     

       411
       411
       +
       //   primary_800: `hsl(50, 48%, 26%)`,

     

       412
       412
       +
       //   primary_900: `hsl(50, 45%, 18%)`,

     

       413
       413
       +
       //   primary_950: `hsl(50, 40%, 10%)`,

     

       414
       414
       +
       //   primary_975: `hsl(50, 38%, 7%)`,

     

       415
       415
       +
       

     

       416
       416
       +
       //   positive_25: '#F3FCEB',

     

       417
       417
       +
       //   positive_50: '#EAF9DA',

     

       418
       418
       +
       //   positive_100: '#D6F4B3',

     

       419
       419
       +
       //   positive_200: '#C0ED87',

     

       420
       420
       +
       //   positive_300: '#A8E45A',

     

       421
       421
       +
       //   positive_400: '#94D93B',

     

       422
       422
       +
       //   positive_500: '#7FBE2E',

     

       423
       423
       +
       //   positive_600: '#659C25',

     

       424
       424
       +
       //   positive_700: '#517B1D',

     

       425
       425
       +
       //   positive_800: '#405F17',

     

       426
       426
       +
       //   positive_900: '#314812',

     

       427
       427
       +
       //   positive_950: '#23350C',

     

       428
       428
       +
       //   positive_975: '#1A2709',

     

       429
       429
       +
       

     

       430
       430
       +
       //   negative_25: '#FFF7EB',

     

       431
       431
       +
       //   negative_50: '#FEEFE0',

     

       432
       432
       +
       //   negative_100: '#FDE2C6',

     

       433
       433
       +
       //   negative_200: '#FBCDA1',

     

       434
       434
       +
       //   negative_300: '#F7AD68',

     

       435
       435
       +
       //   negative_400: '#EF9140',

     

       436
       436
       +
       //   negative_500: '#E0761F',

     

       437
       437
       +
       //   negative_600: '#C06319',

     

       438
       438
       +
       //   negative_700: '#995012',

     

       439
       439
       +
       //   negative_800: '#75400E',

     

       440
       440
       +
       //   negative_900: '#58300A',

     

       441
       441
       +
       //   negative_950: '#3E2107',

     

       442
       442
       +
       //   negative_975: '#2D1805',

     

       443
       443
       +
       // }

     

       444
       444
       +
       

     

       445
       445
       +
       // const YELLOW_THEMES = createThemes({

     

       446
       446
       +
       //   defaultPalette: YELLOW_PALETTE,

     

       447
       447
       +
       //   subduedPalette: YELLOW_SUBDUED_PALETTE,

     

       448
       448
       +
       // })

     

       449
       449
       +
       

     

       450
       450
       +
       // export const yellowscheme = {

     

       451
       451
       +
       //   lightPalette: YELLOW_THEMES.light.palette,

     

       452
       452
       +
       //   darkPalette: YELLOW_THEMES.dark.palette,

     

       453
       453
       +
       //   dimPalette: YELLOW_THEMES.dim.palette,

     

       454
       454
       +
       //   light: YELLOW_THEMES.light,

     

       455
       455
       +
       //   dark: YELLOW_THEMES.dark,

     

       456
       456
       +
       //   dim: YELLOW_THEMES.dim,

     

       457
       457
       +
       // }

     

       458
       458
       +
       export const BLACKSKY_BRAND = {

     

       459
       459
       +
         /* Neutrals */

     

       460
       460
       +
         black: '#070C0C',

     

       461
       461
       +
         white: '#F8FAF9',

     

       462
       462
       +
         twilight: '#161E27',

     

       463
       463
       +
         gray300: '#C8CAC9',

     

       464
       464
       +
         gray400: '#9C9E9E',

     

       465
       465
       +
         gray600: '#6A6A6A',

     

       466
       466
       +
       

     

       467
       467
       +
         /* Primary / “Indigo‑violet” */

     

       468
       468
       +
         primaryLight: '#6060E9',

     

       469
       469
       +
         primaryLightTint: '#EAEBFC',

     

       470
       470
       +
         primaryDark: '#8686FF',

     

       471
       471
       +
         primaryDarkTint: '#464985',

     

       472
       472
       +
       

     

       473
       473
       +
         /* Accent / Lime‑green (“success”) */

     

       474
       474
       +
         secondary: '#D2FC51',

     

       475
       475
       +
         secondaryTint: '#F1FECB',

     

       476
       476
       +
       

     

       477
       477
       +
         /* Negative / Brand red */

     

       478
       478
       +
         negative: '#F40B42',

     

       479
       479
       +
       } as const

     

       480
       480
       +
       

     

       481
       481
       +
       const scaleLight = (idx: number) => BLACKSKY_dimScale[idx]

     

       482
       482
       +
       

     

       483
       483
       +
       export const BLACKSKY_PALETTE: Palette = {

     

       484
       484
       +
         white: BLACKSKY_BRAND.white,

     

       485
       485
       +
         black: BLACKSKY_BRAND.black,

     

       486
       486
       +
         like: '#EC4899',

     

       487
       487
       +
       

     

       488
       488
       +
         // neutrals

     

       489
       489
       +
         contrast_0: BLACKSKY_BRAND.white,

     

       490
       490
       +
         contrast_25: BLACKSKY_BRAND.white, // Very Light

     

       491
       491
       +
         contrast_50: '#F0F2F2',

     

       492
       492
       +
         contrast_100: '#E6E8E8',

     

       493
       493
       +
         contrast_200: '#D1D3D3',

     

       494
       494
       +
         contrast_300: '#B6B8B8',

     

       495
       495
       +
         contrast_400: '#9C9E9E',

     

       496
       496
       +
         contrast_500: '#818383',

     

       497
       497
       +
         contrast_600: '#6A6A6A',

     

       498
       498
       +
         contrast_700: '#4F5050',

     

       499
       499
       +
         contrast_800: '#353636',

     

       500
       500
       +
         contrast_900: '#1F2020',

     

       501
       501
       +
         contrast_950: '#121313',

     

       502
       502
       +
         contrast_975: '#0B0C0C',

     

       503
       503
       +
         contrast_1000: BLACKSKY_BRAND.black,

     

       504
       504
       +
       

     

       505
       505
       +
         // primary (light scheme)

     

       506
       506
       +
         // Tuned to ensure _975 isn't too saturated so the inverted Dark Mode background is clean.

     

       507
       507
       +
         primary_25: BLACKSKY_BRAND.primaryLightTint,

     

       508
       508
       +
         primary_50: '#DCDDFA',

     

       509
       509
       +
         primary_100: '#C6C8F5',

     

       510
       510
       +
         primary_200: '#B0B3F0',

     

       511
       511
       +
         primary_300: '#989CED',

     

       512
       512
       +
         primary_400: '#8286E7',

     

       513
       513
       +
         primary_500: BLACKSKY_BRAND.primaryLight,

     

       514
       514
       +
         primary_600: '#5252C3',

     

       515
       515
       +
         primary_700: '#4545A8',

     

       516
       516
       +
         primary_800: '#38388D',

     

       517
       517
       +
         primary_900: '#2B2B71',

     

       518
       518
       +
         primary_950: '#151540', // Deepened and desaturated slightly

     

       519
       519
       +
         primary_975: '#0B0B24', // Almost black-blue, ensures Dark Mode BG isn't "muddy blue"

     

       520
       520
       +
       

     

       521
       521
       +
         // success

     

       522
       522
       +
         positive_25: BLACKSKY_BRAND.secondaryTint,

     

       523
       523
       +
         positive_50: '#EAFDD1',

     

       524
       524
       +
         positive_100: '#DAFCAB',

     

       525
       525
       +
         positive_200: '#C8FC80',

     

       526
       526
       +
         positive_300: '#BBFB66',

     

       527
       527
       +
         positive_400: '#AEFA59',

     

       528
       528
       +
         positive_500: BLACKSKY_BRAND.secondary,

     

       529
       529
       +
         positive_600: '#A0EC46',

     

       530
       530
       +
         positive_700: '#82C838',

     

       531
       531
       +
         positive_800: '#66942A',

     

       532
       532
       +
         positive_900: '#4A601C',

     

       533
       533
       +
         positive_950: '#2E3B0E',

     

       534
       534
       +
         positive_975: '#181F07',

     

       535
       535
       +
       

     

       536
       536
       +
         // error

     

       537
       537
       +
         negative_25: '#FFE5EC',

     

       538
       538
       +
         negative_50: '#FFD9E3',

     

       539
       539
       +
         negative_100: '#FFC1D1',

     

       540
       540
       +
         negative_200: '#FF9AB3',

     

       541
       541
       +
         negative_300: '#FF7396',

     

       542
       542
       +
         negative_400: '#FF4B78',

     

       543
       543
       +
         negative_500: BLACKSKY_BRAND.negative,

     

       544
       544
       +
         negative_600: '#C00A32',

     

       545
       545
       +
         negative_700: '#920826',

     

       546
       546
       +
         negative_800: '#630619',

     

       547
       547
       +
         negative_900: '#35030D',

     

       548
       548
       +
         negative_950: '#1B0206',

     

       549
       549
       +
         negative_975: '#0E0103',

     

       550
       550
       +
       } as const

     

       551
       551
       +
       

     

       552
       552
       +
       // The Subdued palette must be defined as a LIGHT palette.

     

       553
       553
       +
       // createThemes will then INVERT this to create the Dim (Dark Blue) theme.

     

       554
       554
       +
       // We map _25 to High Lightness and _975 to Low Lightness.

     

       555
       555
       +
       export const BLACKSKY_SUBDUED_PALETTE: Palette = {

     

       556
       556
       +
         ...BLACKSKY_PALETTE,

     

       557
       557
       +
       

     

       558
       558
       +
         // Override black to a softer twilight for the text in Light mode (optional)

     

       559
       559
       +
         // or primarily for the background color in the inverted Dim mode.

     

       560
       560
       +
         black: '#161E27',

     

       561
       561
       +
       

     

       562
       562
       +
         // Neutral / Contrast Scale (Blue-Tinted Grays)

     

       563
       563
       +
         // We utilize the dimScale in reverse: [14] is lightest, [1] is darkest.

     

       564
       564
       +
         contrast_0: '#FFFFFF',

     

       565
       565
       +
         contrast_25: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(14)}%)`, // Lightest

     

       566
       566
       +
         contrast_50: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(13)}%)`,

     

       567
       567
       +
         contrast_100: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(12)}%)`,

     

       568
       568
       +
         contrast_200: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(11)}%)`,

     

       569
       569
       +
         contrast_300: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(10)}%)`,

     

       570
       570
       +
         contrast_400: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(9)}%)`,

     

       571
       571
       +
         contrast_500: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(8)}%)`,

     

       572
       572
       +
         contrast_600: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(7)}%)`,

     

       573
       573
       +
         contrast_700: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(5)}%)`,

     

       574
       574
       +
         contrast_800: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(4)}%)`,

     

       575
       575
       +
         contrast_900: `hsl(${BLACKSKY_BLUE_HUE}, 24%, ${scaleLight(3)}%)`,

     

       576
       576
       +
         contrast_950: `hsl(${BLACKSKY_BLUE_HUE}, 28%, ${scaleLight(2)}%)`,

     

       577
       577
       +
         contrast_975: `hsl(${BLACKSKY_BLUE_HUE}, 30%, ${scaleLight(1)}%)`, // Darkest

     

       578
       578
       +
         contrast_1000: `hsl(${BLACKSKY_BLUE_HUE}, 30%, 8%)`, // Absolute Darkest

     

       579
       579
       +
       

     

       580
       580
       +
         // Subdued Primary

     

       581
       581
       +
         // Less saturation than the main palette to fit the "Subdued" vibe

     

       582
       582
       +
         primary_25: `hsl(240, 60%, 97%)`,

     

       583
       583
       +
         primary_50: `hsl(240, 60%, 95%)`,

     

       584
       584
       +
         primary_100: `hsl(240, 55%, 90%)`,

     

       585
       585
       +
         primary_200: `hsl(240, 50%, 80%)`,

     

       586
       586
       +
         primary_300: `hsl(240, 45%, 70%)`,

     

       587
       587
       +
         primary_400: `hsl(240, 40%, 60%)`,

     

       588
       588
       +
         primary_500: `hsl(240, 35%, 50%)`, // Midpoint

     

       589
       589
       +
         primary_600: `hsl(240, 40%, 45%)`,

     

       590
       590
       +
         primary_700: `hsl(240, 45%, 35%)`,

     

       591
       591
       +
         primary_800: `hsl(240, 50%, 25%)`,

     

       592
       592
       +
         primary_900: `hsl(240, 50%, 15%)`,

     

       593
       593
       +
         primary_950: `hsl(240, 50%, 10%)`,

     

       594
       594
       +
         primary_975: `hsl(240, 50%, 6%)`,

     

       595
       595
       +
       

     

       596
       596
       +
         // Subdued Success

     

       597
       597
       +
         positive_25: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 96%)`,

     

       598
       598
       +
         positive_50: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 93%)`,

     

       599
       599
       +
         positive_100: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 88%)`,

     

       600
       600
       +
         positive_200: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 80%)`,

     

       601
       601
       +
         positive_300: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 70%)`,

     

       602
       602
       +
         positive_400: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 60%)`,

     

       603
       603
       +
         positive_500: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 50%)`,

     

       604
       604
       +
         positive_600: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 40%)`,

     

       605
       605
       +
         positive_700: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 30%)`,

     

       606
       606
       +
         positive_800: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 20%)`,

     

       607
       607
       +
         positive_900: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 15%)`,

     

       608
       608
       +
         positive_950: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 10%)`,

     

       609
       609
       +
         positive_975: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 5%)`,

     

       610
       610
       +
       

     

       611
       611
       +
         // Subdued Negative

     

       612
       612
       +
         negative_25: `hsl(${BLACKSKY_RED_HUE}, 70%, 97%)`,

     

       613
       613
       +
         negative_50: `hsl(${BLACKSKY_RED_HUE}, 70%, 95%)`,

     

       614
       614
       +
         negative_100: `hsl(${BLACKSKY_RED_HUE}, 65%, 90%)`,

     

       615
       615
       +
         negative_200: `hsl(${BLACKSKY_RED_HUE}, 60%, 80%)`,

     

       616
       616
       +
         negative_300: `hsl(${BLACKSKY_RED_HUE}, 55%, 70%)`,

     

       617
       617
       +
         negative_400: `hsl(${BLACKSKY_RED_HUE}, 55%, 60%)`,

     

       618
       618
       +
         negative_500: `hsl(${BLACKSKY_RED_HUE}, 60%, 50%)`,

     

       619
       619
       +
         negative_600: `hsl(${BLACKSKY_RED_HUE}, 60%, 45%)`,

     

       620
       620
       +
         negative_700: `hsl(${BLACKSKY_RED_HUE}, 65%, 35%)`,

     

       621
       621
       +
         negative_800: `hsl(${BLACKSKY_RED_HUE}, 65%, 25%)`,

     

       622
       622
       +
         negative_900: `hsl(${BLACKSKY_RED_HUE}, 70%, 15%)`,

     

       623
       623
       +
         negative_950: `hsl(${BLACKSKY_RED_HUE}, 70%, 10%)`,

     

       624
       624
       +
         negative_975: `hsl(${BLACKSKY_RED_HUE}, 70%, 5%)`,

     

       625
       625
       +
       } as const

     

       626
       626
       +
       

     

       627
       627
       +
       const BLACKSKY_THEMES = createThemes({

     

       628
       628
       +
         defaultPalette: BLACKSKY_PALETTE,

     

       629
       629
       +
         subduedPalette: BLACKSKY_SUBDUED_PALETTE,

     

       630
       630
       +
       })

     

       631
       631
       +
       

     

       632
       632
       +
       export const blackskyscheme = {

     

       633
       633
       +
         lightPalette: BLACKSKY_THEMES.light.palette,

     

       634
       634
       +
         darkPalette: BLACKSKY_THEMES.dark.palette,

     

       635
       635
       +
         dimPalette: BLACKSKY_THEMES.dim.palette,

     

       636
       636
       +
         light: BLACKSKY_THEMES.light,

     

       637
       637
       +
         dark: BLACKSKY_THEMES.dark,

     

       638
       638
       +
         dim: BLACKSKY_THEMES.dim,

     

       639
       639
       +
       }

     

       640
       640
       +
       

     

       641
       641
       +
       export const BLUESKY_PALETTE: Palette = {

     

       642
       642
       +
         white: '#FFFFFF',

     

       643
       643
       +
         black: '#000000',

     

       644
       644
       +
         like: '#EC4899',

     

       645
       645
       +
       

     

       646
       646
       +
         contrast_0: '#FFFFFF',

     

       647
       647
       +
         contrast_25: '#F9FAFB',

     

       648
       648
       +
         contrast_50: '#EFF2F6',

     

       649
       649
       +
         contrast_100: '#DCE2EA',

     

       650
       650
       +
         contrast_200: '#C0CAD8',

     

       651
       651
       +
         contrast_300: '#A5B2C5',

     

       652
       652
       +
         contrast_400: '#8798B0',

     

       653
       653
       +
         contrast_500: '#667B99',

     

       654
       654
       +
         contrast_600: '#526580',

     

       655
       655
       +
         contrast_700: '#405168',

     

       656
       656
       +
         contrast_800: '#313F54',

     

       657
       657
       +
         contrast_900: '#232E3E',

     

       658
       658
       +
         contrast_950: '#19222E',

     

       659
       659
       +
         contrast_975: '#111822',

     

       660
       660
       +
         contrast_1000: '#000000',

     

       661
       661
       +
       

     

       662
       662
       +
         primary_25: '#F5F9FF',

     

       663
       663
       +
         primary_50: '#E5F0FF',

     

       664
       664
       +
         primary_100: '#CCE1FF',

     

       665
       665
       +
         primary_200: '#A8CCFF',

     

       666
       666
       +
         primary_300: '#75AFFF',

     

       667
       667
       +
         primary_400: '#4291FF',

     

       668
       668
       +
         primary_500: '#006AFF',

     

       669
       669
       +
         primary_600: '#0059D6',

     

       670
       670
       +
         primary_700: '#0048AD',

     

       671
       671
       +
         primary_800: '#00398A',

     

       672
       672
       +
         primary_900: '#002861',

     

       673
       673
       +
         primary_950: '#001E47',

     

       674
       674
       +
         primary_975: '#001533',

     

       675
       675
       +
       

     

       676
       676
       +
         positive_25: '#ECFEF5',

     

       677
       677
       +
         positive_50: '#D3FDE8',

     

       678
       678
       +
         positive_100: '#A3FACF',

     

       679
       679
       +
         positive_200: '#6AF6B0',

     

       680
       680
       +
         positive_300: '#2CF28F',

     

       681
       681
       +
         positive_400: '#0DD370',

     

       682
       682
       +
         positive_500: '#09B35E',

     

       683
       683
       +
         positive_600: '#04904A',

     

       684
       684
       +
         positive_700: '#036D38',

     

       685
       685
       +
         positive_800: '#04522B',

     

       686
       686
       +
         positive_900: '#033F21',

     

       687
       687
       +
         positive_950: '#032A17',

     

       688
       688
       +
         positive_975: '#021D0F',

     

       689
       689
       +
       

     

       690
       690
       +
         negative_25: '#FFF5F7',

     

       691
       691
       +
         negative_50: '#FEE7EC',

     

       692
       692
       +
         negative_100: '#FDD3DD',

     

       693
       693
       +
         negative_200: '#FBBBCA',

     

       694
       694
       +
         negative_300: '#F891A9',

     

       695
       695
       +
         negative_400: '#F65A7F',

     

       696
       696
       +
         negative_500: '#E91646',

     

       697
       697
       +
         negative_600: '#CA123D',

     

       698
       698
       +
         negative_700: '#A71134',

     

       699
       699
       +
         negative_800: '#7F0B26',

     

       700
       700
       +
         negative_900: '#5F071C',

     

       701
       701
       +
         negative_950: '#430413',

     

       702
       702
       +
         negative_975: '#30030D',

     

       703
       703
       +
       }

     

       704
       704
       +
       

     

       705
       705
       +
       export const BLUESKY_SUBDUED_PALETTE: Palette = {

     

       706
       706
       +
         white: '#FFFFFF',

     

       707
       707
       +
         black: '#000000',

     

       708
       708
       +
         like: '#EC4899',

     

       709
       709
       +
       

     

       710
       710
       +
         contrast_0: '#FFFFFF',

     

       711
       711
       +
         contrast_25: '#F9FAFB',

     

       712
       712
       +
         contrast_50: '#F2F4F8',

     

       713
       713
       +
         contrast_100: '#E2E7EE',

     

       714
       714
       +
         contrast_200: '#C3CDDA',

     

       715
       715
       +
         contrast_300: '#ABB8C9',

     

       716
       716
       +
         contrast_400: '#8D9DB4',

     

       717
       717
       +
         contrast_500: '#6F839F',

     

       718
       718
       +
         contrast_600: '#586C89',

     

       719
       719
       +
         contrast_700: '#485B75',

     

       720
       720
       +
         contrast_800: '#394960',

     

       721
       721
       +
         contrast_900: '#2C3A4E',

     

       722
       722
       +
         contrast_950: '#222E3F',

     

       723
       723
       +
         contrast_975: '#1C2736',

     

       724
       724
       +
         contrast_1000: '#151D28',

     

       725
       725
       +
       

     

       726
       726
       +
         primary_25: '#F5F9FF',

     

       727
       727
       +
         primary_50: '#EBF3FF',

     

       728
       728
       +
         primary_100: '#D6E7FF',

     

       729
       729
       +
         primary_200: '#ADCFFF',

     

       730
       730
       +
         primary_300: '#80B5FF',

     

       731
       731
       +
         primary_400: '#4D97FF',

     

       732
       732
       +
         primary_500: '#0F73FF',

     

       733
       733
       +
         primary_600: '#0661E0',

     

       734
       734
       +
         primary_700: '#0A52B8',

     

       735
       735
       +
         primary_800: '#0E4490',

     

       736
       736
       +
         primary_900: '#123464',

     

       737
       737
       +
         primary_950: '#122949',

     

       738
       738
       +
         primary_975: '#122136',

     

       739
       739
       +
       

     

       740
       740
       +
         positive_25: '#ECFEF5',

     

       741
       741
       +
         positive_50: '#D8FDEB',

     

       742
       742
       +
         positive_100: '#A8FAD1',

     

       743
       743
       +
         positive_200: '#6FF6B3',

     

       744
       744
       +
         positive_300: '#31F291',

     

       745
       745
       +
         positive_400: '#0EDD75',

     

       746
       746
       +
         positive_500: '#0AC266',

     

       747
       747
       +
         positive_600: '#049F52',

     

       748
       748
       +
         positive_700: '#038142',

     

       749
       749
       +
         positive_800: '#056636',

     

       750
       750
       +
         positive_900: '#04522B',

     

       751
       751
       +
         positive_950: '#053D21',

     

       752
       752
       +
         positive_975: '#052917',

     

       753
       753
       +
       

     

       754
       754
       +
         negative_25: '#FFF5F7',

     

       755
       755
       +
         negative_50: '#FEEBEF',

     

       756
       756
       +
         negative_100: '#FDD8E1',

     

       757
       757
       +
         negative_200: '#FCC0CE',

     

       758
       758
       +
         negative_300: '#F99AB0',

     

       759
       759
       +
         negative_400: '#F76486',

     

       760
       760
       +
         negative_500: '#EB2452',

     

       761
       761
       +
         negative_600: '#D81341',

     

       762
       762
       +
         negative_700: '#BA1239',

     

       763
       763
       +
         negative_800: '#910D2C',

     

       764
       764
       +
         negative_900: '#6F0B22',

     

       765
       765
       +
         negative_950: '#500B1C',

     

       766
       766
       +
         negative_975: '#3E0915',

     

       767
       767
       +
       }

     

       768
       768
       +
       

     

       769
       769
       +
       const BLUESKY_THEMES = createThemes({

     

       770
       770
       +
         defaultPalette: BLUESKY_PALETTE,

     

       771
       771
       +
         subduedPalette: BLUESKY_SUBDUED_PALETTE,

     

       772
       772
       +
       })

     

       773
       773
       +
       

     

       774
       774
       +
       export const blueskyscheme = {

     

       775
       775
       +
         lightPalette: BLUESKY_THEMES.light.palette,

     

       776
       776
       +
         darkPalette: BLUESKY_THEMES.dark.palette,

     

       777
       777
       +
         dimPalette: BLUESKY_THEMES.dim.palette,

     

       778
       778
       +
         light: BLUESKY_THEMES.light,

     

       779
       779
       +
         dark: BLUESKY_THEMES.dark,

     

       780
       780
       +
         dim: BLUESKY_THEMES.dim,

     

       781
       781
       +
       }

     

       782
       782
       +
       

     

       783
       783
       +
       export const DEER_PALETTE: Palette = {

     

       784
       784
       +
         white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`,

     

       785
       785
       +
         black: '#000000',

     

       786
       786
       +
         like: '#ec4899',

     

       787
       787
       +
       

     

       788
       788
       +
         contrast_0: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`,

     

       789
       789
       +
         contrast_25: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[13]}%)`,

     

       790
       790
       +
         contrast_50: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[12]}%)`,

     

       791
       791
       +
         contrast_100: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[11]}%)`,

     

       792
       792
       +
         contrast_200: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[10]}%)`,

     

       793
       793
       +
         contrast_300: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[9]}%)`,

     

       794
       794
       +
         contrast_400: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[8]}%)`,

     

       795
       795
       +
         contrast_500: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[7]}%)`,

     

       796
       796
       +
         contrast_600: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[6]}%)`,

     

       797
       797
       +
         contrast_700: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[5]}%)`,

     

       798
       798
       +
         contrast_800: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[4]}%)`,

     

       799
       799
       +
         contrast_900: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[3]}%)`,

     

       800
       800
       +
         contrast_950: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[2]}%)`,

     

       801
       801
       +
         contrast_975: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[1]}%)`,

     

       802
       802
       +
         contrast_1000: '#000000',

     

       803
       803
       +
       

     

       804
       804
       +
         primary_25: `hsl(145, 30%, 97%)`,

     

       805
       805
       +
         primary_50: `hsl(145, 30%, 95%)`,

     

       806
       806
       +
         primary_100: `hsl(145, 30%, 90%)`,

     

       807
       807
       +
         primary_200: `hsl(145, 32%, 80%)`,

     

       808
       808
       +
         primary_300: `hsl(145, 34%, 70%)`,

     

       809
       809
       +
         primary_400: `hsl(145, 35%, 58%)`,

     

       810
       810
       +
         primary_500: `hsl(145, 35%, 45%)`,

     

       811
       811
       +
         primary_600: `hsl(145, 38%, 38%)`,

     

       812
       812
       +
         primary_700: `hsl(145, 40%, 32%)`,

     

       813
       813
       +
         primary_800: `hsl(145, 42%, 25%)`,

     

       814
       814
       +
         primary_900: `hsl(145, 45%, 18%)`,

     

       815
       815
       +
         primary_950: `hsl(145, 48%, 10%)`,

     

       816
       816
       +
         primary_975: `hsl(145, 50%, 7%)`,

     

       817
       817
       +
       

     

       818
       818
       +
         positive_25: `hsl(${DEER_GREEN_HUE}, 82%, 97%)`,

     

       819
       819
       +
         positive_50: `hsl(${DEER_GREEN_HUE}, 82%, 95%)`,

     

       820
       820
       +
         positive_100: `hsl(${DEER_GREEN_HUE}, 82%, 90%)`,

     

       821
       821
       +
         positive_200: `hsl(${DEER_GREEN_HUE}, 82%, 80%)`,

     

       822
       822
       +
         positive_300: `hsl(${DEER_GREEN_HUE}, 82%, 70%)`,

     

       823
       823
       +
         positive_400: `hsl(${DEER_GREEN_HUE}, 82%, 60%)`,

     

       824
       824
       +
         positive_500: `hsl(${DEER_GREEN_HUE}, 82%, 50%)`,

     

       825
       825
       +
         positive_600: `hsl(${DEER_GREEN_HUE}, 82%, 42%)`,

     

       826
       826
       +
         positive_700: `hsl(${DEER_GREEN_HUE}, 82%, 34%)`,

     

       827
       827
       +
         positive_800: `hsl(${DEER_GREEN_HUE}, 82%, 26%)`,

     

       828
       828
       +
         positive_900: `hsl(${DEER_GREEN_HUE}, 82%, 18%)`,

     

       829
       829
       +
         positive_950: `hsl(${DEER_GREEN_HUE}, 82%, 10%)`,

     

       830
       830
       +
         positive_975: `hsl(${DEER_GREEN_HUE}, 82%, 7%)`,

     

       831
       831
       +
       

     

       832
       832
       +
         negative_25: `hsl(${DEER_RED_HUE}, 91%, 97%)`,

     

       833
       833
       +
         negative_50: `hsl(${DEER_RED_HUE}, 91%, 95%)`,

     

       834
       834
       +
         negative_100: `hsl(${DEER_RED_HUE}, 91%, 90%)`,

     

       835
       835
       +
         negative_200: `hsl(${DEER_RED_HUE}, 91%, 80%)`,

     

       836
       836
       +
         negative_300: `hsl(${DEER_RED_HUE}, 91%, 70%)`,

     

       837
       837
       +
         negative_400: `hsl(${DEER_RED_HUE}, 91%, 60%)`,

     

       838
       838
       +
         negative_500: `hsl(${DEER_RED_HUE}, 91%, 50%)`,

     

       839
       839
       +
         negative_600: `hsl(${DEER_RED_HUE}, 91%, 42%)`,

     

       840
       840
       +
         negative_700: `hsl(${DEER_RED_HUE}, 91%, 34%)`,

     

       841
       841
       +
         negative_800: `hsl(${DEER_RED_HUE}, 91%, 26%)`,

     

       842
       842
       +
         negative_900: `hsl(${DEER_RED_HUE}, 91%, 18%)`,

     

       843
       843
       +
         negative_950: `hsl(${DEER_RED_HUE}, 91%, 10%)`,

     

       844
       844
       +
         negative_975: `hsl(${DEER_RED_HUE}, 91%, 7%)`,

     

       845
       845
       +
       }

     

       846
       846
       +
       

     

       847
       847
       +
       export const DEER_SUBDUED_PALETTE: Palette = {

     

       848
       848
       +
         ...DEER_PALETTE,

     

       849
       849
       +
         primary_25: `hsl(140, 15%, 97%)`,

     

       850
       850
       +
         primary_50: `hsl(140, 18%, 95%)`,

     

       851
       851
       +
         primary_100: `hsl(140, 22%, 90%)`,

     

       852
       852
       +
         primary_200: `hsl(140, 25%, 80%)`,

     

       853
       853
       +
         primary_300: `hsl(140, 28%, 70%)`,

     

       854
       854
       +
         primary_400: `hsl(140, 32%, 58%)`,

     

       855
       855
       +
         primary_500: `hsl(140, 35%, 45%)`,

     

       856
       856
       +
         primary_600: `hsl(140, 38%, 38%)`,

     

       857
       857
       +
         primary_700: `hsl(140, 42%, 32%)`,

     

       858
       858
       +
         primary_800: `hsl(140, 45%, 25%)`,

     

       859
       859
       +
         primary_900: `hsl(140, 48%, 18%)`,

     

       860
       860
       +
         primary_950: `hsl(140, 50%, 10%)`,

     

       861
       861
       +
         primary_975: `hsl(140, 55%, 7%)`,

     

       862
       862
       +
         contrast_1000: '#151D28',

     

       863
       863
       +
       }

     

       864
       864
       +
       

     

       865
       865
       +
       const DEER_THEMES = createThemes({

     

       866
       866
       +
         defaultPalette: DEER_PALETTE,

     

       867
       867
       +
         subduedPalette: DEER_SUBDUED_PALETTE,

     

       868
       868
       +
       })

     

       869
       869
       +
       

     

       870
       870
       +
       export const deerscheme = {

     

       871
       871
       +
         lightPalette: DEER_THEMES.light.palette,

     

       872
       872
       +
         darkPalette: DEER_THEMES.dark.palette,

     

       873
       873
       +
         dimPalette: DEER_THEMES.dim.palette,

     

       874
       874
       +
         light: DEER_THEMES.light,

     

       875
       875
       +
         dark: DEER_THEMES.dark,

     

       876
       876
       +
         dim: DEER_THEMES.dim,

     

       877
       877
       +
       }

     

       878
       878
       +
       

     

       879
       879
       +
       export const ZEPPELIN_PALETTE: Palette = {

     

       880
       880
       +
         white: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`,

     

       881
       881
       +
         black: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`,

     

       882
       882
       +
         like: '#ec4899',

     

       883
       883
       +
       

     

       884
       884
       +
         contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`,

     

       885
       885
       +
         contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[13]}%)`,

     

       886
       886
       +
         contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[12]}%)`,

     

       887
       887
       +
         contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[11]}%)`,

     

       888
       888
       +
         contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[10]}%)`,

     

       889
       889
       +
         contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[9]}%)`,

     

       890
       890
       +
         contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[8]}%)`,

     

       891
       891
       +
         contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[7]}%)`,

     

       892
       892
       +
         contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[6]}%)`,

     

       893
       893
       +
         contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[5]}%)`,

     

       894
       894
       +
         contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[4]}%)`,

     

       895
       895
       +
         contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[3]}%)`,

     

       896
       896
       +
         contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[2]}%)`,

     

       897
       897
       +
         contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[1]}%)`,

     

       898
       898
       +
         contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`,

     

       899
       899
       +
       

     

       900
       900
       +
         primary_25: `hsl(47, 80%, 89%)`,

     

       901
       901
       +
         primary_50: `hsl(47, 80%, 87%)`,

     

       902
       902
       +
         primary_100: `hsl(47, 80%, 82%)`,

     

       903
       903
       +
         primary_200: `hsl(47, 72%, 72%)`,

     

       904
       904
       +
         primary_300: `hsl(47, 74%, 62%)`,

     

       905
       905
       +
         primary_400: `hsl(47, 75%, 50%)`,

     

       906
       906
       +
         primary_500: `hsl(47, 75%, 37%)`,

     

       907
       907
       +
         primary_600: `hsl(47, 78%, 30%)`,

     

       908
       908
       +
         primary_700: `hsl(47, 80%, 24%)`,

     

       909
       909
       +
         primary_800: `hsl(47, 82%, 17%)`,

     

       910
       910
       +
         primary_900: `hsl(47, 85%, 12%)`,

     

       911
       911
       +
         primary_950: `hsl(47, 88%, 5%)`,

     

       912
       912
       +
         primary_975: `hsl(47, 90%, 2%)`,

     

       913
       913
       +
       

     

       914
       914
       +
         positive_25: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 97%)`,

     

       915
       915
       +
         positive_50: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 95%)`,

     

       916
       916
       +
         positive_100: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 90%)`,

     

       917
       917
       +
         positive_200: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 80%)`,

     

       918
       918
       +
         positive_300: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 70%)`,

     

       919
       919
       +
         positive_400: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 60%)`,

     

       920
       920
       +
         positive_500: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 50%)`,

     

       921
       921
       +
         positive_600: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 42%)`,

     

       922
       922
       +
         positive_700: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 34%)`,

     

       923
       923
       +
         positive_800: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 26%)`,

     

       924
       924
       +
         positive_900: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 18%)`,

     

       925
       925
       +
         positive_950: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 10%)`,

     

       926
       926
       +
         positive_975: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 7%)`,

     

       927
       927
       +
       

     

       928
       928
       +
         negative_25: `hsl(${ZEPPELIN_RED_HUE}, 91%, 97%)`,

     

       929
       929
       +
         negative_50: `hsl(${ZEPPELIN_RED_HUE}, 91%, 95%)`,

     

       930
       930
       +
         negative_100: `hsl(${ZEPPELIN_RED_HUE}, 91%, 90%)`,

     

       931
       931
       +
         negative_200: `hsl(${ZEPPELIN_RED_HUE}, 91%, 80%)`,

     

       932
       932
       +
         negative_300: `hsl(${ZEPPELIN_RED_HUE}, 91%, 70%)`,

     

       933
       933
       +
         negative_400: `hsl(${ZEPPELIN_RED_HUE}, 91%, 60%)`,

     

       934
       934
       +
         negative_500: `hsl(${ZEPPELIN_RED_HUE}, 91%, 50%)`,

     

       935
       935
       +
         negative_600: `hsl(${ZEPPELIN_RED_HUE}, 91%, 42%)`,

     

       936
       936
       +
         negative_700: `hsl(${ZEPPELIN_RED_HUE}, 91%, 34%)`,

     

       937
       937
       +
         negative_800: `hsl(${ZEPPELIN_RED_HUE}, 91%, 26%)`,

     

       938
       938
       +
         negative_900: `hsl(${ZEPPELIN_RED_HUE}, 91%, 18%)`,

     

       939
       939
       +
         negative_950: `hsl(${ZEPPELIN_RED_HUE}, 91%, 10%)`,

     

       940
       940
       +
         negative_975: `hsl(${ZEPPELIN_RED_HUE}, 91%, 7%)`,

     

       941
       941
       +
       }

     

       942
       942
       +
       

     

       943
       943
       +
       export const ZEPPELIN_SUBDUED_PALETTE: Palette = {

     

       944
       944
       +
         ...ZEPPELIN_PALETTE,

     

       945
       945
       +
         black: `hsl(${ZEPPELIN_BLUE_HUE}, 3%, ${ZEPPELIN_dimScale[0]}%)`,

     

       946
       946
       +
       

     

       947
       947
       +
         contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[14]}%)`,

     

       948
       948
       +
         contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[13]}%)`,

     

       949
       949
       +
         contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[12]}%)`,

     

       950
       950
       +
         contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[11]}%)`,

     

       951
       951
       +
         contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[10]}%)`,

     

       952
       952
       +
         contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[9]}%)`,

     

       953
       953
       +
         contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[8]}%)`,

     

       954
       954
       +
         contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[7]}%)`,

     

       955
       955
       +
         contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[6]}%)`,

     

       956
       956
       +
         contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[5]}%)`,

     

       957
       957
       +
         contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[4]}%)`,

     

       958
       958
       +
         contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[3]}%)`,

     

       959
       959
       +
         contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[2]}%)`,

     

       960
       960
       +
         contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[1]}%)`,

     

       961
       961
       +
         contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[0]}%)`,

     

       962
       962
       +
       

     

       963
       963
       +
         primary_25: `hsl(47, 60%, 97%)`,

     

       964
       964
       +
         primary_50: `hsl(47, 63%, 94%)`,

     

       965
       965
       +
         primary_100: `hsl(47, 65%, 88%)`,

     

       966
       966
       +
         primary_200: `hsl(47, 70%, 78%)`,

     

       967
       967
       +
         primary_300: `hsl(47, 73%, 68%)`,

     

       968
       968
       +
         primary_400: `hsl(47, 77%, 58%)`,

     

       969
       969
       +
         primary_500: `hsl(47, 80%, 45%)`,

     

       970
       970
       +
         primary_600: `hsl(47, 83%, 38%)`,

     

       971
       971
       +
         primary_700: `hsl(47, 87%, 30%)`,

     

       972
       972
       +
         primary_800: `hsl(47, 90%, 25%)`,

     

       973
       973
       +
         primary_900: `hsl(47, 93%, 18%)`,

     

       974
       974
       +
         primary_950: `hsl(47, 95%, 10%)`,

     

       975
       975
       +
         primary_975: `hsl(47, 98%, 7%)`,

     

       976
       976
       +
       }

     

       977
       977
       +
       

     

       978
       978
       +
       const ZEPPELIN_THEMES = createThemes({

     

       979
       979
       +
         defaultPalette: ZEPPELIN_PALETTE,

     

       980
       980
       +
         subduedPalette: ZEPPELIN_SUBDUED_PALETTE,

     

       981
       981
       +
       })

     

       982
       982
       +
       

     

       983
       983
       +
       export const zeppelinscheme = {

     

       984
       984
       +
         lightPalette: ZEPPELIN_THEMES.light.palette,

     

       985
       985
       +
         darkPalette: ZEPPELIN_THEMES.dark.palette,

     

       986
       986
       +
         dimPalette: ZEPPELIN_THEMES.dim.palette,

     

       987
       987
       +
         light: ZEPPELIN_THEMES.light,

     

       988
       988
       +
         dark: ZEPPELIN_THEMES.dark,

     

       989
       989
       +
         dim: ZEPPELIN_THEMES.dim,

     

       990
       990
       +
       }

     

       991
       991
       +
       

     

       280
       992
        
       /**

     

       281
       993
        
        * @deprecated use ALF and access palette from `useTheme()`

     

       282
       994
        
        */

+49

src/alf/util/blackskyColorGeneration.ts

···

       1
       1
       +
       import {logger} from '#/logger'

     

       2
       2
       +
       

     

       3
       3
       +
       export const BLUE_HUE = 240

     

       4
       4
       +
       export const RED_HUE = 0

     

       5
       5
       +
       export const GREEN_HUE = 80

     

       6
       6
       +
       

     

       7
       7
       +
       /**

     

       8
       8
       +
        * Smooth progression of lightness "stops" for generating HSL colors.

     

       9
       9
       +
        */

     

       10
       10
       +
       export const COLOR_STOPS = [

     

       11
       11
       +
         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,

     

       12
       12
       +
       ]

     

       13
       13
       +
       

     

       14
       14
       +
       export function generateScale(start: number, end: number) {

     

       15
       15
       +
         const range = end - start

     

       16
       16
       +
         return COLOR_STOPS.map(stop => {

     

       17
       17
       +
           return start + range * stop

     

       18
       18
       +
         })

     

       19
       19
       +
       }

     

       20
       20
       +
       

     

       21
       21
       +
       export const defaultScale = generateScale(6, 100)

     

       22
       22
       +
       // dim shifted 6% lighter

     

       23
       23
       +
       export const dimScale = generateScale(12, 100)

     

       24
       24
       +
       

     

       25
       25
       +
       export function transparentifyColor(color: string, alpha: number) {

     

       26
       26
       +
         if (color.startsWith('hsl(')) {

     

       27
       27
       +
           return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`

     

       28
       28
       +
         } else if (color.startsWith('rgb(')) {

     

       29
       29
       +
           return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`

     

       30
       30
       +
         } else if (color.startsWith('#')) {

     

       31
       31
       +
           if (color.length === 7) {

     

       32
       32
       +
             const alphaHex = Math.round(alpha * 255).toString(16)

     

       33
       33
       +
             // Per MDN: If there is only one number, it is duplicated: e means ee

     

       34
       34
       +
             // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

     

       35
       35
       +
             return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)

     

       36
       36
       +
           } else if (color.length === 4) {

     

       37
       37
       +
             // convert to 6-digit hex before adding alpha

     

       38
       38
       +
             const [r, g, b] = color.slice(1).split('')

     

       39
       39
       +
             const alphaHex = Math.round(alpha * 255).toString(16)

     

       40
       40
       +
             return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(

     

       41
       41
       +
               2,

     

       42
       42
       +
               alphaHex,

     

       43
       43
       +
             )}`

     

       44
       44
       +
           }

     

       45
       45
       +
         } else {

     

       46
       46
       +
           logger.warn(`Could not make '${color}' transparent`)

     

       47
       47
       +
         }

     

       48
       48
       +
         return color

     

       49
       49
       +
       }

+21

src/alf/util/deerColorGeneration.ts

···

       1
       1
       +
       export const BLUE_HUE = 211

     

       2
       2
       +
       export const RED_HUE = 346

     

       3
       3
       +
       export const GREEN_HUE = 152

     

       4
       4
       +
       

     

       5
       5
       +
       /**

     

       6
       6
       +
        * Smooth progression of lightness "stops" for generating HSL colors.

     

       7
       7
       +
        */

     

       8
       8
       +
       export const COLOR_STOPS = [

     

       9
       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
       10
       +
       ]

     

       11
       11
       +
       

     

       12
       12
       +
       export function generateScale(start: number, end: number) {

     

       13
       13
       +
         const range = end - start

     

       14
       14
       +
         return COLOR_STOPS.map(stop => {

     

       15
       15
       +
           return start + range * stop

     

       16
       16
       +
         })

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       export const defaultScale = generateScale(6, 100)

     

       20
       20
       +
       // dim shifted 6% lighter

     

       21
       21
       +
       export const dimScale = generateScale(12, 100)

+49

src/alf/util/zeppelinColorGeneration.ts

···

       1
       1
       +
       import {logger} from '#/logger'

     

       2
       2
       +
       

     

       3
       3
       +
       export const BLUE_HUE = 47

     

       4
       4
       +
       export const RED_HUE = 346

     

       5
       5
       +
       export const GREEN_HUE = 152

     

       6
       6
       +
       

     

       7
       7
       +
       /**

     

       8
       8
       +
        * Smooth progression of lightness "stops" for generating HSL colors.

     

       9
       9
       +
        */

     

       10
       10
       +
       export const COLOR_STOPS = [

     

       11
       11
       +
         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,

     

       12
       12
       +
       ]

     

       13
       13
       +
       

     

       14
       14
       +
       export function generateScale(start: number, end: number) {

     

       15
       15
       +
         const range = end - start

     

       16
       16
       +
         return COLOR_STOPS.map(stop => {

     

       17
       17
       +
           return start + range * stop

     

       18
       18
       +
         })

     

       19
       19
       +
       }

     

       20
       20
       +
       

     

       21
       21
       +
       export const defaultScale = generateScale(6, 100)

     

       22
       22
       +
       // dim shifted 6% lighter

     

       23
       23
       +
       export const dimScale = generateScale(11, 100)

     

       24
       24
       +
       

     

       25
       25
       +
       export function transparentifyColor(color: string, alpha: number) {

     

       26
       26
       +
         if (color.startsWith('hsl(')) {

     

       27
       27
       +
           return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`

     

       28
       28
       +
         } else if (color.startsWith('rgb(')) {

     

       29
       29
       +
           return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`

     

       30
       30
       +
         } else if (color.startsWith('#')) {

     

       31
       31
       +
           if (color.length === 7) {

     

       32
       32
       +
             const alphaHex = Math.round(alpha * 255).toString(16)

     

       33
       33
       +
             // Per MDN: If there is only one number, it is duplicated: e means ee

     

       34
       34
       +
             // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

     

       35
       35
       +
             return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)

     

       36
       36
       +
           } else if (color.length === 4) {

     

       37
       37
       +
             // convert to 6-digit hex before adding alpha

     

       38
       38
       +
             const [r, g, b] = color.slice(1).split('')

     

       39
       39
       +
             const alphaHex = Math.round(alpha * 255).toString(16)

     

       40
       40
       +
             return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(

     

       41
       41
       +
               2,

     

       42
       42
       +
               alphaHex,

     

       43
       43
       +
             )}`

     

       44
       44
       +
           }

     

       45
       45
       +
         } else {

     

       46
       46
       +
           logger.warn(`Could not make '${color}' transparent`)

     

       47
       47
       +
         }

     

       48
       48
       +
         return color

     

       49
       49
       +
       }

+28 -9

src/lib/ThemeContext.tsx

···

       1
       1
       -
       import {type ReactNode} from 'react'

     

       1
       1
       +
       import {type ReactNode, useMemo} from 'react'

     

       2
       2
        
       import {createContext, useContext} from 'react'

     

       3
       3
        
       import {type TextStyle, type ViewStyle} from 'react-native'

     

       4
       4
        
       import {type ThemeName} from '@bsky.app/alf'

     

       5
       5
        
       

     

       6
       6
       +
       import {useThemePrefs} from '#/state/shell/color-mode'

     

       7
       7
       +
       import {type SchemeType, selectScheme} from '#/alf'

     

       8
       8
       +
       import {themes} from '#/alf/themes'

     

       6
       9
        
       import {darkTheme, defaultTheme, dimTheme} from './themes'

     

       7
       10
        
       

     

       8
       11
        
       export type ColorScheme = 'light' | 'dark'

     
···

       88
       91
        
         theme: ThemeName

     

       89
       92
        
       }

     

       90
       93
        
       

     

       91
       91
       -
       export const ThemeContext = createContext<Theme>(defaultTheme)

     

       94
       94
       +
       export const ThemeContext = createContext<Theme>(

     

       95
       95
       +
         defaultTheme({

     

       96
       96
       +
           lightPalette: themes.lightPalette,

     

       97
       97
       +
           darkPalette: themes.darkPalette,

     

       98
       98
       +
         }),

     

       99
       99
       +
       )

     

       92
       100
        
       ThemeContext.displayName = 'ThemeContext'

     

       93
       101
        
       

     

       94
       102
        
       export const useTheme = () => useContext(ThemeContext)

     

       95
       103
        
       

     

       96
       96
       -
       function getTheme(theme: ThemeName) {

     

       97
       97
       -
         switch (theme) {

     

       104
       104
       +
       function getTheme(themeName: ThemeName, scheme: SchemeType) {

     

       105
       105
       +
         const paletteOptions = {

     

       106
       106
       +
           lightPalette: scheme.lightPalette,

     

       107
       107
       +
           darkPalette: scheme.darkPalette,

     

       108
       108
       +
           dimPalette: scheme.dimPalette,

     

       109
       109
       +
         }

     

       110
       110
       +
       

     

       111
       111
       +
         switch (themeName) {

     

       98
       112
        
           case 'light':

     

       99
       99
       -
             return defaultTheme

     

       113
       113
       +
             return defaultTheme(paletteOptions)

     

       100
       114
        
           case 'dim':

     

       101
       101
       -
             return dimTheme

     

       115
       115
       +
             return dimTheme(paletteOptions)

     

       102
       116
        
           case 'dark':

     

       103
       103
       -
             return darkTheme

     

       117
       117
       +
             return darkTheme(paletteOptions)

     

       104
       118
        
           default:

     

       105
       105
       -
             return defaultTheme

     

       119
       119
       +
             return defaultTheme(paletteOptions)

     

       106
       120
        
         }

     

       107
       121
        
       }

     

       108
       122
        
       

     
···

       110
       124
        
         theme,

     

       111
       125
        
         children,

     

       112
       126
        
       }) => {

     

       113
       113
       -
         const themeValue = getTheme(theme)

     

       127
       127
       +
         const {colorScheme} = useThemePrefs()

     

       128
       128
       +
       

     

       129
       129
       +
         const themeValue = useMemo(() => {

     

       130
       130
       +
           const currentScheme = selectScheme(colorScheme)

     

       131
       131
       +
           return getTheme(theme, currentScheme)

     

       132
       132
       +
         }, [theme, colorScheme])

     

       114
       133
        
       

     

       115
       134
        
         return (

     

       116
       135
        
           <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>

+34 -14

src/lib/themes.ts

···

       1
       1
        
       import {Platform} from 'react-native'

     

       2
       2
        
       

     

       3
       3
        
       import {tokens} from '#/alf'

     

       4
       4
       -
       import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'

     

       4
       4
       +
       import {type Palette} from '#/alf/themes'

     

       5
       5
        
       import {fontWeight} from '#/alf/tokens'

     

       6
       6
        
       import {colors} from './styles'

     

       7
       7
        
       import {type Theme} from './ThemeContext'

     

       8
       8
        
       

     

       9
       9
       -
       export const defaultTheme: Theme = {

     

       9
       9
       +
       export const defaultTheme = ({

     

       10
       10
       +
         lightPalette,

     

       11
       11
       +
         darkPalette,

     

       12
       12
       +
       }: {

     

       13
       13
       +
         lightPalette: Palette

     

       14
       14
       +
         darkPalette: Palette

     

       15
       15
       +
       }): Theme => ({

     

       10
       16
        
         colorScheme: 'light',

     

       11
       17
        
         palette: {

     

       12
       18
        
           default: {

     
···

       288
       294
        
             fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',

     

       289
       295
        
           },

     

       290
       296
        
         },

     

       291
       291
       -
       }

     

       297
       297
       +
       })

     

       292
       298
        
       

     

       293
       293
       -
       export const darkTheme: Theme = {

     

       294
       294
       -
         ...defaultTheme,

     

       299
       299
       +
       export const darkTheme = ({

     

       300
       300
       +
         lightPalette,

     

       301
       301
       +
         darkPalette,

     

       302
       302
       +
       }: {

     

       303
       303
       +
         lightPalette: Palette

     

       304
       304
       +
         darkPalette: Palette

     

       305
       305
       +
       }): Theme => ({

     

       306
       306
       +
         ...defaultTheme({lightPalette, darkPalette}),

     

       295
       307
        
         colorScheme: 'dark',

     

       296
       308
        
         palette: {

     

       297
       297
       -
           ...defaultTheme.palette,

     

       309
       309
       +
           ...defaultTheme({lightPalette, darkPalette}).palette,

     

       298
       310
        
           default: {

     

       299
       311
        
             background: darkPalette.contrast_0,

     

       300
       312
        
             backgroundLight: darkPalette.contrast_25,

     
···

       318
       330
        
             borderLinkHover: darkPalette.contrast_300,

     

       319
       331
        
           },

     

       320
       332
        
           primary: {

     

       321
       321
       -
             ...defaultTheme.palette.primary,

     

       333
       333
       +
             ...defaultTheme({lightPalette, darkPalette}).palette.primary,

     

       322
       334
        
             textInverted: colors.blue2,

     

       323
       335
        
           },

     

       324
       336
        
           secondary: {

     

       325
       325
       -
             ...defaultTheme.palette.secondary,

     

       337
       337
       +
             ...defaultTheme({lightPalette, darkPalette}).palette.secondary,

     

       326
       338
        
             textInverted: colors.green2,

     

       327
       339
        
           },

     

       328
       340
        
           inverted: {

     
···

       337
       349
        
             icon: lightPalette.contrast_500,

     

       338
       350
        
           },

     

       339
       351
        
         },

     

       340
       340
       -
       }

     

       352
       352
       +
       })

     

       341
       353
        
       

     

       342
       342
       -
       export const dimTheme: Theme = {

     

       343
       343
       -
         ...darkTheme,

     

       354
       354
       +
       export const dimTheme = ({

     

       355
       355
       +
         lightPalette,

     

       356
       356
       +
         darkPalette,

     

       357
       357
       +
         dimPalette,

     

       358
       358
       +
       }: {

     

       359
       359
       +
         lightPalette: Palette

     

       360
       360
       +
         darkPalette: Palette

     

       361
       361
       +
         dimPalette: Palette

     

       362
       362
       +
       }): Theme => ({

     

       363
       363
       +
         ...darkTheme({lightPalette, darkPalette}),

     

       344
       364
        
         palette: {

     

       345
       345
       -
           ...darkTheme.palette,

     

       365
       365
       +
           ...darkTheme({lightPalette, darkPalette}).palette,

     

       346
       366
        
           default: {

     

       347
       347
       -
             ...darkTheme.palette.default,

     

       367
       367
       +
             ...darkTheme({lightPalette, darkPalette}).palette.default,

     

       348
       368
        
             background: dimPalette.contrast_0,

     

       349
       369
        
             backgroundLight: dimPalette.contrast_25,

     

       350
       370
        
             text: dimPalette.white,

     
···

       367
       387
        
             borderLinkHover: dimPalette.contrast_300,

     

       368
       388
        
           },

     

       369
       389
        
         },

     

       370
       370
       -
       }

     

       390
       390
       +
       })

+39 -2

src/screens/Settings/AppearanceSettings.tsx

···

       20
       20
        
       import {type Props as SVGIconProps} from '#/components/icons/common'

     

       21
       21
        
       import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'

     

       22
       22
        
       import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'

     

       23
       23
       +
       import {Pizza_Stroke2_Corner0_Rounded as PizzaIcon} from '#/components/icons/Pizza'

     

       23
       24
        
       import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize'

     

       24
       25
        
       import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase'

     

       25
       26
        
       import * as Layout from '#/components/Layout'

     
···

       32
       33
        
         const {_} = useLingui()

     

       33
       34
        
         const {fonts} = useAlf()

     

       34
       35
        
       

     

       35
       35
       -
         const {colorMode, darkTheme} = useThemePrefs()

     

       36
       36
       -
         const {setColorMode, setDarkTheme} = useSetThemePrefs()

     

       36
       36
       +
         const {colorMode, colorScheme, darkTheme} = useThemePrefs()

     

       37
       37
       +
         const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs()

     

       37
       38
        
       

     

       38
       39
        
         const onChangeAppearance = useCallback(

     

       39
       40
        
           (value: 'light' | 'system' | 'dark') => {

     
···

       42
       43
        
           [setColorMode],

     

       43
       44
        
         )

     

       44
       45
        
       

     

       46
       46
       +
         const onChangeScheme = useCallback(

     

       47
       47
       +
           (value: 'witchsky' | 'bluesky' | 'blacksky' | 'deer' | 'zeppelin') => {

     

       48
       48
       +
             setColorScheme(value)

     

       49
       49
       +
           },

     

       50
       50
       +
           [setColorScheme],

     

       51
       51
       +
         )

     

       52
       52
       +
       

     

       45
       53
        
         const onChangeDarkTheme = useCallback(

     

       46
       54
        
           (value: 'dim' | 'dark') => {

     

       47
       55
        
             setDarkTheme(value)

     
···

       98
       106
        
                     onChange={onChangeAppearance}

     

       99
       107
        
                   />

     

       100
       108
        
       

     

       109
       109
       +
                   <AppearanceToggleButtonGroup

     

       110
       110
       +
                     title={_(msg`Color scheme`)}

     

       111
       111
       +
                     icon={PizzaIcon}

     

       112
       112
       +
                     items={[

     

       113
       113
       +
                       {

     

       114
       114
       +
                         label: _(msg`Witchsky`),

     

       115
       115
       +
                         name: 'witchsky',

     

       116
       116
       +
                       },

     

       117
       117
       +
                       {

     

       118
       118
       +
                         label: _(msg`Bluesky`),

     

       119
       119
       +
                         name: 'bluesky',

     

       120
       120
       +
                       },

     

       121
       121
       +
                       {

     

       122
       122
       +
                         label: _(msg`Blacksky`),

     

       123
       123
       +
                         name: 'blacksky',

     

       124
       124
       +
                       },

     

       125
       125
       +
                       {

     

       126
       126
       +
                         label: _(msg`Deer`),

     

       127
       127
       +
                         name: 'deer',

     

       128
       128
       +
                       },

     

       129
       129
       +
                       {

     

       130
       130
       +
                         label: _(msg`Zeppelin`),

     

       131
       131
       +
                         name: 'zeppelin',

     

       132
       132
       +
                       },

     

       133
       133
       +
                     ]}

     

       134
       134
       +
                     value={colorScheme}

     

       135
       135
       +
                     onChange={onChangeScheme}

     

       136
       136
       +
                   />

     

       137
       137
       +
       

     

       101
       138
        
                   {colorMode !== 'light' && (

     

       102
       139
        
                     <Animated.View

     

       103
       140
        
                       entering={native(FadeInUp)}

src/state/persisted/schema.ts

···

       49
       49
        
       const schema = z.object({

     

       50
       50
        
         colorMode: z.enum(['system', 'light', 'dark']),

     

       51
       51
        
         darkTheme: z.enum(['dim', 'dark']).optional(),

     

       52
       52
       +
         colorScheme: z.enum(['witchsky', 'bluesky', 'blacksky', 'deer', 'zeppelin']),

     

       52
       53
        
         session: z.object({

     

       53
       54
        
           accounts: z.array(accountSchema),

     

       54
       55
        
           currentAccount: currentAccountSchema.optional(),

     
···

       164
       165
        
       export const defaults: Schema = {

     

       165
       166
        
         colorMode: 'system',

     

       166
       167
        
         darkTheme: 'dim',

     

       168
       168
       +
         colorScheme: 'witchsky',

     

       167
       169
        
         session: {

     

       168
       170
        
           accounts: [],

     

       169
       171
        
           currentAccount: undefined,

+16 -1

src/state/shell/color-mode.tsx

···

       5
       5
        
       type StateContext = {

     

       6
       6
        
         colorMode: persisted.Schema['colorMode']

     

       7
       7
        
         darkTheme: persisted.Schema['darkTheme']

     

       8
       8
       +
         colorScheme: persisted.Schema['colorScheme']

     

       8
       9
        
       }

     

       9
       10
        
       type SetContext = {

     

       10
       11
        
         setColorMode: (v: persisted.Schema['colorMode']) => void

     

       11
       12
        
         setDarkTheme: (v: persisted.Schema['darkTheme']) => void

     

       13
       13
       +
         setColorScheme: (v: persisted.Schema['colorScheme']) => void

     

       12
       14
        
       }

     

       13
       15
        
       

     

       14
       16
        
       const stateContext = React.createContext<StateContext>({

     

       15
       17
        
         colorMode: 'system',

     

       16
       18
        
         darkTheme: 'dark',

     

       19
       19
       +
         colorScheme: 'witchsky',

     

       17
       20
        
       })

     

       18
       21
        
       stateContext.displayName = 'ColorModeStateContext'

     

       19
       22
        
       const setContext = React.createContext<SetContext>({} as SetContext)

     
···

       22
       25
        
       export function Provider({children}: React.PropsWithChildren<{}>) {

     

       23
       26
        
         const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))

     

       24
       27
        
         const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))

     

       28
       28
       +
         const [colorScheme, setColorScheme] = React.useState(

     

       29
       29
       +
           persisted.get('colorScheme'),

     

       30
       30
       +
         )

     

       25
       31
        
       

     

       26
       32
        
         const stateContextValue = React.useMemo(

     

       27
       33
        
           () => ({

     

       28
       34
        
             colorMode,

     

       29
       35
        
             darkTheme,

     

       36
       36
       +
             colorScheme,

     

       30
       37
        
           }),

     

       31
       31
       -
           [colorMode, darkTheme],

     

       38
       38
       +
           [colorMode, darkTheme, colorScheme],

     

       32
       39
        
         )

     

       33
       40
        
       

     

       34
       41
        
         const setContextValue = React.useMemo(

     
···

       41
       48
        
               setDarkTheme(_darkTheme)

     

       42
       49
        
               persisted.write('darkTheme', _darkTheme)

     

       43
       50
        
             },

     

       51
       51
       +
             setColorScheme: (_colorScheme: persisted.Schema['colorScheme']) => {

     

       52
       52
       +
               setColorScheme(_colorScheme)

     

       53
       53
       +
               persisted.write('colorScheme', _colorScheme)

     

       54
       54
       +
             },

     

       44
       55
        
           }),

     

       45
       56
        
           [],

     

       46
       57
        
         )

     
···

       52
       63
        
           const unsub2 = persisted.onUpdate('colorMode', nextColorMode => {

     

       53
       64
        
             setColorMode(nextColorMode)

     

       54
       65
        
           })

     

       66
       66
       +
           const unsub3 = persisted.onUpdate('colorScheme', nextColorScheme => {

     

       67
       67
       +
             setColorScheme(nextColorScheme)

     

       68
       68
       +
           })

     

       55
       69
        
           return () => {

     

       56
       70
        
             unsub1()

     

       57
       71
        
             unsub2()

     

       72
       72
       +
             unsub3()

     

       58
       73
        
           }

     

       59
       74
        
         }, [])

     

       60
       75

+4 -3

src/view/com/util/UserAvatar.tsx

···

       104
       104
        
         size: number

     

       105
       105
        
       }): React.ReactNode => {

     

       106
       106
        
         const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')

     

       107
       107
       +
         const t = useTheme()

     

       107
       108
        
       

     

       108
       109
        
         const aviStyle = useMemo(() => {

     

       109
       110
        
           if (finalShape === 'square') {

     
···

       123
       124
        
               fill="none"

     

       124
       125
        
               stroke="none"

     

       125
       126
        
               style={aviStyle}>

     

       126
       126
       -
               <Rect width="32" height="32" rx="4" fill="#ED5345" />

     

       127
       127
       +
               <Rect width="32" height="32" rx="4" fill={t.palette.primary_500} />

     

       127
       128
        
               <Path

     

       128
       129
        
                 d="M13.5 7.25C13.5 6.55859 14.0586 6 14.75 6C20.9648 6 26 11.0352 26 17.25C26 17.9414 25.4414 18.5 24.75 18.5C24.0586 18.5 23.5 17.9414 23.5 17.25C23.5 12.418 19.582 8.5 14.75 8.5C14.0586 8.5 13.5 7.94141 13.5 7.25ZM8.36719 14.6172L12.4336 18.6836L13.543 17.5742C13.5156 17.4727 13.5 17.3633 13.5 17.25C13.5 16.5586 14.0586 16 14.75 16C15.4414 16 16 16.5586 16 17.25C16 17.9414 15.4414 18.5 14.75 18.5C14.6367 18.5 14.5312 18.4844 14.4258 18.457L13.3164 19.5664L17.3828 23.6328C17.9492 24.1992 17.8438 25.1484 17.0977 25.4414C16.1758 25.8008 15.1758 26 14.125 26C9.63672 26 6 22.3633 6 17.875C6 16.8242 6.19922 15.8242 6.5625 14.9023C6.85547 14.1602 7.80469 14.0508 8.37109 14.6172H8.36719ZM14.75 9.75C18.8906 9.75 22.25 13.1094 22.25 17.25C22.25 17.9414 21.6914 18.5 21 18.5C20.3086 18.5 19.75 17.9414 19.75 17.25C19.75 14.4883 17.5117 12.25 14.75 12.25C14.0586 12.25 13.5 11.6914 13.5 11C13.5 10.3086 14.0586 9.75 14.75 9.75Z"

     

       129
       130
        
                 fill="white"

     
···

       145
       146
        
               style={aviStyle}>

     

       146
       147
        
               <Path

     

       147
       148
        
                 d="M28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0Z"

     

       148
       148
       -
                 fill="#ED5345"

     

       149
       149
       +
                 fill={t.palette.primary_500}

     

       149
       150
        
               />

     

       150
       151
        
               <Path

     

       151
       152
        
                 d="M22.1529 22.3542C23.4522 22.4603 24.7593 22.293 25.9899 21.8629C26.0369 21.2838 25.919 20.7032 25.6497 20.1884C25.3805 19.6735 24.9711 19.2454 24.4687 18.9535C23.9663 18.6617 23.3916 18.518 22.8109 18.5392C22.2303 18.5603 21.6676 18.7454 21.1878 19.0731M22.1529 22.3542C22.1489 21.1917 21.8142 20.0534 21.1878 19.0741ZM10.8111 19.0741C10.3313 18.7468 9.7687 18.5619 9.18826 18.5409C8.60781 18.5199 8.03327 18.6636 7.53107 18.9554C7.02888 19.2472 6.61953 19.6752 6.35036 20.1899C6.08119 20.7046 5.96319 21.285 6.01001 21.8639C7.23969 22.2964 8.5461 22.4632 9.84497 22.3531M10.8111 19.0741C10.1851 20.0535 9.84865 21.1908 9.84497 22.3531ZM19.0759 10.077C19.0759 10.8931 18.7518 11.6757 18.1747 12.2527C17.5977 12.8298 16.815 13.154 15.9989 13.154C15.1829 13.154 14.4002 12.8298 13.8232 12.2527C13.2461 11.6757 12.922 10.8931 12.922 10.077C12.922 9.26092 13.2461 8.47828 13.8232 7.90123C14.4002 7.32418 15.1829 7 15.9989 7C16.815 7 17.5977 7.32418 18.1747 7.90123C18.7518 8.47828 19.0759 9.26092 19.0759 10.077ZM25.2299 13.154C25.2299 13.457 25.1702 13.7571 25.0542 14.0371C24.9383 14.3171 24.7683 14.5715 24.554 14.7858C24.3397 15.0001 24.0853 15.1701 23.8053 15.2861C23.5253 15.402 23.2252 15.4617 22.9222 15.4617C22.6191 15.4617 22.319 15.402 22.039 15.2861C21.759 15.1701 21.5046 15.0001 21.2903 14.7858C21.0761 14.5715 20.9061 14.3171 20.7901 14.0371C20.6741 13.7571 20.6144 13.457 20.6144 13.154C20.6144 12.5419 20.8576 11.9549 21.2903 11.5222C21.7231 11.0894 22.3101 10.8462 22.9222 10.8462C23.5342 10.8462 24.1212 11.0894 24.554 11.5222C24.9868 11.9549 25.2299 12.5419 25.2299 13.154ZM11.3835 13.154C11.3835 13.457 11.3238 13.7571 11.2078 14.0371C11.0918 14.3171 10.9218 14.5715 10.7075 14.7858C10.4932 15.0001 10.2388 15.1701 9.95886 15.2861C9.67887 15.402 9.37878 15.4617 9.07572 15.4617C8.77266 15.4617 8.47257 15.402 8.19259 15.2861C7.9126 15.1701 7.6582 15.0001 7.4439 14.7858C7.22961 14.5715 7.05962 14.3171 6.94365 14.0371C6.82767 13.7571 6.76798 13.457 6.76798 13.154C6.76798 12.5419 7.01112 11.9549 7.4439 11.5222C7.87669 11.0894 8.46367 10.8462 9.07572 10.8462C9.68777 10.8462 10.2748 11.0894 10.7075 11.5222C11.1403 11.9549 11.3835 12.5419 11.3835 13.154Z"

     
···

       200
       201
        
             fill="none"

     

       201
       202
        
             stroke="none"

     

       202
       203
        
             style={aviStyle}>

     

       203
       203
       -
             <Circle cx="12" cy="12" r="12" fill="#ED5345" />

     

       204
       204
       +
             <Circle cx="12" cy="12" r="12" fill={t.palette.primary_500} />

     

       204
       205
        
             <Circle cx="12" cy="9.5" r="3.5" fill="#fff" />

     

       205
       206
        
             <Path

     

       206
       207
        
               strokeLinecap="round"

+10 -2

src/view/icons/Logo.tsx

···

       59
       59
        
             {gradient && (

     

       60
       60
        
               <Defs>

     

       61
       61
        
                 <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1">

     

       62
       62
       -
                   <Stop offset="0" stopColor="#ED5345" stopOpacity="1" />

     

       63
       63
       -
                   <Stop offset="1" stopColor="#E25C50" stopOpacity="1" />

     

       62
       62
       +
                   <Stop

     

       63
       63
       +
                     offset="0"

     

       64
       64
       +
                     stopColor={t.palette.primary_500}

     

       65
       65
       +
                     stopOpacity="1"

     

       66
       66
       +
                   />

     

       67
       67
       +
                   <Stop

     

       68
       68
       +
                     offset="1"

     

       69
       69
       +
                     stopColor={t.palette.primary_500}

     

       70
       70
       +
                     stopOpacity="1"

     

       71
       71
       +
                   />

     

       64
       72
        
                 </LinearGradient>

     

       65
       73
        
               </Defs>

     

       66
       74
        
             )}

+33

src/view/shell/index.web.tsx

···

       46
       46
        
         const {state: policyUpdateState} = usePolicyUpdateContext()

     

       47
       47
        
         const welcomeModalControl = useWelcomeModal()

     

       48
       48
        
       

     

       49
       49
       +
         useLayoutEffect(() => {

     

       50
       50
       +
           const rootElement = document.documentElement

     

       51
       51
       +
           rootElement.className = `html`

     

       52
       52
       +
           rootElement.style.setProperty(

     

       53
       53
       +
             'background',

     

       54
       54
       +
             `${t.atoms.bg.backgroundColor}`,

     

       55
       55
       +
             'important',

     

       56
       56
       +
           )

     

       57
       57
       +
         }, [t.atoms.bg.backgroundColor, t.name])

     

       58
       58
       +
       

     

       59
       59
       +
         useLayoutEffect(() => {

     

       60
       60
       +
           const color = t.palette.primary_500

     

       61
       61
       +
       

     

       62
       62
       +
           const styleId = 'prosemirror-mention-color'

     

       63
       63
       +
           let style = document.getElementById(styleId) as HTMLStyleElement | null

     

       64
       64
       +
       

     

       65
       65
       +
           if (!style) {

     

       66
       66
       +
             style = document.createElement('style')

     

       67
       67
       +
             style.id = styleId

     

       68
       68
       +
             document.head.appendChild(style)

     

       69
       69
       +
           }

     

       70
       70
       +
       

     

       71
       71
       +
           style.innerHTML = `

     

       72
       72
       +
             .ProseMirror .mention {

     

       73
       73
       +
               color: ${color} !important;

     

       74
       74
       +
             }

     

       75
       75
       +
             .ProseMirror a,

     

       76
       76
       +
             .ProseMirror .autolink {

     

       77
       77
       +
               color: ${color} !important;

     

       78
       78
       +
             }

     

       79
       79
       +
           `

     

       80
       80
       +
         }, [t.palette.primary_500])

     

       81
       81
       +
       

     

       49
       82
        
         useLayoutEffect(() => {

     

       50
       83
        
           if (showDrawer !== showDrawerDelayedExit) {

     

       51
       84
        
             if (showDrawer) {