arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 20:28:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ThemePicker): improve design

Browse Source
This commit is contained in:
Benjamin Canac
2025-02-15 18:25:19 +01:00
parent 76c527d8b9
commit fa92053116
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/theme-picker/ThemePicker.vue
View File

@@ -140,7 +140,7 @@ function setBlackAsPrimary(value: boolean) {
Theme Theme
</legend> </legend>
<div class="flex gap-1 -mx-2"> <div class="grid grid-cols-3 gap-1 -mx-2">
<ThemePickerButton <ThemePickerButton
v-for="m in modes" v-for="m in modes"
:key="m.label" :key="m.label"

7
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -11,15 +11,16 @@ defineProps<{
<UButton <UButton
size="sm" size="sm"
color="neutral" color="neutral"
variant="outline"
:icon="icon" :icon="icon"
:label="label" :label="label"
:variant="selected ? 'soft' : 'outline'" class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
class="capitalize ring-(--ui-border) rounded-(--ui-radius) text-[11px]" :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
> >
<template v-if="chip" #leading> <template v-if="chip" #leading>
<slot name="leading"> <slot name="leading">
<span <span
class="inline-block w-2 h-2 rounded-full" class="inline-block size-2 rounded-full"
:class="`bg-(--color-light) dark:bg-(--color-dark)`" :class="`bg-(--color-light) dark:bg-(--color-dark)`"
:style="{ :style="{
'--color-light': `var(--color-${chip}-500)`, '--color-light': `var(--color-${chip}-500)`,