open-index/open-npm huggingface dataset:
npm package: @spaceflora/wireframe-ui
Description: Another component library, enabling fast prototyping w/ a good UX out of the box.
Latest version: 1.1.2

# Wireframe UI

Another component library, enabling fast prototyping w/ a good UX out of the box.

- Modern mobile-first UI
- A unified developer experience
- Priority-based component variations
- Consistent sizing and theming

## Components

| Component      | Lib                | Story              |
| -------------- | ------------------ | ------------------ |
| Backdrop       | :white_check_mark: | Not Needed         |
| Button         | :white_check_mark: | :white_check_mark: |
| ButtonCopy     | :white_check_mark: | :white_check_mark: |
| ButtonSelect   | :white_check_mark: | :white_check_mark: |
| ButtonUpload   | :white_check_mark: | :white_check_mark: |
| Container      | :white_check_mark: | :white_check_mark: |
| Divider        |                    |                    |
| Input          | :white_check_mark: | :white_check_mark: |
| InputCheckbox  |                    |                    |
| InputLabel     |                    |                    |
| InputMultiline |                    |                    |
| InputSelect    |                    |                    |
| Loader         | :white_check_mark: | :white_check_mark: |
| Modal          |                    |                    |
| Stack          | :white_check_mark: | :white_check_mark: |
| Text           | :white_check_mark: | :white_check_mark: |
| Theme          | :white_check_mark: | Not Needed         |

## CSS Variable Naming

### Terminology

#### Priority

Priority is used to intuitively let the developer choose the visibility of an element. 1 is the highest priority and more priorities can be added as desired.

#### Size

In sizing we first specify a `base` value that will be the standard used to compare other sizes.

#### Type of value

Type of value is often the same as a CSS property, but can be simplified if desired. For example `size` for combining width and height in one value.

### Global

Order: {type of value}--{variant}
Example: `--color--red-dark`

### Contextual

Order: {type of value}--{element}--{priority or size}
Example: `--color--text--1`

### Component

Order: {component}--{variant (optional)}--{sub-component (optional)}--{type of value}-{priority (optional)}
Example: `--form-control--base--icon--color--1`

## Quick Start

TODO :D