README.md

This package provides a comprehensive collection of design system assets, including a variety of components, styles, and guidelines. These resources are designed to streamline the creation of cohesive and user-friendly interfaces across multiple applications and platforms, ensuring consistency and an improved user experience.

najwer23snacks

A design system is a comprehensive collection of reusable components, guidelines, and standards that help teams create consistent and cohesive digital products. It serves as a "single source of truth," ensuring that design and development processes are streamlined across various platforms and teams.

1. Reusable UI Components
2. Documentation and Guidelines
3. Style Guides
4. Design Tokens
5. Tree shaking

Benefits of Using a Design System

• Increased Efficiency: By providing pre-made components, design systems reduce the time spent on repetitive tasks, allowing teams to focus on more complex design challenges.

• Consistency Across Products: A design system ensures that all products share a unified look and feel, which enhances brand recognition and user experience. This is crucial for companies with multiple products or teams working in silos.

• Improved Collaboration: With a shared language and framework, design systems facilitate better communication among designers, developers, and other stakeholders, reducing misunderstandings and misalignments.

• Scalability: As products evolve, design systems allow for easy updates and scalability. Changes made to components can be reflected across all products, ensuring consistency.

• Quality Control: A design system simplifies the review process by providing clear guidelines and standards, making it easier to identify inconsistencies and maintain high-quality design.

Install

yarn add najwer23snacks --dev

npm install najwer23snacks --save-dev

Example

import { Button } from "najwer23snacks/lib/button";

export const Example = () => {
    const handleClick = () => {
        console.log("Button clicked!");
    };

    return (
        <Button onClick={handleClick}>
            Click!
        </Button>
    );
}

CSS tokens

:root {
  /* Fonts */
  --najwer23snacks--font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
    helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

  /* Button */
  --najwer23snacks--button-bg-color: #00a76f;
  --najwer23snacks--button-bg-color-hover: #007867;
  --najwer23snacks--button-bg-color-active: #004b50;
  --najwer23snacks--button-bg-color-focus: #00b8d9;
  --najwer23snacks--button-bg-color-disabled: #919eab;
  --najwer23snacks--button-font-color: #ffffff;
  --najwer23snacks--button-font-size: 18px;
  --najwer23snacks--button-font-weight: 700;
  --najwer23snacks--button-font-family: var(--najwer23snacks--font-family);
  --najwer23snacks--button-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.24), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Let's connect!