Skip to content

Commit

Permalink
fix: switch from component table to html table in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamzaAmar
HamzaAmar committed Nov 22, 2024
1 parent 9ebdb2a commit 4bf3720
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 613 deletions.
57 changes: 10 additions & 47 deletions apps/docs/content/themes/color.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,53 +11,16 @@ publishedAt: '2024-05-03T05:35:07.322Z'

The Pillar UI color theme provides a set of default colors that can be easily applied to different UI elements.

<Table>
<TableRow type='head'>
<TableColumn as="th">Color Category</TableColumn>
<TableColumn as="th">Variable</TableColumn>
<TableColumn as="th">Description</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Primary Colors</TableColumn>
<TableColumn>`--P*`</TableColumn>
<TableColumn>Highlight important elements; range from light to dark.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Secondary Colors</TableColumn>
<TableColumn>`--Se*`</TableColumn>
<TableColumn>Complement primary colors; offer visual variation.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Danger Colors</TableColumn>
<TableColumn>`--D*`</TableColumn>
<TableColumn>Signal critical or error-related elements in your UI.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Warning Colors</TableColumn>
<TableColumn>`--W*`</TableColumn>
<TableColumn>Convey cautionary information or warnings.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Success Colors</TableColumn>
<TableColumn>`--S*`</TableColumn>
<TableColumn>Represent successful or positive elements in your UI.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Info Colors</TableColumn>
<TableColumn>`--I*`</TableColumn>
<TableColumn>Used for Informational or informational elements.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>Opacity Colors</TableColumn>
<TableColumn>`--O*`</TableColumn>
<TableColumn>Provide varying transparency levels to UI elements.</TableColumn>
</TableRow>
<TableRow>
<TableColumn>bg Colors</TableColumn>
<TableColumn>`--B*`</TableColumn>
<TableColumn>Serve as background colors for bgs or containers.</TableColumn>
</TableRow>
</Table>
| Color Category | Variable | Description |
| ----------------- | -------- | ------------------------------------------------------- |
| Primary Colors | `--P*` | Highlight important elements; range from light to dark. |
| Secondary Colors | `--Se*` | Complement primary colors; offer visual variation. |
| Danger Colors | `--D*` | Signal critical or error-related elements in your UI. |
| Warning Colors | `--W*` | Convey cautionary information or warnings. |
| Success Colors | `--S*` | Represent successful or positive elements in your UI. |
| Info Colors | `--I*` | Used for Informational or informational elements. |
| Opacity Colors | `--O*` | Provide varying transparency levels to UI elements. |
| Background Colors | `--B*` | Serve as background colors for bgs or containers. |

Note: The Pillar UI color system supports a range of 1 to 12 colors within each category.

Expand Down
63 changes: 11 additions & 52 deletions apps/docs/content/themes/font.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,58 +22,17 @@ Here’s a quick overview of the default font size variables:
message="Customizing spacing using the `--S*` variables may impact the responsive layout. Default values utilize the `clamp` function to adapt spacing based on viewport size, maintaining proportions and alignment. Modifying these values might result in spacing inconsistencies."
/>

<Table>
<TableRow type="head">
<TableColumn as="th">Variable</TableColumn>
<TableColumn as="th">Description</TableColumn>
<TableColumn as="th">Default value</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F1`</TableColumn>
<TableColumn>Font size variable for 3 extra small text.</TableColumn>
<TableColumn>0.55rem > size < 0.66rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F2`</TableColumn>
<TableColumn>Font size variable for 2 extra small text.</TableColumn>
<TableColumn>0.61rem > size < 0.8rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F3`</TableColumn>
<TableColumn>Font size variable for extra small text.</TableColumn>
<TableColumn>0.69rem > size < 0.96rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F4`</TableColumn>
<TableColumn>Font size variable for small text.</TableColumn>
<TableColumn>0.78rem > size < 1.15rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F5`</TableColumn>
<TableColumn>Font size variable for medium text.</TableColumn>
<TableColumn>0.88rem > size < 1.38rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F6`</TableColumn>
<TableColumn>Font size variable for large text.</TableColumn>
<TableColumn>0.98rem > size < 1.65rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F7`</TableColumn>
<TableColumn>Font size variable for extra large text.</TableColumn>
<TableColumn>1.11rem > size < 1.98rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F8`</TableColumn>
<TableColumn>Font size variable for 2 extra large text.</TableColumn>
<TableColumn>1.25rem > size < 2.38rem</TableColumn>
</TableRow>
<TableRow>
<TableColumn>`--F9`</TableColumn>
<TableColumn>Font size variable for 3 extra large text.</TableColumn>
<TableColumn>1.4rem > size < 2.85rem</TableColumn>
</TableRow>
</Table>
| Variable | Description | Default Value Range |
| -------- | ----------------------------------------- | ------------------- |
| `--F1` | Font size variable for 3 extra small text | 0.55rem - 0.66rem |
| `--F2` | Font size variable for 2 extra small text | 0.61rem - 0.8rem |
| `--F3` | Font size variable for extra small text | 0.69rem - 0.96rem |
| `--F4` | Font size variable for small text | 0.78rem - 1.15rem |
| `--F5` | Font size variable for medium text | 0.88rem - 1.38rem |
| `--F6` | Font size variable for large text | 0.98rem - 1.65rem |
| `--F7` | Font size variable for extra large text | 1.11rem - 1.98rem |
| `--F8` | Font size variable for 2 extra large text | 1.25rem - 2.38rem |
| `--F9` | Font size variable for 3 extra large text | 1.4rem - 2.85rem |

### Customizing Font Sizes

Expand Down
2 changes: 1 addition & 1 deletion apps/docs/tsconfig.tsbuildinfo
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 4bf3720

Please sign in to comment.