arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 02:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: use new syntax for css variables (#3258)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-02-07 11:24:14 +01:00
committed by GitHub
parent 8e7c52e1fb
commit 104852a55c
230 changed files with 12934 additions and 12958 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
devtools/app/app.vue
View File

@@ -89,9 +89,9 @@ const isDark = computed({
</script>
<template>
<UApp class="flex justify-center items-center h-screen w-full relative font-sans">
<UApp>
<div v-if="status === 'pending' || error || !component || !components?.length">
<div v-if="error" class="flex flex-col justify-center items-center h-screen w-screen text-center text-[var(--ui-color-error-500)]">
<div v-if="error" class="flex flex-col justify-center items-center h-screen w-screen text-center text-(--ui-color-error-500)">
<UILogo class="h-8" />
<UIcon name="i-lucide-circle-alert" size="20" class="mt-2" />
<p>
@@ -100,9 +100,7 @@ const isDark = computed({
</div>
</div>
<template v-else>
<div
class="top-0 h-[49px] border-b border-[var(--ui-border)] flex justify-center"
>
<div class="top-0 h-[49px] border-b border-(--ui-border) flex justify-center">
<span />
<UInputMenu
@@ -114,8 +112,8 @@ const isDark = computed({
icon="i-lucide-search"
/>
<div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-[var(--ui-bg)]">
<div class="col-span-1 border-r border-[var(--ui-border)] hidden xl:block overflow-y-auto">
<div class="absolute top-[49px] bottom-0 inset-x-0 grid xl:grid-cols-8 grid-cols-4 bg-(--ui-bg)">
<div class="col-span-1 border-r border-(--ui-border) hidden xl:block overflow-y-auto">
<UNavigationMenu
:items="components.map((c) => ({ ...c, active: c.slug === component?.slug, onSelect: () => component = c }))"
orientation="vertical"
@@ -144,10 +142,10 @@ const isDark = computed({
</div>
</div>
<div class="border-l border-[var(--ui-border)] flex flex-col col-span-2 overflow-y-auto">
<UTabs color="neutral" variant="link" :items="tabs" class="relative" :ui="{ list: 'sticky top-0 bg-[var(--ui-bg)] z-50' }">
<div class="border-l border-(--ui-border) flex flex-col col-span-2 overflow-y-auto">
<UTabs color="neutral" variant="link" :items="tabs" class="relative" :ui="{ list: 'sticky top-0 bg-(--ui-bg) z-50' }">
<template #props>
<div v-for="prop in componentPropsMeta" :key="'prop-' + prop.name" class="px-3 py-5 border-b border-[var(--ui-border)]">
<div v-for="prop in componentPropsMeta" :key="'prop-' + prop.name" class="px-3 py-5 border-b border-(--ui-border)">
<ComponentPropInput
v-model="componentProps[prop.name]"
:meta="prop"
@@ -170,39 +168,17 @@ const isDark = computed({
@theme {
--font-sans: 'DM Sans', sans-serif;
--color-primary-50: var(--ui-color-primary-50);
--color-primary-100: var(--ui-color-primary-100);
--color-primary-200: var(--ui-color-primary-200);
--color-primary-300: var(--ui-color-primary-300);
--color-primary-400: var(--ui-color-primary-400);
--color-primary-500: var(--ui-color-primary-500);
--color-primary-600: var(--ui-color-primary-600);
--color-primary-700: var(--ui-color-primary-700);
--color-primary-800: var(--ui-color-primary-800);
--color-primary-900: var(--ui-color-primary-900);
--color-primary-950: var(--ui-color-primary-950);
--color-neutral-50: var(--ui-color-neutral-50);
--color-neutral-100: var(--ui-color-neutral-100);
--color-neutral-200: var(--ui-color-neutral-200);
--color-neutral-300: var(--ui-color-neutral-300);
--color-neutral-400: var(--ui-color-neutral-400);
--color-neutral-500: var(--ui-color-neutral-500);
--color-neutral-600: var(--ui-color-neutral-600);
--color-neutral-700: var(--ui-color-neutral-700);
--color-neutral-800: var(--ui-color-neutral-800);
--color-neutral-900: var(--ui-color-neutral-900);
--color-neutral-950: var(--ui-color-neutral-950);
}
:root {
--ui-border: var(--ui-color-neutral-200);
--ui-bg: white;
}
.dark {
--ui-border: var(--ui-color-neutral-800);
--ui-bg: var(--ui-color-neutral-900);
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
.shiki