Color updates for labels
parent
d15023e1f0
commit
afe9dc82e0
|
@ -16,8 +16,7 @@
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@click="createThemeFromPreset"
|
@click="createThemeFromPreset"
|
||||||
icon="pi pi-download"
|
class="btn-design"
|
||||||
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
|
|
||||||
>
|
>
|
||||||
Create
|
Create
|
||||||
</button>
|
</button>
|
||||||
|
@ -34,8 +33,7 @@
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@click="createThemeFromFigma"
|
@click="createThemeFromFigma"
|
||||||
icon="pi pi-download"
|
class="btn-design"
|
||||||
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
|
|
||||||
>
|
>
|
||||||
Create
|
Create
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -23,8 +23,8 @@
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
:class="[
|
:class="[
|
||||||
'rounded-xl h-32 w-32 bg-transparent border border-gray-200 dark:border-gray-700 text-black dark:text-white',
|
'rounded-xl h-32 w-32 bg-transparent border border-surface-200 dark:border-surface-700 text-black dark:text-white',
|
||||||
{ 'opacity-50 cursor-auto': themeLimitReached, 'hover:border-gray-400 dark:hover:border-gray-500': !themeLimitReached }
|
{ 'opacity-50 cursor-auto': themeLimitReached, 'hover:border-surface-400 dark:hover:border-surface-500': !themeLimitReached }
|
||||||
]"
|
]"
|
||||||
@click="openNewTheme"
|
@click="openNewTheme"
|
||||||
>
|
>
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
<div v-for="theme of $appState.designer.themes" :key="theme.t_key" class="flex flex-col gap-2 relative">
|
<div v-for="theme of $appState.designer.themes" :key="theme.t_key" class="flex flex-col gap-2 relative">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="rounded-xl h-32 w-32 px-4 overflow-hidden text-ellipsis bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 text-black dark:text-white"
|
class="rounded-xl h-32 w-32 px-4 overflow-hidden text-ellipsis bg-transparent border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 text-black dark:text-white"
|
||||||
@click="loadTheme(theme)"
|
@click="loadTheme(theme)"
|
||||||
>
|
>
|
||||||
<span class="text-2xl uppercase font-bold">{{ abbrThemeName(theme) }}</span>
|
<span class="text-2xl uppercase font-bold">{{ abbrThemeName(theme) }}</span>
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
</div>
|
</div>
|
||||||
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
|
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" @click="toggleMenuOptions($event, theme)" class="hover:bg-surface-100 dark:hover:bg-surface-800 text-zinc-500 dark:text-zinc-400 flex absolute top-1 right-1 w-8 h-8 rounded-lg items-center justify-center">
|
<button type="button" @click="toggleMenuOptions($event, theme)" class="hover:bg-surface-100 dark:hover:bg-surface-800 text-surface-500 dark:text-surface-400 flex absolute top-1 right-1 w-8 h-8 rounded-lg items-center justify-center">
|
||||||
<i class="pi pi-ellipsis-h !text-xs" />
|
<i class="pi pi-ellipsis-h !text-xs" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="flex justify-between justify-items-center">
|
<div class="flex justify-between justify-items-center">
|
||||||
<label :for="inputId" class="text-xs text-zinc-700 dark:text-white block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
|
<label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
|
||||||
<button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-400 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i></button>
|
<button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-700 dark:text-white/70 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div :id="id" class="relative">
|
<div :id="id" class="relative">
|
||||||
<AutoComplete
|
<AutoComplete
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
:showEmptyMessage="false"
|
:showEmptyMessage="false"
|
||||||
:pt="{
|
:pt="{
|
||||||
pcInputText: {
|
pcInputText: {
|
||||||
root: ['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-8': type === 'color' }]
|
root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-8': type === 'color' }]
|
||||||
},
|
},
|
||||||
overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
|
overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
|
||||||
listContainer: 'max-h-40 overflow-auto',
|
listContainer: 'max-h-40 overflow-auto',
|
||||||
|
|
Loading…
Reference in New Issue