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
:x="(d: Data, i: number) => i"
:y="(d: Data) => d.total"
color="#41b883"
color="hsl(var(--primary))"
:rounded-corners="4"
: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,
bottom: 0,
}"
:style="{
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
>
<VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
<VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
</VisXYContainer>
</div>
</CardContent>
@ -91,7 +86,7 @@ const lineY = (d: Data) => d.revenue
:x="lineX"
:y="(d: Data) => d.subscription"
:bar-padding="0.1"
:rounded-corners="0" color="var(--theme-primary)"
:rounded-corners="0" color="hsl(var(--primary))"
/>
</VisXYContainer>
</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 { 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)
type Data = typeof data[number]
@ -84,16 +80,13 @@ const data = [
:data="data"
height="60px"
:style="{
'opacity': 0.2,
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
opacity: 0.2,
}"
>
<VisStackedBar
:x="(d: Data, i :number) => i"
:y="(d: Data) => d.goal"
color="var(--theme-primary)"
color="hsl(var(--primary))"
:bar-padding="0.1"
: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'
import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
type Data = typeof data[number]
const data = [
{ average: 400, today: 240 },
@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
bottom: 0,
}"
:style="{
'--theme-primary': themePrimary,
'--vis-tooltip-padding': '0px',
'--vis-tooltip-background-color': 'transparent',
'--vis-tooltip-border-color': 'transparent',
}"
>
<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 } }" />
<VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
<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="hsl(var(--primary))" color="white" />
<VisCrosshair :template="template" />
</VisXYContainer>
</div>

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

@ -1,10 +1,6 @@
<script setup lang="ts">
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 { useConfigStore } from '@/stores/config'
import { themes } from '@/lib/registry/themes'
type Data = typeof data[number]
const data = [
@ -18,11 +14,6 @@ const data = [
{ 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 lineY = (d: Data) => d.revenue
</script>
@ -52,14 +43,9 @@ const lineY = (d: Data) => d.revenue
left: 10,
bottom: 0,
}"
:style="{
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
>
<VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
<VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
<VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
</VisXYContainer>
</div>
</CardContent>
@ -81,17 +67,13 @@ const lineY = (d: Data) => d.revenue
<div class="mt-4 h-[80px]">
<VisXYContainer
height="80px" :data="data" :style="{
'--theme-primary': `hsl(${
theme?.cssVars[isDark ? 'dark' : 'light'].primary
})`,
}"
height="80px" :data="data"
>
<VisStackedBar
:x="lineX"
:y="(d: Data) => d.subscription"
:bar-padding="0.1"
:rounded-corners="0" color="var(--theme-primary)"
:rounded-corners="0" color="hsl(var(--primary))"
/>
</VisXYContainer>
</div>

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

@ -12,9 +12,6 @@ import {
CardHeader,
CardTitle,
} from '@/lib/registry/new-york/ui/card'
import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
const goal = ref(350)
@ -80,14 +77,13 @@ const data = [
:data="data"
height="60px"
:style="{
'opacity': 0.2,
'--theme-primary': themePrimary,
opacity: 0.2,
}"
>
<VisStackedBar
:x="(d: Data, i :number) => i"
:y="(d: Data) => d.goal"
color="var(--theme-primary)"
color="hsl(var(--primary))"
:bar-padding="0.1"
: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'
import { useConfigStore } from '@/stores/config'
const { themePrimary } = useConfigStore()
type Data = typeof data[number]
const data = [
{ average: 400, today: 240 },
@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
bottom: 0,
}"
:style="{
'--theme-primary': themePrimary,
'--vis-tooltip-padding': '0px',
'--vis-tooltip-background-color': 'transparent',
'--vis-tooltip-border-color': 'transparent',
}"
>
<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 } }" />
<VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
<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="hsl(var(--primary))" color="white" />
<VisCrosshair :template="template" />
</VisXYContainer>
</div>