refactor(module)!: implement design system with CSS variables (#2298)

This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions

View File

@@ -17,11 +17,11 @@ prettier: true
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Size
@@ -36,11 +36,11 @@ props:
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Orientation
@@ -55,11 +55,11 @@ props:
slots:
default: |
<UButton color="gray" variant="subtle" label="Submit" />
<UButton color="gray" variant="outline" label="Cancel" />
<UButton color="neutral" variant="subtle" label="Submit" />
<UButton color="neutral" variant="outline" label="Cancel" />
---
:u-button{color="gray" variant="subtle" label="Submit"}
:u-button{color="gray" variant="outline" label="Cancel"}
:u-button{color="neutral" variant="subtle" label="Submit"}
:u-button{color="neutral" variant="outline" label="Cancel"}
::
## Examples
@@ -74,12 +74,12 @@ prettier: true
slots:
default: |
<UInput color="gray" variant="outline" placeholder="Enter token" />
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UButton color="gray" variant="subtle" icon="i-heroicons-clipboard-document" />
<UButton color="neutral" variant="subtle" icon="i-heroicons-clipboard-document" />
---
:u-input{color="gray" variant="outline" placeholder="Enter token"}
:u-button{color="gray" variant="subtle" icon="i-heroicons-clipboard-document"}
:u-input{color="neutral" variant="outline" placeholder="Enter token"}
:u-button{color="neutral" variant="subtle" icon="i-heroicons-clipboard-document"}
::
### With tooltip