@kollegio/design-system

Shared Tailwind tokens & Chakra theme for Kollegio’s apps.

Install

npm install @kollegio/design-system
# or
pnpm add @kollegio/design-system

Publishing

To publish the design system package, you need to ensure that you have the necessary permissions and that you are logged in to the npm registry. Use the following command to publish:

pnpm publish --access public

Usage

import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "@kollegio/design-system";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>
);

Tailwind CSS

To use the Tailwind CSS tokens, you need to import the tailwind.css file in your project. You can do this in your main CSS file or directly in your entry point JavaScript file.

import "@kollegio/design-system/tailwind.css";

Tailwind CSS Configuration

You can also extend your Tailwind CSS configuration to include the design system tokens. Add the following to your tailwind.config.js:

const { tokens } = require("@kollegio/design-system");
module.exports = {
  theme: {
    extend: {
      colors: tokens.colors,
      spacing: tokens.spacing,
      fontSize: tokens.fontSize,
      // Add other tokens as needed
    },
  },
};

Chakra UI Configuration

To use the Chakra UI theme, you can import the theme object from the design system package and pass it to the ChakraProvider in your application.

import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "@kollegio/design-system";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>
);

Tokens

The design system provides a set of tokens that can be used in both Tailwind CSS and Chakra UI. These tokens include colors, spacing, font sizes, and more. You can access these tokens directly from the package:

import { tokens } from "@kollegio/design-system";
console.log(tokens.colors.primary); // Access primary color token
console.log(tokens.spacing.md); // Access medium spacing token
console.log(tokens.fontSize.base); // Access base font size token

Contributing

If you want to contribute to the design system, feel free to open a pull request or issue on the GitHub repository. We welcome contributions that improve the design system, add new tokens, or enhance documentation.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Changelog

For a detailed list of changes, please refer to the CHANGELOG file in the repository.

Issues

If you encounter any issues or have questions, please open an issue on the GitHub repository. We will do our best to address them promptly.

Support

If you need support or have questions about using the design system, you can reach out to us through the GitHub repository or our community channels. We are here to help!

Roadmap

We are continuously working on improving the design system. Here are some of the planned features and improvements:

• [ ] Add more tokens for typography, shadows, and borders.
• [ ] Improve documentation with examples and usage guidelines.
• [ ] Create a dedicated website for the design system with live examples.
• [ ] Integrate with other design tools and frameworks.
• [ ] Enhance accessibility features and ensure compliance with WCAG standards.

Acknowledgements

We would like to thank the open-source community for their contributions and support. The design system is built on the shoulders of many great projects and libraries, and we are grateful for their work.

Contact

If you have any questions, suggestions, or feedback, feel free to reach out to us via the GitHub repository or our community channels. We appreciate your interest in the @kollegio/design-system and look forward to hearing from you!

Versioning

This project follows Semantic Versioning. The version number is in the format MAJOR.MINOR.PATCH. We will increment the version number according to the changes made:

• MAJOR version when making incompatible API changes,
• MINOR version when adding functionality in a backwards-compatible manner, and
• PATCH version when making backwards-compatible bug fixes.

Future Plans

We are committed to continuously improving the @kollegio/design-system. Here are some of the future plans:

• Enhanced Documentation: We aim to provide comprehensive documentation with examples, usage guidelines, and best practices for using the design system.
• Community Contributions: We encourage the community to contribute to the design system by adding new tokens, improving existing ones, and enhancing documentation.
• Integration with Other Frameworks: We plan to explore integration with other popular frameworks and libraries to make the design system more versatile and accessible.
• Performance Optimization: We will continuously monitor and optimize the performance of the design system to ensure it remains lightweight and efficient.
• Accessibility Improvements: We are committed to ensuring that the design system meets accessibility standards and provides a great user experience for all users.

Feedback

We value your feedback and suggestions for improving the @kollegio/design-system. If you have any ideas, feature requests, or issues, please open an issue on the GitHub repository. Your input is crucial in making the design system better for everyone.

Community

We believe in the power of community and collaboration. If you are interested in contributing to the @kollegio/design-system, here are some ways you can get involved:

• Contribute Code: If you have coding skills, you can contribute by adding new features, fixing bugs, or improving existing code. Please follow the contribution guidelines in the repository.
• Report Issues: If you encounter any issues or bugs, please report them on the GitHub repository. This helps us identify and fix problems quickly.
• Share Your Experience: If you have used the design system in your projects, we would love to hear about your experience. Share your stories, challenges, and successes with us.
• Join Discussions: Engage with the community by participating in discussions, asking questions, and sharing your knowledge. You can join our community channels or forums to connect with other users and contributors.