Repository navigation
v0.24.0: chore: changesets for preference-or-theme
@kanzo-tech/ui
Appearance starts at the OS. While a person has not picked a side, KanzoThemeProvider and
themeScript() wear the side prefers-color-scheme reports. Once they pick, their pick is stored and
wins. A tenant's policy.theme.appearance.default still outranks the OS, and pinned still outranks
everything. The OS is never stored, so someone who never picks follows their OS. Nothing to change,
unless you relied on light as the starting side for everyone: then set
policy={{ theme: { appearance: { default: "light" } } }} on both the provider and themeScript.
@kanzo-tech/theme, @kanzo-tech/ui
Density is always the person's, and it follows the browser's font size.
- A tenant's
policy.theme.densitymay setdefault, butpinnedandhiddenare now ignored: the
density control always draws and a stored choice always applies. BothKanzoThemeProviderand
themeScript()behave this way. The declaration carries it aspersonal: true, a new optional
field on any preference declaration with the same meaning for a contributed section. - The density steps are
87.5%,100%and112.5%of the browser's font size, which used to be
14px,16pxand18px. A person who enlarged their browser keeps the enlargement at every step,
and nothing changes at the browser's default of 16px.themeData.densitiesholds the percentages.
What to do: remove any pinned or hidden you set on density. If you read themeData.densities as
pixels, multiply the percentage by the browser's size (16px by default).
@kanzo-tech/ui
PreferencesSections is the one way to mount a preference control. It now draws the core's
preferences as well as each installed package's section: first the theme cards (a light card and a
dark card), then density, then what packages contribute. PreferencesPanel with no children draws
exactly that.
Removed: ThemePicker, ThemePickerProps, ThemePickerCopy and PreferencesDensity.
What to do:
<ThemePicker />becomes<PreferencesSections namespace="theme" only={["appearance"]} />.
"appearance"and"themeByAppearance"both name the theme cards.<PreferencesDensity />becomes<PreferencesSections namespace="theme" only={["density"]} />.- A settings page that listed the sections one by one becomes
<PreferencesSections />. ThemePicker'scopymoves tocopyonPreferences,PreferencesPanelor
PreferencesSections. The type isPreferencesCopy, which addstheme(the heading over the
cards,"Theme"by default).PreferencesPanelPropsis now exported.
@kanzo-tech/theme, @kanzo-tech/ui
Corner radius and typography are no longer user preferences. They come from the theme. A theme
declares --radius-box, --radius-field and --radius-selector, and may declare --font-sans,
--font-heading and --font-mono. A theme that names no face falls back to Geist and Geist Mono.
Removed:
@kanzo-tech/ui:PreferencesRadius,PreferencesFont,PreferencesMonoFont, theFontOption
type,KanzoThemeProvider'sfontsandmonoFontsprops, and theradius,font,monoFont,
fontsandmonoFontsfields ofuseKanzoTheme().KanzoThemetakesthemeandappearance
only: itsradius,font,monoFontanddensityprops are gone. A scoped density never scaled
anything, because aremresolves against<html>.@kanzo-tech/theme: theKanzoRadius,KanzoFontandKanzoMonoFonttypes; theradius,font
andmonoFontkeys ofThemePrefs,DEFAULT_PREFSandCORE_PREFS;themeData.radii,
.fontsand.monoFonts; and the[data-radius],[data-font]and[data-mono-font]rules in
themes.css.
What to do: delete those controls from your settings. To change shape or typography for your product,
put the values in your theme, which you can generate at /theme-generator, and load the font files
your theme names yourself. A tenant policy.theme entry for radius, font or monoFont no longer
does anything, so remove it. A radius or face your users stored earlier is ignored, and they see the
theme's own.