[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.

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. [Meta] CSS Rules (Variants) #93
   2. Theme Systems
   3. CSS defineRules (Atomic)
   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. Figma plugin
   2. Presets
4. Another DX improvements: Different approaches to usability
   1. Co-location: While maintaining short build time (using SWC or OXC)
   2. Classname management (like clsx, cva, tailwind-merge)
   3. Sub functions (.with(), .variants())

Additional context

No response