feat: update color scheme to use blue primary palette and remove unused styles
This commit is contained in:
Edgar Mendez Mendoza
parent
dd9ae71bd6
commit
47e43ae84e
@ -16,10 +16,10 @@ import AppTopbar from './components/Holos/AppTopbar.vue';
|
||||
<!-- Tarjeta de ejemplo 1 -->
|
||||
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
||||
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
||||
Colores Primarios
|
||||
Color Primario
|
||||
</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
||||
Los colores primarios se usan para botones, enlaces y elementos destacados.
|
||||
El color primario azul se usa para botones, enlaces y elementos destacados.
|
||||
</p>
|
||||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors">
|
||||
Botón Primario
|
||||
@ -59,14 +59,14 @@ import AppTopbar from './components/Holos/AppTopbar.vue';
|
||||
<!-- Tarjeta de ejemplo 4 -->
|
||||
<div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
|
||||
<h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
|
||||
Paleta de Colores
|
||||
Personalización
|
||||
</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 mb-4">
|
||||
Haz clic en el ícono de paleta en la barra superior para cambiar colores.
|
||||
Haz clic en el ícono de paleta en la barra superior para cambiar el color de superficie.
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="pi pi-palette text-2xl text-primary"></i>
|
||||
<span class="text-surface-700 dark:text-surface-300">16+ colores disponibles</span>
|
||||
<span class="text-surface-700 dark:text-surface-300">5 colores de superficie</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,20 +4,20 @@
|
||||
@custom-variant dark (&:where(.p-dark, .p-dark *));
|
||||
|
||||
:root {
|
||||
/* Primary Colors - Emerald por defecto */
|
||||
--p-primary-50: #ecfdf5;
|
||||
--p-primary-100: #d1fae5;
|
||||
--p-primary-200: #a7f3d0;
|
||||
--p-primary-300: #6ee7b7;
|
||||
--p-primary-400: #34d399;
|
||||
--p-primary-500: #10b981;
|
||||
--p-primary-600: #059669;
|
||||
--p-primary-700: #047857;
|
||||
--p-primary-800: #065f46;
|
||||
--p-primary-900: #064e3b;
|
||||
--p-primary-950: #022c22;
|
||||
/* Primary Colors - Blue */
|
||||
--p-primary-50: #eff6ff;
|
||||
--p-primary-100: #dbeafe;
|
||||
--p-primary-200: #bfdbfe;
|
||||
--p-primary-300: #93c5fd;
|
||||
--p-primary-400: #60a5fa;
|
||||
--p-primary-500: #3b82f6;
|
||||
--p-primary-600: #2563eb;
|
||||
--p-primary-700: #1d4ed8;
|
||||
--p-primary-800: #1e40af;
|
||||
--p-primary-900: #1e3a8a;
|
||||
--p-primary-950: #172554;
|
||||
|
||||
/* Surface Colors - Slate por defecto */
|
||||
/* Surface Colors - Slate */
|
||||
--p-surface-0: #ffffff;
|
||||
--p-surface-50: #f8fafc;
|
||||
--p-surface-100: #f1f5f9;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useLayout } from "../../composables/useLayout";
|
||||
|
||||
const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
|
||||
const { surfaces, surface, updateColors } = useLayout();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -9,7 +9,8 @@ const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
|
||||
class="absolute top-16 right-0 w-64 p-4 bg-white dark:bg-surface-900 rounded-md shadow-lg border border-surface-200 dark:border-surface-700 origin-top z-50 hidden"
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<!-- Selector de color primario oculto ya que solo hay uno -->
|
||||
<!-- <div>
|
||||
<span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color Primario</span>
|
||||
<div class="pt-2 flex gap-2 flex-wrap justify-between">
|
||||
<button
|
||||
@ -27,7 +28,7 @@ const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
|
||||
@click="updateColors('primary', pc.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div>
|
||||
<span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color de Superficie</span>
|
||||
<div class="pt-2 flex gap-2 flex-wrap justify-between">
|
||||
|
||||
@ -2,156 +2,12 @@ import { updatePrimaryPalette, updateSurfacePalette } from "@primeuix/themes";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const appState = ref({
|
||||
primary: "emerald",
|
||||
primary: "blue",
|
||||
surface: "slate",
|
||||
darkMode: false
|
||||
});
|
||||
|
||||
const primaryColors = ref([
|
||||
{
|
||||
name: "emerald",
|
||||
palette: {
|
||||
50: "#ecfdf5",
|
||||
100: "#d1fae5",
|
||||
200: "#a7f3d0",
|
||||
300: "#6ee7b7",
|
||||
400: "#34d399",
|
||||
500: "#10b981",
|
||||
600: "#059669",
|
||||
700: "#047857",
|
||||
800: "#065f46",
|
||||
900: "#064e3b",
|
||||
950: "#022c22"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "green",
|
||||
palette: {
|
||||
50: "#f0fdf4",
|
||||
100: "#dcfce7",
|
||||
200: "#bbf7d0",
|
||||
300: "#86efac",
|
||||
400: "#4ade80",
|
||||
500: "#22c55e",
|
||||
600: "#16a34a",
|
||||
700: "#15803d",
|
||||
800: "#166534",
|
||||
900: "#14532d",
|
||||
950: "#052e16"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "lime",
|
||||
palette: {
|
||||
50: "#f7fee7",
|
||||
100: "#ecfccb",
|
||||
200: "#d9f99d",
|
||||
300: "#bef264",
|
||||
400: "#a3e635",
|
||||
500: "#84cc16",
|
||||
600: "#65a30d",
|
||||
700: "#4d7c0f",
|
||||
800: "#3f6212",
|
||||
900: "#365314",
|
||||
950: "#1a2e05"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "orange",
|
||||
palette: {
|
||||
50: "#fff7ed",
|
||||
100: "#ffedd5",
|
||||
200: "#fed7aa",
|
||||
300: "#fdba74",
|
||||
400: "#fb923c",
|
||||
500: "#f97316",
|
||||
600: "#ea580c",
|
||||
700: "#c2410c",
|
||||
800: "#9a3412",
|
||||
900: "#7c2d12",
|
||||
950: "#431407"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "amber",
|
||||
palette: {
|
||||
50: "#fffbeb",
|
||||
100: "#fef3c7",
|
||||
200: "#fde68a",
|
||||
300: "#fcd34d",
|
||||
400: "#fbbf24",
|
||||
500: "#f59e0b",
|
||||
600: "#d97706",
|
||||
700: "#b45309",
|
||||
800: "#92400e",
|
||||
900: "#78350f",
|
||||
950: "#451a03"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "yellow",
|
||||
palette: {
|
||||
50: "#fefce8",
|
||||
100: "#fef9c3",
|
||||
200: "#fef08a",
|
||||
300: "#fde047",
|
||||
400: "#facc15",
|
||||
500: "#eab308",
|
||||
600: "#ca8a04",
|
||||
700: "#a16207",
|
||||
800: "#854d0e",
|
||||
900: "#713f12",
|
||||
950: "#422006"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "teal",
|
||||
palette: {
|
||||
50: "#f0fdfa",
|
||||
100: "#ccfbf1",
|
||||
200: "#99f6e4",
|
||||
300: "#5eead4",
|
||||
400: "#2dd4bf",
|
||||
500: "#14b8a6",
|
||||
600: "#0d9488",
|
||||
700: "#0f766e",
|
||||
800: "#115e59",
|
||||
900: "#134e4a",
|
||||
950: "#042f2e"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "cyan",
|
||||
palette: {
|
||||
50: "#ecfeff",
|
||||
100: "#cffafe",
|
||||
200: "#a5f3fc",
|
||||
300: "#67e8f9",
|
||||
400: "#22d3ee",
|
||||
500: "#06b6d4",
|
||||
600: "#0891b2",
|
||||
700: "#0e7490",
|
||||
800: "#155e75",
|
||||
900: "#164e63",
|
||||
950: "#083344"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "sky",
|
||||
palette: {
|
||||
50: "#f0f9ff",
|
||||
100: "#e0f2fe",
|
||||
200: "#bae6fd",
|
||||
300: "#7dd3fc",
|
||||
400: "#38bdf8",
|
||||
500: "#0ea5e9",
|
||||
600: "#0284c7",
|
||||
700: "#0369a1",
|
||||
800: "#075985",
|
||||
900: "#0c4a6e",
|
||||
950: "#082f49"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "blue",
|
||||
palette: {
|
||||
@ -168,102 +24,6 @@ const primaryColors = ref([
|
||||
950: "#172554"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "indigo",
|
||||
palette: {
|
||||
50: "#eef2ff",
|
||||
100: "#e0e7ff",
|
||||
200: "#c7d2fe",
|
||||
300: "#a5b4fc",
|
||||
400: "#818cf8",
|
||||
500: "#6366f1",
|
||||
600: "#4f46e5",
|
||||
700: "#4338ca",
|
||||
800: "#3730a3",
|
||||
900: "#312e81",
|
||||
950: "#1e1b4b"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "violet",
|
||||
palette: {
|
||||
50: "#f5f3ff",
|
||||
100: "#ede9fe",
|
||||
200: "#ddd6fe",
|
||||
300: "#c4b5fd",
|
||||
400: "#a78bfa",
|
||||
500: "#8b5cf6",
|
||||
600: "#7c3aed",
|
||||
700: "#6d28d9",
|
||||
800: "#5b21b6",
|
||||
900: "#4c1d95",
|
||||
950: "#2e1065"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "purple",
|
||||
palette: {
|
||||
50: "#faf5ff",
|
||||
100: "#f3e8ff",
|
||||
200: "#e9d5ff",
|
||||
300: "#d8b4fe",
|
||||
400: "#c084fc",
|
||||
500: "#a855f7",
|
||||
600: "#9333ea",
|
||||
700: "#7e22ce",
|
||||
800: "#6b21a8",
|
||||
900: "#581c87",
|
||||
950: "#3b0764"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "fuchsia",
|
||||
palette: {
|
||||
50: "#fdf4ff",
|
||||
100: "#fae8ff",
|
||||
200: "#f5d0fe",
|
||||
300: "#f0abfc",
|
||||
400: "#e879f9",
|
||||
500: "#d946ef",
|
||||
600: "#c026d3",
|
||||
700: "#a21caf",
|
||||
800: "#86198f",
|
||||
900: "#701a75",
|
||||
950: "#4a044e"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "pink",
|
||||
palette: {
|
||||
50: "#fdf2f8",
|
||||
100: "#fce7f3",
|
||||
200: "#fbcfe8",
|
||||
300: "#f9a8d4",
|
||||
400: "#f472b6",
|
||||
500: "#ec4899",
|
||||
600: "#db2777",
|
||||
700: "#be185d",
|
||||
800: "#9d174d",
|
||||
900: "#831843",
|
||||
950: "#500724"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "rose",
|
||||
palette: {
|
||||
50: "#fff1f2",
|
||||
100: "#ffe4e6",
|
||||
200: "#fecdd3",
|
||||
300: "#fda4af",
|
||||
400: "#fb7185",
|
||||
500: "#f43f5e",
|
||||
600: "#e11d48",
|
||||
700: "#be123c",
|
||||
800: "#9f1239",
|
||||
900: "#881337",
|
||||
950: "#4c0519"
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const surfaces = ref([
|
||||
@ -354,6 +114,40 @@ const surfaces = ref([
|
||||
}
|
||||
]);
|
||||
|
||||
// Inicializar el color azul al cargar
|
||||
const bluePalette = {
|
||||
50: "#eff6ff",
|
||||
100: "#dbeafe",
|
||||
200: "#bfdbfe",
|
||||
300: "#93c5fd",
|
||||
400: "#60a5fa",
|
||||
500: "#3b82f6",
|
||||
600: "#2563eb",
|
||||
700: "#1d4ed8",
|
||||
800: "#1e40af",
|
||||
900: "#1e3a8a",
|
||||
950: "#172554"
|
||||
};
|
||||
|
||||
const slatePalette = {
|
||||
0: "#ffffff",
|
||||
50: "#f8fafc",
|
||||
100: "#f1f5f9",
|
||||
200: "#e2e8f0",
|
||||
300: "#cbd5e1",
|
||||
400: "#94a3b8",
|
||||
500: "#64748b",
|
||||
600: "#475569",
|
||||
700: "#334155",
|
||||
800: "#1e293b",
|
||||
900: "#0f172a",
|
||||
950: "#020617"
|
||||
};
|
||||
|
||||
// Aplicar los colores por defecto inmediatamente
|
||||
updatePrimaryPalette(bluePalette);
|
||||
updateSurfacePalette(slatePalette);
|
||||
|
||||
export function useLayout() {
|
||||
function setPrimary(value: string) {
|
||||
appState.value.primary = value;
|
||||
|
||||
22
src/main.ts
22
src/main.ts
@ -1,16 +1,36 @@
|
||||
import "./assets/styles/main.css";
|
||||
|
||||
import Aura from "@primeuix/themes/aura";
|
||||
import { definePreset } from "@primeuix/themes";
|
||||
import PrimeVue from "primevue/config";
|
||||
import StyleClass from "primevue/styleclass";
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
|
||||
// Crear un preset personalizado basado en Aura con color azul
|
||||
const MyPreset = definePreset(Aura, {
|
||||
semantic: {
|
||||
primary: {
|
||||
50: "{blue.50}",
|
||||
100: "{blue.100}",
|
||||
200: "{blue.200}",
|
||||
300: "{blue.300}",
|
||||
400: "{blue.400}",
|
||||
500: "{blue.500}",
|
||||
600: "{blue.600}",
|
||||
700: "{blue.700}",
|
||||
800: "{blue.800}",
|
||||
900: "{blue.900}",
|
||||
950: "{blue.950}"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
preset: MyPreset,
|
||||
options: {
|
||||
darkModeSelector: ".p-dark",
|
||||
},
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user