Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update color to use the themePrimary

Browse Source
This commit is contained in:
zernonia 2023-11-10 19:13:00 +08:00
parent 2a87e0fa2e
commit f036029adb
7 changed files with 16 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/examples/dashboard/components/Overview.vue
View File

@ -23,7 +23,7 @@ const data = [
<VisStackedBar <VisStackedBar
:x="(d: Data, i: number) => i" :x="(d: Data, i: number) => i"
:y="(d: Data) => d.total" :y="(d: Data) => d.total"
color="#41b883" color="hsl(var(--primary))"
:rounded-corners="4" :rounded-corners="4"
:bar-padding="0.15" :bar-padding="0.15"
/> />

11
apps/www/src/lib/registry/default/example/CardStats.vue
View File

@ -52,14 +52,9 @@ const lineY = (d: Data) => d.revenue
left: 10, left: 10,
bottom: 0, bottom: 0,
}" }"
:style="{
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
> >
<VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" /> <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" /> <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
</VisXYContainer> </VisXYContainer>
</div> </div>
</CardContent> </CardContent>
@ -91,7 +86,7 @@ const lineY = (d: Data) => d.revenue
:x="lineX" :x="lineX"
:y="(d: Data) => d.subscription" :y="(d: Data) => d.subscription"
:bar-padding="0.1" :bar-padding="0.1"
:rounded-corners="0" color="var(--theme-primary)" :rounded-corners="0" color="hsl(var(--primary))"
/> />
</VisXYContainer> </VisXYContainer>
</div> </div>

11
apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
View File

@ -16,10 +16,6 @@ import {
import { themes } from '@/lib/registry/themes' import { themes } from '@/lib/registry/themes'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
const { isDark } = useData()
const cfg = useConfigStore()
const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
const goal = ref(350) const goal = ref(350)
type Data = typeof data[number] type Data = typeof data[number]
@ -84,16 +80,13 @@ const data = [
:data="data" :data="data"
height="60px" height="60px"
:style="{ :style="{
'opacity': 0.2, opacity: 0.2,
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}" }"
> >
<VisStackedBar <VisStackedBar
:x="(d: Data, i :number) => i" :x="(d: Data, i :number) => i"
:y="(d: Data) => d.goal" :y="(d: Data) => d.goal"
color="var(--theme-primary)" color="hsl(var(--primary))"
:bar-padding="0.1" :bar-padding="0.1"
:rounded-corners="0" :rounded-corners="0"
/> />

7
apps/www/src/lib/registry/default/example/Cards/Metric.vue
View File

@ -10,8 +10,6 @@ import {
} from '@/lib/registry/default/ui/card' } from '@/lib/registry/default/ui/card'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
type Data = typeof data[number] type Data = typeof data[number]
const data = [ const data = [
{ average: 400, today: 240 }, { average: 400, today: 240 },
@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
bottom: 0, bottom: 0,
}" }"
:style="{ :style="{
'--theme-primary': themePrimary,
'--vis-tooltip-padding': '0px', '--vis-tooltip-padding': '0px',
'--vis-tooltip-background-color': 'transparent', '--vis-tooltip-background-color': 'transparent',
'--vis-tooltip-border-color': 'transparent', '--vis-tooltip-border-color': 'transparent',
}" }"
> >
<VisTooltip /> <VisTooltip />
<VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" /> <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
<VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" /> <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
<VisCrosshair :template="template" /> <VisCrosshair :template="template" />
</VisXYContainer> </VisXYContainer>
</div> </div>

26
apps/www/src/lib/registry/new-york/example/CardStats.vue
View File

@ -1,10 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue' import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
import { computed } from 'vue'
import { useData } from 'vitepress'
import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
import { useConfigStore } from '@/stores/config'
import { themes } from '@/lib/registry/themes'
type Data = typeof data[number] type Data = typeof data[number]
const data = [ const data = [
@ -18,11 +14,6 @@ const data = [
{ revenue: 26475, subscription: 189 }, { revenue: 26475, subscription: 189 },
] ]
const cfg = useConfigStore()
const { isDark } = useData()
const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
const lineX = (d: Data, i: number) => i const lineX = (d: Data, i: number) => i
const lineY = (d: Data) => d.revenue const lineY = (d: Data) => d.revenue
</script> </script>
@ -52,14 +43,9 @@ const lineY = (d: Data) => d.revenue
left: 10, left: 10,
bottom: 0, bottom: 0,
}" }"
:style="{
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
> >
<VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" /> <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" /> <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
</VisXYContainer> </VisXYContainer>
</div> </div>
</CardContent> </CardContent>
@ -81,17 +67,13 @@ const lineY = (d: Data) => d.revenue
<div class="mt-4 h-[80px]"> <div class="mt-4 h-[80px]">
<VisXYContainer <VisXYContainer
height="80px" :data="data" :style="{ height="80px" :data="data"
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
> >
<VisStackedBar <VisStackedBar
:x="lineX" :x="lineX"
:y="(d: Data) => d.subscription" :y="(d: Data) => d.subscription"
:bar-padding="0.1" :bar-padding="0.1"
:rounded-corners="0" color="var(--theme-primary)" :rounded-corners="0" color="hsl(var(--primary))"
/> />
</VisXYContainer> </VisXYContainer>
</div> </div>

8
apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
View File

@ -12,9 +12,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from '@/lib/registry/new-york/ui/card' } from '@/lib/registry/new-york/ui/card'
import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
const goal = ref(350) const goal = ref(350)
@ -80,14 +77,13 @@ const data = [
:data="data" :data="data"
height="60px" height="60px"
:style="{ :style="{
'opacity': 0.2, opacity: 0.2,
'--theme-primary': themePrimary,
}" }"
> >
<VisStackedBar <VisStackedBar
:x="(d: Data, i :number) => i" :x="(d: Data, i :number) => i"
:y="(d: Data) => d.goal" :y="(d: Data) => d.goal"
color="var(--theme-primary)" color="hsl(var(--primary))"
:bar-padding="0.1" :bar-padding="0.1"
:rounded-corners="0" :rounded-corners="0"
/> />

7
apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
View File

@ -10,8 +10,6 @@ import {
} from '@/lib/registry/new-york/ui/card' } from '@/lib/registry/new-york/ui/card'
import { useConfigStore } from '@/stores/config' import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
type Data = typeof data[number] type Data = typeof data[number]
const data = [ const data = [
{ average: 400, today: 240 }, { average: 400, today: 240 },
@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
bottom: 0, bottom: 0,
}" }"
:style="{ :style="{
'--theme-primary': themePrimary,
'--vis-tooltip-padding': '0px', '--vis-tooltip-padding': '0px',
'--vis-tooltip-background-color': 'transparent', '--vis-tooltip-background-color': 'transparent',
'--vis-tooltip-border-color': 'transparent', '--vis-tooltip-border-color': 'transparent',
}" }"
> >
<VisTooltip /> <VisTooltip />
<VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" /> <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
<VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" /> <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
<VisCrosshair :template="template" /> <VisCrosshair :template="template" />
</VisXYContainer> </VisXYContainer>
</div> </div>