Skip to content

Commit 234bdd2

Browse files
NamesMTNamesMT
committed
style!: oklch colors, some syntax fixes
1 parent db2f47d commit 234bdd2

7 files changed

Lines changed: 83 additions & 83 deletions

File tree

‎apps/frontend/app/assets/css/main.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ code {
2222
.spinner {
2323
border: 4px solid rgba(0, 0, 0, 0.1);
2424
border-radius: 50%;
25-
border-left-color: hsl(var(--primary-500));
25+
border-left-color: var(--primary-500);
2626
animation: spin 1s ease infinite;
2727
}
2828

2929
.dark .spinner {
30-
border-left-color: hsl(var(--primary-400));
30+
border-left-color: var(--primary-400);
3131
}
3232

3333
@keyframes spin {

‎apps/frontend/app/assets/css/palette.css‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
11
/* Main colors - Modern Playful Palette */
22
:root {
33
/* Primary - Vibrant Teal */
4-
--primary-50: 185 80% 95%;
5-
--primary-100: 185 82% 88%;
6-
--primary-200: 185 84% 78%;
7-
--primary-300: 185 86% 68%;
8-
--primary-400: 185 88% 58%;
9-
--primary-500: 185 90% 48%;
10-
--primary-600: 185 92% 40%;
11-
--primary-700: 185 94% 32%;
12-
--primary-800: 185 96% 24%;
13-
--primary-900: 185 98% 16%;
14-
--primary-950: 185 100% 8%;
4+
--primary-50: oklch(96.9% 0.043 192.5);
5+
--primary-100: oklch(92.1% 0.059 191.8);
6+
--primary-200: oklch(84.2% 0.082 191.2);
7+
--primary-300: oklch(75.1% 0.108 190.6);
8+
--primary-400: oklch(65.2% 0.135 190.0);
9+
--primary-500: oklch(54.7% 0.158 189.4);
10+
--primary-600: oklch(46.2% 0.162 188.8);
11+
--primary-700: oklch(37.1% 0.155 188.2);
12+
--primary-800: oklch(27.5% 0.137 187.6);
13+
--primary-900: oklch(18.1% 0.108 187.0);
14+
--primary-950: oklch(9.3% 0.065 186.4);
1515

1616
/* Secondary - Playful Coral */
17-
--secondary-50: 10 100% 96%;
18-
--secondary-100: 10 100% 92%;
19-
--secondary-200: 10 100% 84%;
20-
--secondary-300: 10 100% 76%;
21-
--secondary-400: 10 100% 68%;
22-
--secondary-500: 10 100% 60%;
23-
--secondary-600: 10 95% 52%;
24-
--secondary-700: 10 90% 44%;
25-
--secondary-800: 10 85% 36%;
26-
--secondary-900: 10 80% 28%;
27-
--secondary-950: 10 75% 18%;
17+
--secondary-50: oklch(95.5% 0.054 29.2);
18+
--secondary-100: oklch(91.2% 0.078 28.5);
19+
--secondary-200: oklch(82.8% 0.120 27.2);
20+
--secondary-300: oklch(74.1% 0.155 26.0);
21+
--secondary-400: oklch(65.3% 0.182 24.8);
22+
--secondary-500: oklch(56.5% 0.200 23.6);
23+
--secondary-600: oklch(48.7% 0.192 22.4);
24+
--secondary-700: oklch(40.8% 0.176 21.2);
25+
--secondary-800: oklch(32.9% 0.154 20.0);
26+
--secondary-900: oklch(25.1% 0.127 18.8);
27+
--secondary-950: oklch(16.2% 0.092 17.6);
2828

2929
/* Surface - Minimalist Grays */
30-
--surface-0: 0 0% 100%; /* Pure White */
31-
--surface-50: 210 20% 98%; /* Off-white */
32-
--surface-100: 210 18% 96%; /* Light Gray */
33-
--surface-200: 210 16% 93%; /* Light Gray */
34-
--surface-300: 210 15% 88%; /* Gray */
35-
--surface-400: 210 14% 75%; /* Medium Gray */
36-
--surface-500: 210 13% 60%; /* Dark Gray */
37-
--surface-600: 210 15% 45%; /* Darker Gray */
38-
--surface-700: 210 18% 30%; /* Very Dark Gray */
39-
--surface-800: 210 20% 18%; /* Near Black */
40-
--surface-900: 210 25% 10%; /* Dark Background */
41-
--surface-950: 210 30% 5%; /* Pure Black (almost) */
30+
--surface-0: oklch(100% 0 0); /* Pure White */
31+
--surface-50: oklch(98.2% 0.004 244.7); /* Off-white */
32+
--surface-100: oklch(96.2% 0.005 244.7); /* Light Gray */
33+
--surface-200: oklch(93.2% 0.006 244.7); /* Light Gray */
34+
--surface-300: oklch(88.2% 0.007 244.7); /* Gray */
35+
--surface-400: oklch(75.2% 0.009 244.7); /* Medium Gray */
36+
--surface-500: oklch(60.2% 0.011 244.7); /* Dark Gray */
37+
--surface-600: oklch(45.2% 0.013 244.7); /* Darker Gray */
38+
--surface-700: oklch(30.2% 0.015 244.7); /* Very Dark Gray */
39+
--surface-800: oklch(18.2% 0.017 244.7); /* Near Black */
40+
--surface-900: oklch(10.2% 0.020 244.7); /* Dark Background */
41+
--surface-950: oklch(5.2% 0.023 244.7); /* Pure Black (almost) */
4242
}
4343

4444
/* Black/white monotone shortcut */
4545
:root {
46-
--mono: 0 0% 0%;
47-
--mono-i: 0 0% 100%;
46+
--mono: oklch(0% 0 0);
47+
--mono-i: oklch(100% 0 0);
4848
}
4949
.dark {
50-
--mono: 0 0% 100%;
51-
--mono-i: 0 0% 0%;
50+
--mono: oklch(100% 0 0);
51+
--mono-i: oklch(0% 0 0);
5252
}

‎apps/frontend/app/assets/css/scrollbar.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55

66
::-webkit-scrollbar-thumb:hover {
77
border: 2px solid transparent;
8-
background: hsl(var(--primary) /.45);
8+
background: var(--primary) /.45;
99
}
1010

1111
::-webkit-scrollbar-thumb {
12-
background: hsl(var(--primary) /.34);
12+
background: var(--primary) /.34;
1313
border-radius: 4px;
1414
border: 1px solid transparent;
1515
background-clip: content-box;
1616
-webkit-background-clip: content-box;
1717
}
1818

1919
/* ::-webkit-scrollbar-track {
20-
background: hsl(var(--accent)/.2);
20+
background: var(--accent)/.2;
2121
border-radius: 4px;
2222
} */

‎apps/frontend/app/assets/css/shadcn.css‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,22 @@
2424
--accent: var(--secondary-100);
2525
--accent-foreground: var(--secondary-900);
2626

27-
--destructive: 0 84.2% 60.2%;
28-
--destructive-foreground: 210 20% 98%;
27+
--destructive: oklch(61.3% 0.222 22.5);
28+
--destructive-foreground: oklch(98.2% 0.004 244.7);
2929

3030
--ring: var(--primary);
3131

3232
--radius: 10px;
3333

34-
--sidebar: 0 0% 98%;
34+
--sidebar: oklch(98.2% 0 0);
3535
--sidebar-background: var(--sidebar);
36-
--sidebar-foreground: 240 5.3% 26.1%;
37-
--sidebar-primary: 240 5.9% 10%;
38-
--sidebar-primary-foreground: 0 0% 98%;
39-
--sidebar-accent: 240 4.8% 95.9%;
40-
--sidebar-accent-foreground: 240 5.9% 10%;
41-
--sidebar-border: 220 13% 91%;
42-
--sidebar-ring: 217.2 91.2% 59.8%;
36+
--sidebar-foreground: oklch(26.1% 0.012 262.4);
37+
--sidebar-primary: oklch(10.0% 0.013 262.9);
38+
--sidebar-primary-foreground: oklch(98.2% 0 0);
39+
--sidebar-accent: oklch(95.9% 0.011 261.8);
40+
--sidebar-accent-foreground: oklch(10.0% 0.013 262.9);
41+
--sidebar-border: oklch(91.0% 0.025 251.0);
42+
--sidebar-ring: oklch(59.8% 0.182 247.2);
4343
}
4444
.dark {
4545
--background: var(--surface-900);
@@ -66,20 +66,20 @@
6666
--accent: var(--secondary-800);
6767
--accent-foreground: var(--secondary-100);
6868

69-
--destructive: 0 62.8% 30.6%;
70-
--destructive-foreground: 210 20% 98%;
69+
--destructive: oklch(38.7% 0.167 22.5);
70+
--destructive-foreground: oklch(98.2% 0.004 244.7);
7171

7272
--ring: var(--primary);
7373

74-
--sidebar: 240 5.9% 10%;
74+
--sidebar: oklch(10.0% 0.013 262.9);
7575
--sidebar-background: var(--sidebar);
76-
--sidebar-foreground: 240 4.8% 95.9%;
77-
--sidebar-primary: 224.3 76.3% 48%;
78-
--sidebar-primary-foreground: 0 0% 100%;
79-
--sidebar-accent: 240 3.7% 15.9%;
80-
--sidebar-accent-foreground: 240 4.8% 95.9%;
81-
--sidebar-border: 240 3.7% 15.9%;
82-
--sidebar-ring: 217.2 91.2% 59.8%;
76+
--sidebar-foreground: oklch(95.9% 0.011 261.8);
77+
--sidebar-primary: oklch(48.0% 0.152 253.7);
78+
--sidebar-primary-foreground: oklch(100% 0 0);
79+
--sidebar-accent: oklch(15.9% 0.008 259.7);
80+
--sidebar-accent-foreground: oklch(95.9% 0.011 261.8);
81+
--sidebar-border: oklch(15.9% 0.008 259.7);
82+
--sidebar-ring: oklch(59.8% 0.182 247.2);
8383
}
8484
}
8585

‎apps/frontend/app/components/chat/ChatSidebar.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
126126
<template>
127127
<Sidebar>
128128
<SidebarHeader class="px-4 py-2">
129-
<div class="absolute right-3 top-3">
129+
<div class="right-3 top-3 absolute">
130130
<Button
131131
variant="ghost" size="icon" class="size-7"
132132
@click="colorMode.preference = (colorMode.value === 'dark') ? 'light' : 'dark'"
@@ -160,7 +160,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
160160
</SidebarHeader>
161161
<SidebarContent class="p-2">
162162
<SidebarGroup v-if="!threads?.length">
163-
<div class="py-4 text-center text-gray-500 dark:text-gray-400">
163+
<div class="text-gray-500 py-4 text-center dark:text-gray-400">
164164
{{ isFetching
165165
? $t('chat.sidebar.threads.loading')
166166
: $t('chat.sidebar.threads.empty') }}
@@ -184,11 +184,11 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
184184
<!-- Using [&.active] instead of :active-class because of reactivity bug -->
185185
<NuxtLink
186186
:to="`/chat/${thread._id}`"
187-
class="group/thread relative block flex items-center gap-2 overflow-hidden rounded-md p-2 px-3 text-sm $BGCOLOR=$primary-200 [&.router-link-exact-active]:(bg-[hsl(var(--BGCOLOR)/0.3)]) hover:(bg-[hsl(var(--BGCOLOR)/0.7)]) dark:$BGCOLOR=$primary-800"
187+
class="group/thread text-sm p-2 px-3 rounded-md flex gap-2 items-center relative overflow-hidden $BGCOLOR=$primary-200 [&.router-link-exact-active]:(bg-$BGCOLOR/30) hover:bg-$BGCOLOR/70] dark:$BGCOLOR=$primary-800"
188188
@mousedown.left="navigateTo(`/chat/${thread._id}`);"
189189
@click="navigateTo(`/chat/${thread._id}`); sidebarContext.setOpenMobile(false)"
190190
>
191-
<div class="h-4 flex items-center gap-1">
191+
<div class="flex gap-1 h-4 items-center">
192192
<BranchIconButton v-if="thread.parentThread" :thread />
193193
<FrozenIconButton v-if="thread.frozen" :thread />
194194
</div>
@@ -205,10 +205,10 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
205205
</Tooltip>
206206

207207
<div
208-
class="right-0 top-0 h-full flex translate-x-[calc(100%+1rem)] items-center gap-1 bg-[hsl(var(--BGCOLOR))] px-2 pr-1 transition-transform will-change-transform absolute! group-hover/thread:translate-x-0"
208+
class="px-2 pr-1 will-change-transform bg-$BGCOLOR flex gap-1 h-full translate-x-[calc(100%+1rem)] transition-transform items-center right-0 top-0 group-hover/thread:translate-x-0 absolute!"
209209
@click.stop.prevent
210210
>
211-
<div class="pointer-events-none absolute bottom-0 right-[100%] top-0 h-12 w-8 from-[hsl(var(--BGCOLOR))] to-transparent bg-gradient-to-l opacity-0 transition-opacity group-hover/thread:opacity-100" />
211+
<div class="opacity-0 h-12 w-8 pointer-events-none transition-opacity bottom-0 right-[100%] top-0 absolute from-$BGCOLOR to-transparent bg-gradient-to-l group-hover/thread:opacity-100" />
212212
<Tooltip>
213213
<TooltipTrigger as-child>
214214
<Button
@@ -256,7 +256,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
256256
</div>
257257

258258
<SidebarGroup v-show="threadsPartitioned[1].length" class="flex flex-col gap-2">
259-
<h4 class="mx-1 flex gap-1 text-xs text-primary">
259+
<h4 class="text-xs text-primary mx-1 flex gap-1">
260260
<div class="i-hugeicons:pin" /><div>{{ $t('pinned') }}</div>
261261
</h4>
262262
<ul class="space-y-1">
@@ -265,7 +265,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
265265
</SidebarGroup>
266266

267267
<SidebarGroup v-show="filteredThreads.length" class="flex flex-col gap-2">
268-
<h4 class="mx-1 flex gap-1 text-xs text-primary">
268+
<h4 class="text-xs text-primary mx-1 flex gap-1">
269269
<div>{{ $t('recent') }}</div>
270270
</h4>
271271
<ul class="space-y-1">

‎apps/frontend/app/lib/shadcn/components/ui/sidebar/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const sidebarMenuButtonVariants = cva(
4141
variant: {
4242
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
4343
outline:
44-
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
44+
'bg-background shadow-[0_0_0_1px_var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_(var(--sidebar-accent))]',
4545
},
4646
size: {
4747
default: 'h-8 text-sm',

‎apps/frontend/uno.config.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ for (const color of colorPalettePresets) {
1818
// length 12 = 0-950
1919
Array.from({ length: 12 }, (_, i) => i).forEach((num) => {
2020
const key = `${color}-${colorIndexer(num)}`
21-
colorsPaletteMap[key] = `hsl(var(--${key}))`
21+
colorsPaletteMap[key] = `var(--${key})`
2222
})
2323
}
2424
// Generates color index following the pattern: 0 50 100 200..900 950 1000
@@ -37,10 +37,10 @@ function colorIndexer(num: number) {
3737
*/
3838
function commonColorVarsGen(varName: string, additionalVars?: Array<string>) {
3939
return {
40-
[varName]: `hsl(var(--${varName}))`,
41-
[`${varName}-foreground`]: `hsl(var(--${varName}-foreground))`,
40+
[varName]: `var(--${varName})`,
41+
[`${varName}-foreground`]: `var(--${varName}-foreground)`,
4242
...(additionalVars && additionalVars.reduce((acc, cur) => {
43-
acc[`${varName}-${cur}`] = `hsl(var(--${varName}-${cur}))`
43+
acc[`${varName}-${cur}`] = `var(--${varName}-${cur})`
4444
return acc
4545
}, {} as Record<string, string>)),
4646
}
@@ -88,13 +88,13 @@ export default defineConfig({
8888
},
8989
colors: {
9090
...colorsPaletteMap,
91-
'mono': 'hsl(var(--mono))',
92-
'mono-i': 'hsl(var(--mono-i))',
93-
'background': 'hsl(var(--background))',
94-
'foreground': 'hsl(var(--foreground))',
95-
'border': 'hsl(var(--border))',
96-
'input': 'hsl(var(--input))',
97-
'ring': 'hsl(var(--ring))',
91+
'mono': 'var(--mono)',
92+
'mono-i': 'var(--mono-i)',
93+
'background': 'var(--background)',
94+
'foreground': 'var(--foreground)',
95+
'border': 'var(--border)',
96+
'input': 'var(--input)',
97+
'ring': 'var(--ring)',
9898
...colorPalettePresets.reduce((acc, cur) => {
9999
Object.assign(acc, commonColorVarsGen(cur))
100100
return acc

0 commit comments

Comments
 (0)