MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs(ui-docs): display funkwhale colors everywhere

This commit is contained in:
upsiflu 2025-01-09 15:02:36 +01:00
parent 2244d4d88a
commit 304cf2e90f
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/ui-docs/.vitepress/theme/Theme.vue
View File

@ -16,7 +16,14 @@ const { Theme } = DefaultTheme
} }
.Layout { .Layout {
background-color: light-dark(white, black); --vp-code-block-bg: light-dark(var(--fw-beige-200), var(--fw-gray-900));
--vp-c-bg-alt: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-c-divider: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-code-line-highlight-color: light-dark(var(--fw-beige-300), var(--fw-gray-850));
--vp-custom-block-details-bg: light-dark(var(--fw-beige-400), var(--fw-gray-800));
--vp-nav-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
--vp-sidebar-bg-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
background-color: light-dark(var(--fw-beige-100), var(--fw-gray-960));
} }
.VPNavBarTitle .title { .VPNavBarTitle .title {

18
front/ui-docs/components/ui/layout.md
View File

@ -24,29 +24,29 @@ The following containers are responsive. Change your window's size or select a d
<Layout flex style="--gap:8px"> <Layout flex style="--gap:8px">
<Card width="163px" title="flex" to="/components/ui/layout/flex" > <Card width="163px" title="flex" to="/components/ui/layout/flex" >
<Layout flex> <Layout flex style="outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" /> <Button primary icon="bi-eye" />
<Button secondary icon="bi-eye" /> <Button outline icon="bi-eye" />
<Button destructive icon="bi-eye" /> <Button destructive icon="bi-eye" />
</Layout> </Layout>
</Card> </Card>
<Card width="163px" title="grid" to="/components/ui/layout/grid" > <Card width="163px" title="grid" to="/components/ui/layout/grid" >
<Layout grid column-width="40"> <Layout grid column-width="40" style="outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" /> <Button primary icon="bi-eye" />
<Button secondary icon="bi-eye" style="grid-row: span 2; height: 100%;" /> <Button outline icon="bi-eye" style="grid-row: span 2; height: 100%;" />
<Button destructive icon="bi-eye" /> <Button destructive icon="bi-eye" />
</Layout> </Layout>
</Card> </Card>
<Card width="163px" title="stack" to="/components/ui/layout/stack" > <Card width="163px" title="stack" to="/components/ui/layout/stack">
<Layout stack style="--gap:0; margin:-8px;"> <Layout stack style="--gap:0; margin:-8px; outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" /> <Button primary icon="bi-eye" />
<Button secondary icon="bi-eye" /> <Button outline icon="bi-eye" />
<Button destructive icon="bi-eye" /> <Button destructive icon="bi-eye" />
</Layout></Card> </Layout></Card>
<Card width="163px" title="columns" to="./layout/columns" > <Card width="163px" title="columns" to="./layout/columns" >
<Layout columns column-width="40"> <Layout columns column-width="40" style="outline: 4px dashed var(--border-color)">
<Button primary icon="bi-eye" /> <Button primary icon="bi-eye" />
<Button secondary icon="bi-eye" /> <Button outline icon="bi-eye" />
<Button destructive icon="bi-eye" /> <Button destructive icon="bi-eye" />
</Layout></Card> </Layout></Card>
</Layout> </Layout>