Lapzo Library

https://lapzo-library.web.app
Admin
Lapzo Library is a design system and UI component library, likely showcased using Storybook, for...
Tokens:2,096
Snippets:9
Trust Score:7.2
Update:8 months ago
Show doc for...
Tokens:
Raw
### Storybook Controls, Actions, and Interactions Guidance

Source: https://lapzo-library.web.app/index_path=%2Fdocs%2Fdesign-colors-legacy--page

This section provides guidance on using Storybook's features for component development. It mentions that controls might not be configured for all stories, and offers links to documentation for adding controls, inputs, and interactions to stories. It also suggests checking the console for errors if issues arise.

```markdown
__
Controls
Actions
Interactions
React Router
This story is not configured to handle controls. Learn how to add controls
No inputs found for this component. Read the docs
No interactions found
Learn how to add interactions to your story
Clear
```

--------------------------------

### UI Component Property Definitions

Source: https://lapzo-library.web.app/iframe_id=design-colors-legacy--page&viewMode=story

Defines the properties for various UI components within the Lapzo Library Web App. Each property includes a name, a brief description, a default value, and the type of control used for setting it. These are essential for configuring component behavior and appearance.

```markdown
| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
```

--------------------------------

### Storybook Component Properties Documentation

Source: https://lapzo-library.web.app/index_path=%2Fdocs%2Fdesign-colors-legacy--page

This section details the properties available for UI components within the Storybook environment. It specifies the name, a brief description, default value, and control type for each property. This helps developers understand and utilize component props effectively.

```markdown
Name| Description| Default| Control  
---|---|---|---  
propertyName*| This is a short descriptionsummary| defaultValue| Set string  
propertyName*| This is a short descriptionsummary| defaultValue| Set string  
propertyName*| This is a short descriptionsummary| defaultValue| Set string  
```

--------------------------------

### Color Palette Definitions

Source: https://lapzo-library.web.app/iframe_id=design-colors-legacy--page&viewMode=story

Lists the color variables used in the Lapzo Library Web App. Each entry includes the color name (CSS variable format), its HEX value, and a visual representation or name. This palette ensures consistent theming across the application.

```css
--color-primary-700: #040408;
--color-primary-500: #240c50;
--color-primary-450: #4700ab;
--color-primary-400: #6d29ff;
--color-primary-300: #a996ff;
--color-primary-200: #bfbefc;
--color-primary-100: #ebecfe;
--color-nav-background: #240c50;
--color-nav-font: #fff;
--color-secondary-500: #db5c51;
--color-secondary-400: #6d29ff;
--color-secondary-300: #ffc3a9;
--color-secondary-200: #bfbefc;
--color-secondary-100: #ffefe2;
--color-accent-300: #f02653;
--color-accent-200: #f95176;
--color-accent-100: #ff8aa4;
--color-text-300: #141720;
--color-text-200: #7a869a;
--color-text-100: #e3e4e4;
--color-dark-700: #14142a;
--color-dark-600: #262338;
--color-dark-550: #3A374F;
--color-dark-500: #4e4b66;
--color-dark-400: #6e7191;
--color-dark-300: #a0a3bd;
--color-dark-200: #d9dbe9;
--color-dark-100: #eff0f6;
--color-light-400: #DEE2FF;
--color-light-300: #f9f9fb;
--color-light-200: #f7f7fc;
--color-light-100: #ffffff;
--color-error-500: #9e0038;
--color-error-400: #ca024f;
--color-error-370: #ff8670;
--color-error-350: #ffa494;
--color-error-300: #ff75cb;
--color-error-200: #ffabe8;
--color-error-100: #ffecfc;
--color-warning-500: #946300;
--color-warning-400: #eaac30;
--color-warning-300: #ffdf9a;
--color-warning-200: #ffe6b0;
--color-warning-100: #fff8e9;
--color-success-500: #067306;
--color-success-400: #008a00;
--color-success-350: #01da8c;
--color-success-300: #a6f787;
--color-success-200: #cbffae;
--color-success-170: #5cfec3;
--color-success-150: #baffe6;
--color-success-100: #eaf9de;
```

--------------------------------

### Storybook No Preview Message

Source: https://lapzo-library.web.app/index_path=%2Fdocs%2Fdesign-colors-legacy--page

This message is displayed in Storybook when a component has no stories defined or none are currently selected. It provides troubleshooting steps, including checking the Storybook configuration, reloading the page, and examining the browser console or terminal output for errors.

```markdown
# No Preview
Sorry, but you either have no stories or none are selected somehow.
  * Please check the Storybook config.
  * Try reloading the page.


If the problem persists, check the browser console, or the terminal you've run Storybook from.
```

--------------------------------

### Storybook Color Palette Definitions

Source: https://lapzo-library.web.app/index_path=%2Fdocs%2Fdesign-colors-legacy--page

This section lists the defined color variables used within the Lapzo Library's design system. It includes the color name (e.g., `--color-primary-700`), its HEX value, and a visual representation or description of the color. This serves as a reference for consistent color application.

```markdown
# Color Palette
  
 
 __
Name
▲
HEX
Color
--color-primary-700 __
#040408 __
--color-primary-500 __
#240c50 __
--color-primary-450 __
#4700ab __
--color-primary-400 __
#6d29ff __
--color-primary-300 __
#a996ff __
--color-primary-200 __
#bfbefc __
--color-primary-100 __
#ebecfe __
--color-nav-background __
#240c50 __
--color-nav-font __
#fff __
--color-secondary-500 __
#db5c51 __
--color-secondary-400 __
#6d29ff __
--color-secondary-300 __
#ffc3a9 __
--color-secondary-200 __
#bfbefc __
--color-secondary-100 __
#ffefe2 __
--color-accent-300 __
#f02653 __
--color-accent-200 __
#f95176 __
--color-accent-100 __
#ff8aa4 __
--color-text-300 __
#141720 __
--color-text-200 __
#7a869a __
--color-text-100 __
#e3e4e4 __
--color-dark-700 __
#14142a __
--color-dark-600 __
#262338 __
--color-dark-550 __
#3A374F __
--color-dark-500 __
#4e4b66 __
--color-dark-400 __
#6e7191 __
--color-dark-300 __
#a0a3bd __
--color-dark-200 __
#d9dbe9 __
--color-dark-100 __
#eff0f6 __
--color-light-400 __
#DEE2FF __
--color-light-300 __
#f9f9fb __
--color-light-200 __
#f7f7fc __
--color-light-100 __
#ffffff __
--color-error-500 __
#9e0038 __
--color-error-400 __
#ca024f __
--color-error-370 __
#ff8670 __
--color-error-350 __
#ffa494 __
--color-error-300 __
#ff75cb __
--color-error-200 __
#ffabe8 __
--color-error-100 __
#ffecfc __
--color-warning-500 __
#946300 __
--color-warning-400 __
#eaac30 __
--color-warning-300 __
#ffdf9a __
--color-warning-200 __
#ffe6b0 __
--color-warning-100 __
#fff8e9 __
--color-success-500 __
#067306 __
--color-success-400 __
#008a00 __
--color-success-350 __
#01da8c __
--color-success-300 __
#a6f787 __
--color-success-200 __
#cbffae __
--color-success-170 __
#5cfec3 __
--color-success-150 __
#baffe6 __
--color-success-100 __
#eaf9de __
__
```
Tokens:
Raw