[Meta] Roadmap

[black7375]

Description

As stated in the README, we'll be making the following five API enhancements.

1. Literal: Provides various CSS-specific syntax of CSS preprocessors, considering the syntactic limitations of JavaScript
2. Theme: Design token values and customization for Color, Typography, Spaces, etc.
3. Atomic: Atomic styles that map to visual values
4. Variants: Styles for reusable blocks
5. Styled Component: Binding with JSX components

It also extends to a system for design systems via the Figma plugin.

Related RFC

No response

Task or issue list

The expected sequence of actions is as follows:

1. Natural CSS in TypeScript: We will bind various CSS preprocessing features to be specialized for TypeScript.
   1. [Meta] CSS Literals #44
   2. [Meta] CSS Nesting #45
2. A CSS in JS that integrates AtomicCSS and Variants: We will achieve the integration of visual hierarchy (AtomicCSS) and semantic hierarchy (Variants), which was the original goal.
   1. CSS Rules (Variants)
   2. CSS defineRules (Atomic)
   3. Sub functions (.with(), .variants())
   4. Styled Components
3. Build your own design system: It functions as a framework for creating design systems through design token management and Figma plugins, among others.
   1. CSS theme
   2. Figma plugin
   3. Presets

Additional context

No response