Skip to content

v0.24.0: chore: changesets for preference-or-theme

Choose a tag to compare

@angel-ip angel-ip released this 02 Oct 17:32
· 594 commits to main since this release

@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.density may set default, but pinned and hidden are now ignored: the
    density control always draws and a stored choice always applies. Both KanzoThemeProvider and
    themeScript() behave this way. The declaration carries it as personal: true, a new optional
    field on any preference declaration with the same meaning for a contributed section.
  • The density steps are 87.5%, 100% and 112.5% of the browser's font size, which used to be
    14px, 16px and 18px. A person who enlarged their browser keeps the enlargement at every step,
    and nothing changes at the browser's default of 16px. themeData.densities holds 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's copy moves to copy on Preferences, PreferencesPanel or
    PreferencesSections. The type is PreferencesCopy, which adds theme (the heading over the
    cards, "Theme" by default). PreferencesPanelProps is 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, the FontOption
    type, KanzoThemeProvider's fonts and monoFonts props, and the radius, font, monoFont,
    fonts and monoFonts fields of useKanzoTheme(). KanzoTheme takes theme and appearance
    only: its radius, font, monoFont and density props are gone. A scoped density never scaled
    anything, because a rem resolves against <html>.
  • @kanzo-tech/theme: the KanzoRadius, KanzoFont and KanzoMonoFont types; the radius, font
    and monoFont keys of ThemePrefs, DEFAULT_PREFS and CORE_PREFS; themeData.radii,
    .fonts and .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.