Architecture

Development Architecture

On development side, the architecture of Pyxis relies on two libraries:

  • @pyxis/pyxis
    The main library which provides the components compatible with Vue3 projects
  • @pyxis/design-tokens
    The side library feeding the main one with its design tokens and Tailwind's utility classes

By extracting the design tokens from the design system library, we can ensure better scalability and maintainability of Pyxis. This structure simplifies the process of expanding the design system for new components or platforms, making maintenance and system evolution more efficient and flexible over time.

Ref to 4609:2827

@pyxis/pyxis

The design system library exports all the components based on the design tokens library so that they can be imported in any Vue3 project.


                                                        
                                                        
                                                            @pyxis/pyxis
                                                        ├─ .storybook/
                                                        |      ├─ main.ts
                                                        |      └─ preview.tsx
                                                        |
                                                        └─ src/
                                                            ├─ tests/
                                                            ├─ components/
                                                            |   ├─ Button/
                                                            |   |   ├─ button.scss
                                                            |   |   ├─ Button.vue
                                                            |   |   ├─ Button.stories.ts
                                                            |   |   └─ index.ts
                                                            |   └─ ...
                                                            |   
                                                            ├─ docs/
                                                            |   ├─ components/
                                                            |   |   ├─ CopySection.jsx
                                                            |   |   ├─ TokensContainer.jsx
                                                            |   |   └─ ...
                                                            |   |
                                                            |   └─ tokens/
                                                            |        ├─ colors.mdx
                                                            |        ├─ spacing.mdx  
                                                            |        └─ ...
                                                            |
                                                            ├─ style.css
                                                            └─ index.ts
                                                        
                                                            

Preview of the tree of the library @pyxis/pyxis


@pyxis/design-tokens

The design tokens library contains all the tokens needed to build the components of the design system. This library is the source of Pyxis and every projects using the design system.


                                                        
                                                        
                                                            @pyxis/design-tokens
                                                        └─ src/
                                                            ├─ tests/
                                                            ├─ tokens/
                                                            |   ├─ css/
                                                            |   |   ├─ style.css
                                                            |   |   ├─ color-text-tailwind.css
                                                            |   |   └─ ...
                                                            |   ├─ colors.ts
                                                            |   ├─ spacing.ts
                                                            |   └─ ...
                                                            |   
                                                            ├─ utils/
                                                            └─ index.ts
                                                        
                                                            

Preview of the tree of the library @pyxis/design-tokens

Structure of the design tokens

Every token is initially defined within the global file style.css, and then constructed as an object in a .ts file. This structure allows the token values to be exclusively defined at the :root level of the style.css file. The purpose of the .ts file is to extract these token values from style.css and incorporate them into a JSON object which will be used to set up the configuration of Tailwind.

By defining the tokens at the :root level, they can be used independently of Tailwind, offering more flexibility in their usage.