mahdium/portfolio
1
0
Fork 0
mirror of https://github.com/mmahdium/portfolio.git synced 2026-09-28 02:21:41 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat: update theme color usage and enhance button styles across components

Browse Source
This commit is contained in:
mahdiarghyani
2025-12-15 13:15:12 +03:30
parent 4141593875
commit 7c566b5752
4 changed files with 409 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+156 -57
View File
@@ -21,18 +21,6 @@
@theme { @theme {
--font-sans: 'Geist', 'DM Sans', '-apple-system', 'ui-sans-serif', 'system-ui', 'sans-serif'; --font-sans: 'Geist', 'DM Sans', '-apple-system', 'ui-sans-serif', 'system-ui', 'sans-serif';
--font-display: 'Space Grotesk', 'Geist', 'ui-sans-serif', 'sans-serif'; --font-display: 'Space Grotesk', 'Geist', 'ui-sans-serif', 'sans-serif';
--color-primary-50: oklch(0.98 0.01 280);
--color-primary-100: oklch(0.95 0.03 280);
--color-primary-200: oklch(0.89 0.08 280);
--color-primary-300: oklch(0.80 0.15 280);
--color-primary-400: oklch(0.70 0.22 280);
--color-primary-500: oklch(0.60 0.25 280);
--color-primary-600: oklch(0.50 0.22 280);
--color-primary-700: oklch(0.42 0.18 280);
--color-primary-800: oklch(0.34 0.14 280);
--color-primary-900: oklch(0.28 0.10 280);
--color-primary-950: oklch(0.18 0.06 280);
} }
@layer base { @layer base {
@@ -213,7 +201,7 @@
h2, h2,
h3 { h3 {
@apply font-display tracking-tight font-bold; @apply font-display tracking-tight font-bold;
background: linear-gradient(135deg, currentColor 0%, color-mix(in oklch, currentColor, violet 30%) 100%); background: linear-gradient(135deg, currentColor 0%, color-mix(in oklch, currentColor, var(--ui-color-primary-500) 30%) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
} }
@@ -234,8 +222,31 @@
} }
@layer utilities { @layer utilities {
/**
* THEME COLOR USAGE GUIDE
*
* Always use Nuxt UI CSS variables for primary colors:
* - var(--ui-color-primary-500) for main primary color
* - var(--ui-color-primary-400) for lighter shade
* - var(--ui-color-primary-600) for darker shade
*
* Or use semantic Tailwind classes:
* - text-primary, bg-primary, border-primary
*
* Never use hardcoded colors like:
* - purple-500, violet-600, #a855f7
*
* For gradients, use CSS variables:
* background: linear-gradient(to right,
* var(--ui-color-primary-600),
* var(--ui-color-primary-500)
* );
*
* See docs/THEME-COLOR-GUIDE.md for detailed documentation.
*/
.primary-text { .primary-text {
@apply text-violet-600 dark:text-violet-400; @apply text-primary;
} }
.section-spacing { .section-spacing {
@@ -255,7 +266,7 @@
} }
.decorated { .decorated {
@apply underline underline-offset-8 decoration-violet-500 dark:decoration-violet-400 decoration-2; @apply underline underline-offset-8 decoration-primary decoration-2;
} }
/* Soft text color helpers */ /* Soft text color helpers */
@@ -263,13 +274,70 @@
@apply text-zinc-600 dark:text-zinc-300; @apply text-zinc-600 dark:text-zinc-300;
} }
/* Gradient text effect */
.gradient-text { .gradient-text {
@apply bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 dark:from-violet-400 dark:via-purple-400 dark:to-fuchsia-400 bg-clip-text text-transparent; background: linear-gradient(
to right,
var(--ui-color-primary-600),
var(--ui-color-primary-500),
var(--ui-color-primary-400)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dark .gradient-text {
background: linear-gradient(
to right,
var(--ui-color-primary-400),
var(--ui-color-primary-300),
var(--ui-color-primary-200)
);
-webkit-background-clip: text;
background-clip: text;
} }
.chip-base { .chip-base {
@apply inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-semibold ring-1 ring-violet-200/70 bg-gradient-to-br from-white/90 to-violet-50/60 text-violet-700 shadow-lg shadow-violet-500/10 backdrop-blur-md dark:from-violet-950/40 dark:to-violet-900/20 dark:text-violet-200 dark:ring-violet-800/50 dark:shadow-violet-500/5 transition-all hover:scale-105 hover:shadow-xl hover:shadow-violet-500/20; @apply inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-semibold ring-2 transition-all hover:scale-105 hover:shadow-xl backdrop-blur-md;
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 60%, transparent);
background: linear-gradient(
to bottom right,
color-mix(in oklch, white 75%, transparent),
color-mix(in oklch, var(--ui-color-primary-100) 80%, transparent)
);
color: var(--ui-color-primary-700);
box-shadow:
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 40%, transparent);
}
.chip-base:hover {
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
box-shadow:
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
}
.dark .chip-base {
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 50%, transparent);
background: linear-gradient(
to bottom right,
color-mix(in oklch, var(--ui-color-primary-950) 60%, transparent),
color-mix(in oklch, var(--ui-color-primary-900) 40%, transparent)
);
color: var(--ui-color-primary-200);
box-shadow:
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 40%, transparent);
}
.dark .chip-base:hover {
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
box-shadow:
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
} }
/* Hide scrollbars for overflow containers */ /* Hide scrollbars for overflow containers */
@@ -292,9 +360,13 @@
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
/* Modern glassmorphic card */
.glass-card { .glass-card {
@apply rounded-3xl bg-white/80 dark:bg-zinc-900/50 backdrop-blur-xl shadow-xl shadow-violet-500/5 dark:shadow-violet-500/10 border border-white/20 dark:border-zinc-800/50 transition-all duration-300; @apply rounded-3xl bg-white/80 dark:bg-zinc-900/50 backdrop-blur-xl border border-white/20 dark:border-zinc-800/50 transition-all duration-300;
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 5%, transparent);
}
.dark .glass-card {
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
} }
.glass-card:hover { .glass-card:hover {
@@ -358,68 +430,97 @@
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent); box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent);
} }
/* Modern button with gradient */
.btn-modern { .btn-modern {
@apply inline-flex items-center justify-center px-6 py-3 rounded-2xl font-semibold text-white bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 shadow-lg shadow-violet-500/30 hover:shadow-xl hover:shadow-violet-500/40 transition-all duration-300 hover:scale-105; @apply inline-flex items-center justify-center px-6 py-3 rounded-2xl font-semibold text-white transition-all duration-300 hover:scale-105;
background: linear-gradient(to right, var(--ui-color-primary-600), var(--ui-color-primary-500));
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 30%, transparent);
}
.btn-modern:hover {
background: linear-gradient(to right, var(--ui-color-primary-700), var(--ui-color-primary-600));
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
} }
} }
@layer utilities { @layer utilities {
/* Minimal outlined button: persistent subtle border and light background; hover handled separately */
.btn-outline-minimal { .btn-outline-minimal {
@apply border border-violet-200/60 dark:border-violet-800/50 bg-gradient-to-br from-white/60 to-violet-50/30 dark:from-white/5 dark:to-violet-950/20 backdrop-blur-sm transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/10; @apply backdrop-blur-sm transition-all duration-300 hover:shadow-lg;
border: 1px solid color-mix(in oklch, var(--ui-color-primary-200) 60%, transparent);
background: linear-gradient(
to bottom right,
color-mix(in oklch, white 60%, transparent),
color-mix(in oklch, var(--ui-color-primary-50) 30%, transparent)
);
}
.btn-outline-minimal:hover {
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
}
.dark .btn-outline-minimal {
border-color: color-mix(in oklch, var(--ui-color-primary-800) 50%, transparent);
background: linear-gradient(
to bottom right,
color-mix(in oklch, white 5%, transparent),
color-mix(in oklch, var(--ui-color-primary-950) 20%, transparent)
);
} }
} }
@layer utilities { @layer utilities {
/* Chip-style icon button inspired by SkillGrid: subtle ring, soft bg, minimal hover */
.chip-button { .chip-button {
@apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-1 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110; @apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-2 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110;
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 55%, transparent);
/* Dynamic theme colors using CSS variables */ background: linear-gradient(
ring-color: color-mix(in srgb, var(--ui-color-primary-200) 70%, transparent); to bottom right,
background: linear-gradient(to bottom right, color-mix(in oklch, white 70%, transparent),
color-mix(in srgb, white 90%, transparent), color-mix(in oklch, var(--ui-color-primary-100) 75%, transparent)
color-mix(in srgb, var(--ui-color-primary-50) 50%, transparent)
); );
color: var(--ui-color-primary-700); color: var(--ui-color-primary-700);
box-shadow: box-shadow:
0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent), 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent); 0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 35%, transparent);
} }
.chip-button:hover { .chip-button:hover {
background: linear-gradient(to bottom right, --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
color-mix(in srgb, var(--ui-color-primary-50) 100%, transparent), background: linear-gradient(
color-mix(in srgb, var(--ui-color-primary-100) 100%, transparent) to bottom right,
color-mix(in oklch, var(--ui-color-primary-50) 90%, transparent),
color-mix(in oklch, var(--ui-color-primary-100) 95%, transparent)
); );
box-shadow: box-shadow:
0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent), 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent); 0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
} }
.dark .chip-button { .dark .chip-button {
ring-color: color-mix(in srgb, var(--ui-color-primary-800) 50%, transparent); --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 45%, transparent);
background: linear-gradient(to bottom right, background: linear-gradient(
color-mix(in srgb, white 10%, transparent), to bottom right,
color-mix(in srgb, var(--ui-color-primary-950) 30%, transparent) color-mix(in oklch, white 15%, transparent),
color-mix(in oklch, var(--ui-color-primary-950) 50%, transparent)
); );
color: var(--ui-color-primary-200); color: var(--ui-color-primary-200);
box-shadow: box-shadow:
0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent), 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent); 0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 35%, transparent);
} }
.dark .chip-button:hover { .dark .chip-button:hover {
background: linear-gradient(to bottom right, --tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
color-mix(in srgb, white 15%, transparent), background: linear-gradient(
color-mix(in srgb, var(--ui-color-primary-900) 40%, transparent) to bottom right,
color-mix(in oklch, white 20%, transparent),
color-mix(in oklch, var(--ui-color-primary-900) 60%, transparent)
); );
box-shadow: box-shadow:
0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent), 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent); 0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
} }
/* GitHub Activity Contribution Graph - Dynamic Primary Color */ /* GitHub Activity Contribution Graph - Dynamic Primary Color */
@@ -526,13 +627,11 @@
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
/* Use primary color gradient; adapt in dark mode */ background-image: linear-gradient(
background-image: linear-gradient(to right, to right,
rgb(99 102 241 / 0.9), color-mix(in oklch, var(--ui-color-primary-500) 90%, transparent),
/* indigo-500 */ color-mix(in oklch, var(--ui-color-primary-600) 90%, transparent)
rgb(139 92 246 / 0.9) );
/* violet-500 */
);
transform-origin: left center; transform-origin: left center;
animation: locale-progress-grow 600ms ease-out forwards; animation: locale-progress-grow 600ms ease-out forwards;
} }
app/components/common/FooterCopyright.vue
+2 -2
View File
@@ -9,9 +9,9 @@
class="h-12 w-12" loading="lazy" /> class="h-12 w-12" loading="lazy" />
</template> </template>
</ClientOnly> </ClientOnly>
<p>&copy; {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">AliArghyani</span> - <p>&copy; {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">MahdiArghyani</span> -
All rights reserved.</p> All rights reserved.</p>
<a href="https://github.com/aliarghyani" target="_blank" rel="noopener noreferrer" <a href="https://github.com/mahdiarghyani" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-2 text-sm font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"> class="inline-flex items-center gap-2 text-sm font-medium text-primary-600 transition hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
<UIcon name="i-mdi-github" class="text-base" /> <UIcon name="i-mdi-github" class="text-base" />
<span>GitHub</span> <span>GitHub</span>
app/components/portfolio/Hero.vue
+22 -7
View File
@@ -31,10 +31,9 @@
</div> </div>
<!-- Resume Button - Desktop only --> <!-- Resume Button - Desktop only -->
<NuxtLink to="/resume" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold <NuxtLink to="/resume" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 resume-button
hover:from-primary-600 hover:via-purple-600 hover:to-pink-600 text-white rounded-full
text-white rounded-full shadow-lg shadow-primary-500/25 transition-all duration-300 hover:scale-105
transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary-500/40
animate-pulse hover:animate-none"> animate-pulse hover:animate-none">
<UIcon name="i-heroicons-document-text" class="text-lg" /> <UIcon name="i-heroicons-document-text" class="text-lg" />
<span>View Resume</span> <span>View Resume</span>
@@ -43,9 +42,8 @@
</div> </div>
<!-- Resume Button - Mobile only --> <!-- Resume Button - Mobile only -->
<NuxtLink to="/resume" class="sm:hidden inline-flex items-center justify-center gap-2 mt-2 px-4 py-2 text-sm font-medium <NuxtLink to="/resume" class="sm:hidden inline-flex items-center justify-center gap-2 mt-2 px-4 py-2 text-sm font-medium
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 resume-button
hover:from-primary-600 hover:via-purple-600 hover:to-pink-600 text-white rounded-full
text-white rounded-full shadow-lg shadow-primary-500/25
transition-all duration-300 hover:scale-105"> transition-all duration-300 hover:scale-105">
<UIcon name="i-heroicons-document-text" class="text-base" /> <UIcon name="i-heroicons-document-text" class="text-base" />
<span>View My Resume</span> <span>View My Resume</span>
@@ -221,6 +219,23 @@ async function copyEmail() {
color: var(--ui-color-primary-300); color: var(--ui-color-primary-300);
} }
/* Resume button with primary color gradient */
.resume-button {
background: linear-gradient(to right,
var(--ui-color-primary-600),
var(--ui-color-primary-500),
var(--ui-color-primary-400));
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent);
}
.resume-button:hover {
background: linear-gradient(to right,
var(--ui-color-primary-700),
var(--ui-color-primary-600),
var(--ui-color-primary-500));
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
}
/* Override Tailwind ring color variable for chip buttons */ /* Override Tailwind ring color variable for chip buttons */
:deep(.chip-button) { :deep(.chip-button) {
--tw-ring-color: var(--ui-color-primary-500) !important; --tw-ring-color: var(--ui-color-primary-500) !important;
docs/THEME-COLOR-GUIDE.md
+226
View File
@@ -0,0 +1,226 @@
# Theme Color System Guide
This guide explains how to use the dynamic theme color system in this portfolio.
## Overview
The portfolio uses Nuxt UI's CSS variable system to support multiple theme colors (green, blue, red, orange, etc.). All UI elements should adapt to the user-selected primary color.
## CSS Variables
### Available Variables
```css
/* Light mode defaults */
--ui-color-primary-50 /* Very light tint - backgrounds */
--ui-color-primary-100 /* Light tint */
--ui-color-primary-200 /* Lighter shade - borders */
--ui-color-primary-300 /* Light shade */
--ui-color-primary-400 /* Medium-light shade - dark mode text */
--ui-color-primary-500 /* Main primary color */
--ui-color-primary-600 /* Medium-dark shade - hover states */
--ui-color-primary-700 /* Dark shade - text */
--ui-color-primary-800 /* Darker shade */
--ui-color-primary-900 /* Very dark shade */
--ui-color-primary-950 /* Darkest shade - dark mode backgrounds */
```
### Usage Patterns
#### ✅ Correct Usage
```css
/* Using CSS variables */
.my-button {
background: var(--ui-color-primary-500);
color: white;
}
.my-button:hover {
background: var(--ui-color-primary-600);
}
/* Using semantic Tailwind classes */
<div class="text-primary bg-primary border-primary">
/* Gradients with CSS variables */
.gradient-bg {
background: linear-gradient(
to right,
var(--ui-color-primary-600),
var(--ui-color-primary-500)
);
}
/* Color mixing for transparency */
.subtle-bg {
background: color-mix(in oklch, var(--ui-color-primary-50) 60%, transparent);
}
```
#### ❌ Incorrect Usage
```css
/* Never use hardcoded colors */
.my-button {
background: #a855f7; /* ❌ Stays purple forever */
}
/* Never use Tailwind color classes */
<div class="text-purple-500"> /* ❌ Doesn't respond to theme */
<div class="bg-violet-600"> /* ❌ Bypasses theme system */
```
## Dark Mode Considerations
- **Light mode**: Use darker shades (500, 600, 700) for better contrast
- **Dark mode**: Use lighter shades (200, 300, 400) for better visibility
- Always test both modes when adding new styles
```css
/* Example: Text color that works in both modes */
.my-text {
color: var(--ui-color-primary-600);
}
.dark .my-text {
color: var(--ui-color-primary-400);
}
```
## Common Patterns
### Buttons
```css
/* Primary button */
.btn-primary {
background: linear-gradient(to right,
var(--ui-color-primary-600),
var(--ui-color-primary-500)
);
box-shadow: 0 10px 15px -3px color-mix(
in oklch,
var(--ui-color-primary-500) 30%,
transparent
);
}
.btn-primary:hover {
background: linear-gradient(to right,
var(--ui-color-primary-700),
var(--ui-color-primary-600)
);
}
```
### Cards with Hover Effects
```css
.card {
border: 1px solid var(--ui-color-primary-200);
box-shadow: 0 10px 15px -3px color-mix(
in oklch,
var(--ui-color-primary-500) 5%,
transparent
);
}
.card:hover {
border-color: var(--ui-color-primary-500);
box-shadow: 0 20px 25px -5px color-mix(
in oklch,
var(--ui-color-primary-500) 15%,
transparent
);
}
```
### Focus Rings
```css
.interactive {
--tw-ring-color: var(--ui-color-primary-500);
}
.dark .interactive {
--tw-ring-color: var(--ui-color-primary-400);
}
```
## Migration Checklist
When adding new components or styles:
1. ✅ Search for any purple/violet color references
2. ✅ Replace with appropriate primary color variable
3. ✅ Test with multiple primary colors (green, blue, red, orange)
4. ✅ Test in both light and dark modes
5. ✅ Verify hover/focus states use primary color
6. ✅ Check contrast ratios for accessibility (WCAG AA minimum)
## Examples from Codebase
### Scrollbar
```css
:root {
--scrollbar-thumb: var(--ui-color-primary-500);
--scrollbar-thumb-hover: var(--ui-color-primary-600);
}
:root.dark {
--scrollbar-thumb: var(--ui-color-primary-400);
--scrollbar-thumb-hover: var(--ui-color-primary-300);
}
```
### Chip Buttons (Social Icons)
```css
.chip-button {
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-200) 70%, transparent);
background: linear-gradient(
to bottom right,
color-mix(in oklch, white 90%, transparent),
color-mix(in oklch, var(--ui-color-primary-50) 50%, transparent)
);
color: var(--ui-color-primary-700);
}
```
### Gradient Text
```css
.gradient-text {
background: linear-gradient(
to right,
var(--ui-color-primary-600),
var(--ui-color-primary-500),
var(--ui-color-primary-400)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
```
## Troubleshooting
### Issue: Colors not updating when theme changes
**Solution**: Make sure you're using CSS variables, not hardcoded colors or Tailwind color classes.
### Issue: Poor contrast in dark mode
**Solution**: Use lighter shades (200-400) in dark mode instead of darker shades (600-800).
### Issue: Gradients look wrong
**Solution**: Ensure all color stops in the gradient use primary color variables.
## Resources
- [Nuxt UI Color Documentation](https://ui.nuxt.com/getting-started/theme#colors)
- [CSS color-mix() Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
- [OKLCH Color Space](https://oklch.com/)