Theme · Modules

T

1 module · 6 exports · 0 repositories · 0 e2e tests · 1 route

OverviewModules

Who imports who · hover a node

ThemePalette

app/features/theme/core/ThemePalette.ts

No overview comment at the top of the file.

Imports

no other modules

Used by

2 actions1 route2 components

Types

type

ThemeInput

no JSDoc:11

export type ThemeInput = v.InferOutput<typeof themeInputSchema>;

Routes/t/:customUrl/edit

Componentsapp/components/CustomThemeSelector.tsxsettings/ThemeTab.tsx

Functions & values

const

DEFAULT_THEME_INPUT

no JSDoc:13

export const DEFAULT_THEME_INPUT: ThemeInput = {
	baseHue: 268,
	baseChroma: 0.05,
	accentHue: 253,
	accentChroma: 0.24,
	bgLightness: THEME_INPUT_LIMITS.BG_LIGHTNESS_DEFAULT,
	chatHue: null,
	radiusBox: 3,
	radiusField: 2,
	radiusSelector: 2,
	borderWidth: 2,
	sizeField: 1,

Componentsapp/components/CustomThemeSelector.tsx

function

build

:129

Expands the supporter's slider values into the CSS variables of a custom theme. Every text color is solved to have at least WCAG AA contrast against the surfaces it's shown on.

export function build(input: ThemeInput): CustomTheme

Unit tests (10)

• reproduces the defaults of vars.css for the default input
• vars.css resolves every color to the same value as resolveColors
• every
  • text color has at least WCAG AA contrast for any input
  • color is inside the sRGB gamut for any input
• gives
  • a yellow accent a bright light mode fill with dark text on it
  • the default theme's amber secondary a bright light mode fill with dark text on it
• keeps
  • the default accent's light mode fill as its text color with white text on it
  • a yellow accent's blue secondary fill as its text color with white text on it
• raises a yellow dark mode accent to where yellow is at its most vivid
• rotates dark shades of yellow toward amber

Actions/settings/t/:customUrl/edit

Componentsapp/components/CustomThemeSelector.tsx

function

toThemeInput

:233

Recovers the slider values a stored custom theme was built from.

export function toThemeInput(theme: CustomTheme): ThemeInput

Unit tests (1)

• recovers the input of a $why theme× 3

Componentsapp/components/CustomThemeSelector.tsx

function

toShareCode

:256

Serializes the slider values into a share code other users can paste into their theme selector.

export function toShareCode(input: ThemeInput): string

Componentsapp/components/CustomThemeSelector.tsx

function

fromShareCode

:264

Parses a share code made by toShareCode() (also older ones without the later added keys), returns null if it is not a valid theme.

export function fromShareCode(code: string): ThemeInput | null

Unit tests (3)

• round-trips a $why theme through toShareCode× 2
• decodes a legacy code without background lightness
• returns null for $why× 3

Componentsapp/components/CustomThemeSelector.tsx

Not shown, only used by tests: resolveColors, textContrastPairs