DOCSEARCHbyAlgolia
Submit Docs

Tiendana Design System

website·Indexed 32 days ago

https://desing-system.tiendana.com

Documentation for the Tiendana Design System, including information on its purpose and private libraries.

Tokens
529
Snippets
0
Records
7
Agent score
0%

What's inside Tiendana Design System

  1. Overview of the Tiendana Design System

    The Tiendana Design System is a multi-platform design language and component library ensuring consistent user experiences across web and mobile applications. It is built on design tokens derived from the Tiendana brand manual and adheres to the following principles:

    • Token-based: All style values are derived from design tokens.
    • Consistent: Uniform appearance across Angular, Flutter, and CSS.
    • Accessible: Compliant with WCAG 2.1 AA.
    • Responsive: Mobile-first adaptive layouts.
    • Dark Mode: Integrated support for light and dark themes.
    • Modular: Allows developers to import only the necessary components.

  2. Authenticate with AWS CodeArtifact to install @tiendana packages

    All private npm packages under the @tiendana/* scope are hosted on a private AWS CodeArtifact repository. Developers must authenticate with AWS CodeArtifact before attempting to install these packages.

  3. Use @tiendana/api-types for TypeScript API definitions

    The @tiendana/api-types library provides shared TypeScript definitions, interfaces, and enums that represent the Tiendana private API data models. It ensures compile-time validation and type consistency across the ecosystem and is used by ngx-core and utils.

  4. Use @tiendana/ngx-core for Angular 19+ development

    The @tiendana/ngx-core library provides specialized UI components, directives, services, and pipes for Angular 19+. It is built using modern Angular features including Signals, standalone components (no NgModules), and the new control flow. Notable components include Tag Input and Country Display.

  5. Use @tiendana/utils for framework-agnostic JavaScript utilities

    The @tiendana/utils library is a pure JavaScript library with no external dependencies. It provides utility functions, data manipulation helpers, validators, and formatters compatible with React, Vue.js, Angular, and Vanilla JS.

  6. Use @tiendana/web-foundation for framework-agnostic styling

    The @tiendana/web-foundation library provides a framework-agnostic implementation of the Tiendana brand manual. It includes CSS styles, design tokens, and pure CSS components. Key features include the Natura and Forrest color systems and Host Grotesk typography.

  7. Use tiendana_uikit for Flutter mobile development

    The tiendana_uikit library provides Flutter widgets and components for iOS and Android. It implements Tiendana design tokens, supports light and dark themes, and includes integrated iconography and typography.