The scalability of the settings in the theme

[osequi]

The main idea behind theming is to enforce rules thus keep things uniform.

An example:

/**
 * Defines the default link style.
 */
const defaultLink: TLink = {
  preset: "default",
  colors: {
    default: "default",
    active: "inverted",
    visited: "default",
  },
  settings: {
    default: {
      textDecoration: "underline",
    },
    active: {
      textDecoration: "line-through",
    },
    visited: {
      textDecorationColor: "red",
    },
  },
};

A link can be freely styled through settings when those settings are not present in the theme. When a setting is present in the theme (colors) it should be moved out from settings. This would like to enforce the usage of the same colors across the design system.

For example textDecorationColor: "red" will break the color system.

This strictness might not scale well.

For example, what if we want bold links? Setting fontWeight: 'bold' on deafult would again break the font system. Instead we should use the 'Nimbus Sans Bold' font through a hook. That would result in adding a new section fonts to the already existing colors and settings. And this might not scale freely.

Perhaps an error-prone, totally uniform design system doesn't scales so well.

[osequi]

There is a common background for element states. Links, buttons (perhaps form inputs, and who knows what else) share the same state:

export type TLinkStatePresetNames =
  | "default"
  | "active"
  | "visited"
  | "disabled"
  | "hidden";

Finding a mechanism to style these states would solve the scalability issue.

[osequi]

Also components/Text is a direction. Theme & hooks are for primitives / tokens, components are to freely assemble styles.

[osequi]

A proof of concept is done: https://github.com/osequi/test-presets

All theme entries except scale, colors can be refactored to a common base: TState, TPreset, TStyle.
This would also eliminate 9 of the current 27 hooks.

[osequi]

theme/decorations can be refactored easily. Maybe also fonts. headings, breakpoints needs more investigation.

[osequi]

At this moment there is a way back, if something will go wrong: https://github.com/osequi/somenage/tree/v0.1.0-refactoring
Next colors and fonts will be migrated to presets, and lots of hooks removed.

[osequi]

https://github.com/osequi/test-presets now features tokens vs. presets and supports fonts, colors, and links. Ready to refactor Somenage.