kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
feat(docs): show comparative example color uses in ui-docs
upsiflu
rodzic
1909a484c3
commit
60921c6c2d
|
|
@ -1,11 +1,16 @@
|
|||
<script setup>
|
||||
import { color } from "~/composables/colors.ts"
|
||||
import { useRoute } from "vue-router"
|
||||
|
||||
import Button from "~/components/ui/Button.vue"
|
||||
import Card from "~/components/ui/Card.vue"
|
||||
import Link from "~/components/ui/Link.vue"
|
||||
import Layout from "~/components/ui/Layout.vue"
|
||||
import Alert from "~/components/ui/Alert.vue"
|
||||
import Spacer from "~/components/ui/layout/Spacer.vue"
|
||||
|
||||
const route = useRoute();
|
||||
const here = route.path
|
||||
</script>
|
||||
|
||||
<Link disabled to="#theme-color-definitions">Want to fix colors?</Link>
|
||||
|
|
@ -570,6 +575,199 @@ For example, you want to add visible lines around ghost links and buttons when t
|
|||
- In our example, we would add the line `border-color: var(--hover-border-color);` under `&:hover` to make the outline on interactive items visible on hover.
|
||||
- Make sure to test all affected components before committing and merging the changes
|
||||
|
||||
## Overview of current styles
|
||||
|
||||
Make sure that:
|
||||
|
||||
- Contrasts meet WCAG2 requirements
|
||||
- Colors and outlines communicate the correct dose of prominence
|
||||
- All styles are different enough from each other to not be confused
|
||||
|
||||
Here is the meaning the styles should convey:
|
||||
|
||||
- **active**: The user has chosen this option
|
||||
- **Here**: The user is exactly here
|
||||
- **raised**: Things on this surface complement the main area (sidebar, aside, ...)
|
||||
- **default**: Background of the app
|
||||
- **secondary**: This is interactive! As of now, secondary things need a secondary background.
|
||||
- **primary**: Important!
|
||||
|
||||
### Links and buttons
|
||||
|
||||
---
|
||||
|
||||
<Layout flex>
|
||||
|
||||
<Card small title="Default" solid default>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
||||
---
|
||||
|
||||
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
|
||||
<Layout no-gap>
|
||||
Here
|
||||
<Link ghost :to="here"> ghost </Link>
|
||||
<Link outline :to="here"> outline </Link>
|
||||
<Link solid raised :to="here"> solid raised </Link>
|
||||
</Layout>
|
||||
<Layout no-gap>
|
||||
Elsewhere
|
||||
<Link ghost to="-"> ghost </Link>
|
||||
<Link outline to="-"> outline </Link>
|
||||
<Link solid raised to="-"> solid raised </Link>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
---
|
||||
|
||||
<Button> Button </Button>
|
||||
<Button ghost> Button ghost </Button>
|
||||
<Button outline> Button outline </Button>
|
||||
<Button solid> Button solid </Button>
|
||||
<Button solid aria-pressed="true"> Button active </Button>
|
||||
<Button disabled> Button disabled </Button>
|
||||
<Button primary> Button primary </Button>
|
||||
|
||||
---
|
||||
|
||||
<Button raised> Button raised </Button>
|
||||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button active </Button>
|
||||
<Button raised disabled> Button disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Default raised" solid default raised>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
||||
---
|
||||
|
||||
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
|
||||
<Layout no-gap>
|
||||
Here
|
||||
<Link ghost :to="here"> ghost </Link>
|
||||
<Link outline :to="here"> outline </Link>
|
||||
<Link solid raised :to="here"> solid raised </Link>
|
||||
</Layout>
|
||||
<Layout no-gap>
|
||||
Elsewhere
|
||||
<Link ghost to="-"> ghost </Link>
|
||||
<Link outline to="-"> outline </Link>
|
||||
<Link raised to="-"> solid raised </Link>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
---
|
||||
|
||||
<Button> Button </Button>
|
||||
<Button ghost> Button ghost </Button>
|
||||
<Button outline> Button outline </Button>
|
||||
<Button solid> Button solid </Button>
|
||||
<Button aria-pressed="true"> Button active </Button>
|
||||
<Button disabled> Button disabled </Button>
|
||||
<Button primary> Button primary </Button>
|
||||
|
||||
---
|
||||
|
||||
<Button raised> Button raised </Button>
|
||||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button active </Button>
|
||||
<Button raised disabled> Button disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Secondary" solid secondary>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
||||
---
|
||||
|
||||
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
|
||||
<Layout no-gap>
|
||||
Here
|
||||
<Link ghost :to="here"> ghost </Link>
|
||||
<Link outline :to="here"> outline </Link>
|
||||
<Link solid raised :to="here"> solid raised </Link>
|
||||
</Layout>
|
||||
<Layout no-gap>
|
||||
Elsewhere
|
||||
<Link ghost to="-"> ghost </Link>
|
||||
<Link outline to="-"> outline </Link>
|
||||
<Link solid raised to="-"> solid raised </Link>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
---
|
||||
|
||||
<Button> Button </Button>
|
||||
<Button ghost> Button ghost </Button>
|
||||
<Button outline> Button outline </Button>
|
||||
<Button solid> Button solid </Button>
|
||||
<Button aria-pressed="true"> Button active </Button>
|
||||
<Button disabled> Button disabled </Button>
|
||||
<Button primary> Button primary </Button>
|
||||
|
||||
---
|
||||
|
||||
<Button raised> Button raised </Button>
|
||||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button raised active </Button>
|
||||
<Button raised disabled> Button raised disabled </Button>
|
||||
</Card>
|
||||
|
||||
<Card small title="Secondary raised" solid secondary raised>
|
||||
<span>
|
||||
Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
|
||||
</span>
|
||||
|
||||
---
|
||||
|
||||
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
|
||||
<Layout no-gap>
|
||||
Here
|
||||
<Link ghost :to="here"> ghost </Link>
|
||||
<Link outline :to="here"> outline </Link>
|
||||
<Link solid raised :to="here"> solid raised </Link>
|
||||
</Layout>
|
||||
<Layout no-gap>
|
||||
Elsewhere
|
||||
<Link ghost to="-"> ghost </Link>
|
||||
<Link outline to="-"> outline </Link>
|
||||
<Link solid raised to="-"> solid raised </Link>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
---
|
||||
|
||||
<Button> Button </Button>
|
||||
<Button ghost> Button ghost </Button>
|
||||
<Button outline> Button outline </Button>
|
||||
<Button solid> Button solid </Button>
|
||||
<Button solid aria-pressed="true"> Button active </Button>
|
||||
<Button disabled> Button disabled </Button>
|
||||
<Button primary> Button primary </Button>
|
||||
|
||||
---
|
||||
|
||||
<Button raised> Button raised </Button>
|
||||
<Button raised ghost> Button raised ghost </Button>
|
||||
<Button raised outline> Button raised outline </Button>
|
||||
<Button raised solid> Button raised solid </Button>
|
||||
<Button raised aria-pressed="true"> Button active </Button>
|
||||
<Button raised disabled> Button raised disabled </Button>
|
||||
</Card>
|
||||
|
||||
</Layout>
|
||||
|
||||
<style module>
|
||||
.swatch {
|
||||
transition:all .15s, filter 0s;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue