Andromeda

Andromeda is the Design System of Softis, designed to create cohesive and efficient user interfaces. With reusable components, clear guidelines, and comprehensive documentation, Andromeda helps build digital products with consistency and quality.

Badges

Project Status

Table of Contents

• Prerequisites and How to Run the App
• How to use
• Integration with Tailwind
• Technologies Used
• Author
• License

Prerequisites and How to Run the App

Prerequisites

• Node.js version 21.x or higher
• Yarn or npm

Here's the updated section in English, without the Tailwind integration part:

How to Use Andromeda

To integrate Andromeda into your project, follow these steps:

1. Install Dependencies

First, add Andromeda as a dependency in your project. Run the following commands to install the tokens package and the React components package:

npm install @hello.softis/andromeda-tokens
npm install @hello.softis/andromeda-react

2. Configure Design Tokens

Andromeda’s tokens provide values for colors, font sizes, and other design styles. To use them in your project, import the tokens and apply them in your styling files or directly in your components.

Here’s an example of how you might import and use tokens in a CSS-in-JS solution or inline styles:

import * as tokens from '@hello.softis/andromeda-tokens';

const styles = {
  color: tokens.twColors.primary,
  fontSize: tokens.fontSizes.large,
};

function App() {
  return (
    <div style={styles}>
      <h1>Welcome to Andromeda</h1>
    </div>
  );
}

export default App;

3. Use React Components

The @hello.softis/andromeda-react package includes a set of pre-configured components that follow the Design System guidelines. To use them, import the desired components and include them in your project:

import { Button, Card } from '@hello.softis/andromeda-react';

function App() {
  return (
    <div>
      <Card>
        <h1>Welcome to Andromeda</h1>
        <Button>Click Me</Button>
      </Card>
    </div>
  );
}

export default App;

4. Start Your Project

After setting up the dependencies and integrating the tokens and components, start your project to see the changes in action:

npm run dev

Feel free to let me know if there are any other changes you need!

Integration with Tailwind

Andromeda can be easily integrated with Tailwind CSS, allowing you to use the colors defined in the Design System directly in your Tailwind utility classes. To do this, you need to configure your project's tailwind.config.js file to import the colors from the Andromeda tokens package.

First, install the tokens package:

npm install @hello.softis/andromeda-tokens

Next, configure the tailwind.config.js file to add Andromeda's colors:

/** @type {import('tailwindcss').Config} */
import * as tokens from '@hello.softis/andromeda-tokens';

export default {
  content: ['../react/src/**/*.{js,ts,jsx,tsx}','./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: tokens.twColors,
      fontSize: tokens.fontSizes,
      fontWeight: tokens.fontWeights,
      fontFamily: {
        sans: tokens.fonts.default,
        mono: tokens.fonts.code,
      },
      lineHeight: tokens.lineHeights,
      borderRadius: tokens.radii,
      spacing: tokens.space,
    },
  },
  plugins: [],
};

With this configuration, you can use Andromeda's colors directly in Tailwind CSS classes, ensuring visual consistency and leveraging the benefits of a well-defined design system.

Technologies Used

Others

• Radix UI
• Chakra-UI
• Stitches
• Tailwind Variants
• HugeIcons

Author

Developed by Softis©. Get in touch!

License

This project is licensed under a closed license. See the LICENSE file for more details.