Skip to content

Commit 4345d2c

Browse files
JulienAuvoJulienAuvo
authored
fix: normalize custom tailwind colors (#71)
1 parent a8506b7 commit 4345d2c

File tree

8 files changed

+337
-329
lines changed

8 files changed

+337
-329
lines changed

‎infrastructure/eid-wallet/src/app.css‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,34 @@
1616
/* Custom theme */
1717
--color-primary: #8e52ff;
1818
--color-primary-100: #e8dcff;
19-
--color-primary-300: #d2baff;
20-
--color-primary-500: #bb97ff;
21-
--color-primary-700: #a575ff;
22-
--color-primary-900: #8e52ff;
19+
--color-primary-200: #d2baff;
20+
--color-primary-300: #bb97ff;
21+
--color-primary-400: #a575ff;
22+
--color-primary-500: #8e52ff;
2323

2424
--color-secondary: #73efd5;
2525
--color-secondary-100: #e3fcf7;
26-
--color-secondary-300: #c7f9ee;
27-
--color-secondary-500: #abf6e6;
28-
--color-secondary-700: #8ff2dd;
29-
--color-secondary-900: #73efd5;
26+
--color-secondary-200: #c7f9ee;
27+
--color-secondary-300: #abf6e6;
28+
--color-secondary-400: #8ff2dd;
29+
--color-secondary-500: #73efd5;
3030

31-
--color-gray-900: #f5f5f5;
32-
33-
--color-white-900: #ffffff;
34-
35-
--color-black-900: #171a27;
36-
--color-black-700: #4c4c4c;
37-
--color-black-500: #797979;
38-
--color-black-300: #a5a5a5;
39-
--color-black-100: #d2d2d2;
31+
--color-white: #ffffff;
32+
--color-gray: #f5f5f5;
4033

4134
--color-black: #1f1f1f;
35+
--color-black-100: #d2d2d2;
36+
--color-black-300: #a5a5a5;
37+
--color-black-500: #797979;
38+
--color-black-700: #4c4c4c;
39+
--color-black-900: #1f1f1f;
4240

43-
--color-red-900: #FF5255;
44-
--color-red-700: #FF7B77;
45-
--color-red-500: #FF968E;
46-
--color-red-300: #FFB1A7;
47-
--color-red-100: #FFDCDD;
48-
49-
--color-danger-500: #ff5255;
50-
--color-danger-300: #ff7d7f;
41+
--color-danger: #ff5255;
5142
--color-danger-100: #ffdcdd;
43+
--color-danger-200: #ffb1a7;
44+
--color-danger-300: #ff968e;
45+
--color-danger-400: #ff7b77;
46+
--color-danger-500: #ff5255;
5247
}
5348

5449
body {

‎infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@
3939
}
4040
4141
const variantClasses = {
42-
solid: { background: 'bg-primary-900', text: 'text-white' },
43-
soft: { background: 'bg-primary-100', text: 'text-primary-900' },
42+
solid: { background: 'bg-primary-500', text: 'text-white' },
43+
soft: { background: 'bg-primary-100', text: 'text-primary-500' },
4444
danger: { background: 'bg-danger-500', text: 'text-white' },
4545
'danger-soft': { background: 'bg-danger-100', text: 'text-danger-500' },
4646
white: { background: 'bg-white', text: 'text-black' },
4747
}
4848
4949
const disabledVariantClasses = {
50-
solid: { background: 'bg-primary-500', text: 'text-white' },
51-
soft: { background: 'bg-primary-100', text: 'text-primary-500' },
52-
danger: { background: 'bg-danger-300', text: 'text-white' },
53-
'danger-soft': { background: 'bg-danger-100', text: 'text-danger-300' },
50+
solid: { background: 'bg-primary-300', text: 'text-white' },
51+
soft: { background: 'bg-primary-100', text: 'text-primary-300' },
52+
danger: { background: 'bg-danger-400', text: 'text-white' },
53+
'danger-soft': { background: 'bg-danger-100', text: 'text-danger-400' },
5454
white: { background: 'bg-black-100', text: 'text-black-700' },
5555
}
5656

‎infrastructure/eid-wallet/src/lib/ui/Connection/Connection.svelte‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
11
<script lang="ts">
2-
import { cn } from '$lib/utils';
3-
import type { HTMLAttributes } from 'svelte/elements';
2+
import { cn } from '$lib/utils'
3+
import type { HTMLAttributes } from 'svelte/elements'
44
5-
interface IConnection extends HTMLAttributes<HTMLElement>{
6-
imgSrc: string;
7-
connectionName: string;
8-
lastConnected: Date;
9-
onClick?: () => void;
10-
}
11-
12-
let { imgSrc, connectionName, lastConnected, onClick, ...restProps}: IConnection = $props();
5+
interface IConnection extends HTMLAttributes<HTMLElement> {
6+
imgSrc: string
7+
connectionName: string
8+
lastConnected: Date
9+
onClick?: () => void
10+
}
1311
12+
let {
13+
imgSrc,
14+
connectionName,
15+
lastConnected,
16+
onClick,
17+
...restProps
18+
}: IConnection = $props()
1419
</script>
1520

16-
<div {...restProps} class={cn("flex items-center justify-between px-3 py-2", restProps.class)}>
17-
<div class="flex items-center gap-2">
18-
<div class="p-3 bg-gray-900 max-w-max rounded-4xl object-cover flex items-center">
19-
<img class="size-6" src={imgSrc} alt={connectionName}>
20-
</div>
21-
<div>
22-
<h2 class="text-md font-medium text-black-900">{connectionName}</h2>
23-
<p class="text-xs text-black-700">Last Active {lastConnected}</p>
24-
</div>
25-
</div>
26-
<button
27-
class="p-2 text-md font-semibold text-primary-900"
28-
onclick={onClick}
29-
21+
<div
22+
{...restProps}
23+
class={cn('flex items-center justify-between px-3 py-2', restProps.class)}
24+
>
25+
<div class="flex items-center gap-2">
26+
<div
27+
class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center"
3028
>
31-
Disconnect
32-
</button>
29+
<img class="size-6" src={imgSrc} alt={connectionName} />
30+
</div>
31+
<div>
32+
<h2 class="text-md font-medium text-black-900">{connectionName}</h2>
33+
<p class="text-xs text-black-700">Last Active {lastConnected}</p>
34+
</div>
35+
</div>
36+
<button class="p-2 text-md font-semibold text-primary-500" onclick={onClick}>
37+
Disconnect
38+
</button>
3339
</div>

‎infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte‎

Lines changed: 87 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,105 @@
11
<script lang="ts">
2-
import { CupertinoPane } from 'cupertino-pane';
3-
import { type Snippet } from 'svelte';
4-
import type { HTMLAttributes } from 'svelte/elements';
5-
import { swipe } from 'svelte-gestures';
6-
import { clickOutside, cn } from '$lib/utils';
2+
import { CupertinoPane } from 'cupertino-pane'
3+
import { type Snippet } from 'svelte'
4+
import type { HTMLAttributes } from 'svelte/elements'
5+
import { swipe } from 'svelte-gestures'
6+
import { clickOutside, cn } from '$lib/utils'
77
8-
interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
9-
isPaneOpen?: boolean;
10-
isCancelRequired?: boolean;
11-
children?: Snippet;
12-
handleSwipe?: (isOpen: boolean | undefined) => void;
13-
}
8+
interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
9+
isPaneOpen?: boolean
10+
isCancelRequired?: boolean
11+
children?: Snippet
12+
handleSwipe?: (isOpen: boolean | undefined) => void
13+
}
1414
15-
let drawerElem: HTMLDivElement;
16-
let pane: CupertinoPane;
15+
let drawerElem: HTMLDivElement
16+
let pane: CupertinoPane
1717
18-
let {
19-
isPaneOpen = $bindable(),
20-
isCancelRequired = false,
21-
children = undefined,
22-
handleSwipe,
23-
...restProps
24-
}: IDrawerProps = $props();
18+
let {
19+
isPaneOpen = $bindable(),
20+
isCancelRequired = false,
21+
children = undefined,
22+
handleSwipe,
23+
...restProps
24+
}: IDrawerProps = $props()
2525
26-
const handleClickOutside = () => {
27-
pane?.destroy({ animate: true });
28-
isPaneOpen = false;
29-
};
26+
const handleClickOutside = () => {
27+
pane?.destroy({ animate: true })
28+
isPaneOpen = false
29+
}
3030
31-
$effect(() => {
32-
if (!drawerElem) return;
33-
pane = new CupertinoPane(drawerElem, {
34-
fitHeight:true,
35-
backdrop: true,
36-
backdropOpacity: 0.5,
37-
backdropBlur: true,
38-
bottomClose: true,
39-
buttonDestroy: isCancelRequired,
40-
showDraggable: true,
41-
upperThanTop: true,
42-
breaks: {
43-
bottom: { enabled: true, height: 250 },
44-
},
45-
initialBreak: 'bottom',
46-
});
31+
$effect(() => {
32+
if (!drawerElem) return
33+
pane = new CupertinoPane(drawerElem, {
34+
fitHeight: true,
35+
backdrop: true,
36+
backdropOpacity: 0.5,
37+
backdropBlur: true,
38+
bottomClose: true,
39+
buttonDestroy: isCancelRequired,
40+
showDraggable: true,
41+
upperThanTop: true,
42+
breaks: {
43+
bottom: { enabled: true, height: 250 },
44+
},
45+
initialBreak: 'bottom',
46+
})
4747
48-
if (isPaneOpen) {
49-
pane.present({ animate: true });
50-
} else {
51-
pane.destroy({ animate: true });
52-
}
48+
if (isPaneOpen) {
49+
pane.present({ animate: true })
50+
} else {
51+
pane.destroy({ animate: true })
52+
}
5353
54-
return () => pane.destroy();
55-
});
54+
return () => pane.destroy()
55+
})
5656
57-
$effect(() => {
58-
if (isPaneOpen) {
59-
pane.present({ animate: true });
60-
} else {
61-
pane.destroy({ animate: true });
62-
}
63-
drawerElem.addEventListener('click_outside', () => {
64-
handleClickOutside();
65-
});
66-
});
57+
$effect(() => {
58+
if (isPaneOpen) {
59+
pane.present({ animate: true })
60+
} else {
61+
pane.destroy({ animate: true })
62+
}
63+
drawerElem.addEventListener('click_outside', () => {
64+
handleClickOutside()
65+
})
66+
})
6767
</script>
6868

6969
<div
70-
{...restProps}
71-
use:swipe={() => ({
72-
timeframe: 300,
73-
minSwipeDistance: 60
74-
})}
75-
onswipe={() => handleSwipe?.(isPaneOpen)}
76-
bind:this={drawerElem}
77-
use:clickOutside
78-
class={cn(restProps.class)}
70+
{...restProps}
71+
use:swipe={() => ({
72+
timeframe: 300,
73+
minSwipeDistance: 60,
74+
})}
75+
onswipe={() => handleSwipe?.(isPaneOpen)}
76+
bind:this={drawerElem}
77+
use:clickOutside
78+
class={cn(restProps.class)}
7979
>
80-
<div class="px-6">
81-
{@render children?.()}
82-
</div>
80+
<div class="px-6">
81+
{@render children?.()}
82+
</div>
8383
</div>
8484

8585
<style>
86-
:global(.pane) {
87-
width: 95% !important;
88-
max-height: 600px !important;
89-
min-height: 250px !important;
90-
height: auto !important;
91-
position: fixed !important;
92-
bottom: 30px !important;
93-
left: 50% !important;
94-
transform: translateX(-50%) !important;
95-
border-radius: 32px !important;
96-
padding-block-start: 50px !important;
97-
padding-block-end: 20px !important;
98-
background-color: var(--color-white-900) !important;
99-
overflow: hidden !important; /* Prevents content overflow */
100-
}
86+
:global(.pane) {
87+
width: 95% !important;
88+
max-height: 600px !important;
89+
min-height: 250px !important;
90+
height: auto !important;
91+
position: fixed !important;
92+
bottom: 30px !important;
93+
left: 50% !important;
94+
transform: translateX(-50%) !important;
95+
border-radius: 32px !important;
96+
padding-block-start: 50px !important;
97+
padding-block-end: 20px !important;
98+
background-color: var(--color-white) !important;
99+
overflow: hidden !important; /* Prevents content overflow */
100+
}
101101
102-
:global(.move) {
103-
margin-block: 6px !important;
104-
}
102+
:global(.move) {
103+
margin-block: 6px !important;
104+
}
105105
</style>
106-
107-

0 commit comments

Comments
 (0)