Style: Token renaming and style organization (#6337)

## Summary

Align color names and organize style.css some more

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6337-Style-Token-renaming-and-style-organization-29a6d73d365081b69f25ce1298c67fdc)
by [Unito](https://www.unito.io)
This commit is contained in:
Alexander Brown
2025-10-28 12:13:28 -07:00
committed by GitHub
parent 0a80a288c0
commit b03cf7e11d
38 changed files with 235 additions and 406 deletions

View File

@@ -16,7 +16,7 @@
/>
<div
v-else
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 via-gray-800 to-charcoal-400"
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
></div>
<AssetBadgeGroup :badges="asset.badges" />
</div>
@@ -40,7 +40,7 @@
:class="
cn(
'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
'text-stone-100',
'text-ash-500',
'dark-theme:text-slate-100'
)
"
@@ -51,11 +51,7 @@
</div>
<div
:class="
cn(
'flex gap-4 text-xs',
'text-stone-400',
'dark-theme:text-stone-300'
)
cn('flex gap-4 text-xs', 'text-stone-400', 'dark-theme:text-ash-300')
"
>
<span v-if="asset.stats.stars" class="flex items-center gap-1">
@@ -107,7 +103,7 @@ const cardClasses = computed(() => {
]
if (!props.interactive) {
return cn(...base, 'bg-gray-100 dark-theme:bg-charcoal-800')
return cn(...base, 'bg-smoke-100 dark-theme:bg-charcoal-800')
}
return cn(
@@ -115,10 +111,10 @@ const cardClasses = computed(() => {
'group',
'appearance-none bg-transparent p-0 m-0',
'font-inherit text-inherit outline-none cursor-pointer text-left',
'bg-gray-100 dark-theme:bg-charcoal-800',
'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
'bg-smoke-100 dark-theme:bg-charcoal-800',
'hover:bg-smoke-200 dark-theme:hover:bg-charcoal-600',
'border-none',
'focus:outline-solid outline-blue-100 outline-4'
'focus:outline-solid outline-azure-600 outline-4'
)
})