DOCSEARCHbyAlgolia
Submit Docs

Pink Design

repository·main·Indexed 19 days ago

https://github.com/appwrite/pink

Appwrite's open-source CSS design system for building accessible and consistent user interfaces. It includes a comprehensive set of UI components such as Action bars, Alerts, and Avatars, as well as a dedicated icon library available via @appwrite.io/pink-icons.

Tokens
57.7K
Snippets
160
Records
187
Agent score
68%

What's inside Pink Design

  1. Understand the Pink Design project structure

    main

    Pink Design is built using Astro. The project follows this directory structure:

    • public/: Contains static assets like images.
    • src/pages/: Contains .astro, .md, or .mdx files. Each file in this directory is exposed as a route based on its filename.
    • src/components/: A recommended location for Astro, React, Vue, Svelte, or Preact components.
    • package.json: Defines project dependencies and scripts.
    /
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

  2. Structure of the User Profile component

    main

    The User Profile is a popover component designed to display extra details about a user or a team. It is composed of three primary sub-components:

    1. user-profile-info: Displays information such as names, IDs, or descriptions.
    2. user-profile-sep: A separator element used to divide information sections.
    3. user-profile-empty-column: An empty column used for layout spacing.

    The root container uses the user-profile class.

    <div class="user-profile">
    <span class="avatar">UN</span>
    <span class="user-profile-info">
        <span class="name">User Name</span>
        <div class="interactive-text-output u-padding-inline-0">
            <span class="text">User ID</span>
            <div class="u-flex u-cross-child-start u-gap-8">
                <button class="interactive-text-output-button" aria-label="copy text">
                    <span class="icon-duplicate" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </span>

    <span class="user-profile-sep"></span>

    <span class="user-profile-empty-column"></span>
    <span class="user-profile-info">
        <span class="text">Extra description</span>
    </span>
</div>

  3. How Dark Theme compiles to CSS

    main

    When using the Sass interpolation pattern #{$theme-dark} &, the compiled CSS produces a descendant selector. This allows the .theme-dark class (applied to a high-level container like <body> or <html>) to trigger variable updates for nested components.

    /* Compiled Output */
.partial {
  --p-partial-bg-color: var(--color-neutral-0);
  --p-partial-color: var(--color-neutral-60);
  background-color: hsl(var(--partial-bg-color));
  color: hsl(var(--partial-color));
}

/* Dark Theme */
.theme-dark .partial {
  --p-partial-bg-color: var(--color-neutral-100);
  --p-partial-color: var(--color-neutral-20);
}

  4. Best practices for using Tabs

    main

    To maintain a clean UI and reduce cognitive load, follow these guidelines:

    1. Limit Tab Count: Use no more than six tabs in most scenarios.
    2. Handle Overflow: If tabs exceed available space, implement a horizontal scrolling element.
    3. Scroll Button Logic:
      • The right arrow (is-end) should always be visible. It should be active if the user can scroll right, and disabled otherwise.
      • The left arrow (is-start) should only be visible if the user can scroll left.

  5. How Drop Lists work

    main

    A Drop List is a UI pattern that allows users to select one or more options from a popover menu. It is composed of four hierarchical components:

    1. drop-wrapper: The container that holds the trigger element and the popover.
    2. drop-section: The section within the popover.
    3. drop-list: The list container (typically a <ul>).
    4. drop-list-item: The individual items within the list (typically an <li>).

    The main entry point for styling the popover is the .drop class.

    <div class="drop-wrapper">
  <button class="button">Trigger</button>
  <div class="drop">
    <section class="drop-section">
      <ul class="drop-list">
        <li class="drop-list-item">
          <button class="drop-button">Item 1</button>
        </li>
      </ul>
    </section>
  </div>
</div>

  6. Best Practices for Avatars

    main

    To maintain consistency in your UI, follow these guidelines:

    • Icons: Use icons with universal, easily recognizable meanings. Avoid obscure or inconsistent icons.
    • Text Avatars: Use up to 2 uppercase letters only. Avoid using lowercase or more than 2 letters. Ensure high color contrast between the text and the background.
    • Accessibility: When using icons inside an avatar, ensure they are properly labeled for screen readers (e.g., using aria-label on the icon span).

  7. Structure of a Table component

    main

    Tables in the Pink design system are composed of five specific sub-components used to organize and display data. To build a complete table, you must use these classes in a hierarchical structure:

    • table: The root container representing the table.
    • table-thead: The header section of the table.
    • table-thead-col: Individual columns within the header section.
    • table-tbody: The body section containing the data rows.
    • table-row: A single row within the table body.
    • table-col: Individual columns within a row.

  8. Icon Placement and Alignment Best Practices

    main

    To ensure legibility and visual balance, follow these alignment rules:

    • Spacing: Maintain a minimum of 4px of space between an icon and its associated label.
    • Single-line Alignment: Align the icon to the vertical center of the text line.
    • Multi-line Alignment: If a label spans multiple lines, align the icon to the vertical center of the first line only, rather than centering it against the entire block of text.

  9. How Collapsible components are structured

    main

    Collapsibles are used to display a vertical list of headers that reveal or hide content, allowing for progressive disclosure of information. A collapsible structure is composed of five specific sub-components that must be nested correctly to function:

    1. collapsible-item: The list item container.
    2. collapsible-wrapper: The wrapper (typically a <details> element) that manages the open/closed state.
    3. collapsible-button: The header/summary area (typically a <summary> element) that acts as the trigger.
    4. collapsible-button-optional: An optional label or tag within the button.
    5. collapsible-content: The container for the content revealed when the collapsible is expanded.
    <ul class="collapsible u-width-full-line">
    <li class="collapsible-item">
        <details class="collapsible-wrapper">
            <summary class="collapsible-button">
                <span class="text">Header Text</span>
                <span class="collapsible-button-optional">(optional)</span>
                <div class="icon">
                    <span class="icon-cheveron-down" aria-hidden="true"></span>
                </div>
            </summary>
            <div class="collapsible-content">
                <!-- Hidden content goes here -->
            </div>
        </details>
    </li>
</ul>

  11. Structure of the Upload File Box component

    main

    The upload-file-box is a composite component used for file selection and uploading. It is composed of eight distinct sub-components/classes that handle different parts of the UI:

    • upload-file-box: The partial container for the entire component.
    • upload-file-box-image: The visual representation (usually an icon) of the upload action.
    • upload-file-box-title: The main heading text (e.g., "Drag and drop files here to upload").
    • upload-file-box-info: Supporting text providing constraints like max file size.
    • upload-file-box-list: A container for the list of files currently selected or uploaded.
    • upload-file-box-name: The name of the file within the list.
    • upload-file-box-size: The size of the file within the list.
    • is-hover-with-file: A class representing the hover state when a file is being interacted with.