Skip to content

Commit dbf4eb6

Browse files
FrontendlandFrontendland
committed
✨ Add ThemeSwitcher component
1 parent 499dbd4 commit dbf4eb6

37 files changed

+911
-74
lines changed

‎astro.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import react from '@astrojs/react'
66
export default defineConfig({
77
outDir: 'build',
88
trailingSlash: 'never',
9+
output: 'server',
910
integrations: [
1011
svelte(),
1112
react()

‎public/img/logo-light.png

851 Bytes
Loading

‎public/img/logo.png

173 Bytes
Loading

‎public/img/logo.svg

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/Alert/alert.module.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@
1515
}
1616

1717
&.info {
18-
border: 1px solid #0abde3;
19-
color: #0abde3;
18+
border: 1px solid var(--w-color-info);
19+
color: var(--w-color-info);
2020
}
2121

2222
&.success {
23-
border: 1px solid #1dd1a1;
24-
color: #1dd1a1;
23+
border: 1px solid var(--w-color-success);
24+
color: var(--w-color-success);
2525
}
2626

2727
&.warning {
28-
border: 1px solid #ff9f43;
29-
color: #ff9f43;
28+
border: 1px solid var(--w-color-warning);
29+
color: var(--w-color-warning);
3030
}
3131

3232
&.alert {
33-
border: 1px solid #e73f40;
34-
color: #e73f40;
33+
border: 1px solid var(--w-color-alert);
34+
color: var(--w-color-alert);
3535
}
3636

3737
svg {

‎src/components/Badge/badge.module.scss

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@
3434
}
3535

3636
&.info:hover {
37-
background: #48dbfb;
37+
background: var(--w-color-info-accent);
3838
}
3939

4040
&.success:hover {
41-
background: #1dd1a1;
41+
background: var(--w-color-success-accent);
4242
}
4343

4444
&.warning:hover {
45-
background: #f7aa61;
45+
background: var(--w-color-warning-accent);
4646
}
4747

4848
&.alert:hover {
49-
background: #ee5253;
49+
background: var(--w-color-alert-accent);
5050
}
5151
}
5252

@@ -63,24 +63,27 @@
6363
}
6464

6565
&.flat {
66-
background: var(--w-color-primary-70);;
66+
background: var(--w-color-primary-70);
6767
color: var(--w-color-primary);
6868
}
6969

7070
&.info {
71-
background: #0abde3;
71+
background: var(--w-color-info);
72+
color: var(--w-color-info-fg);
7273
}
7374

7475
&.success {
75-
background: #10ac84;
76+
background: var(--w-color-success);
77+
color: var(--w-color-success-fg);
7678
}
7779

7880
&.warning {
79-
background: #ff9f43;
81+
background: var(--w-color-warning);
82+
color: var(--w-color-warning-fg);
8083
}
8184

8285
&.alert {
83-
background: #e73f40;
84-
color: var(--w-color-primary);
86+
background: var(--w-color-alert);
87+
color: var(--w-color-alert-fg);
8588
}
8689
}

‎src/components/Button/button.module.scss

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,35 +53,38 @@
5353
}
5454

5555
&.info {
56-
background: #0abde3;
56+
background: var(--w-color-info);
57+
color: var(--w-color-info-fg);
5758

5859
&:hover {
59-
background: #48dbfb;
60+
background: var(--w-color-info-accent);
6061
}
6162
}
6263

6364
&.success {
64-
background: #10ac84;
65+
background: var(--w-color-success);
66+
color: var(--w-color-success-fg);
6567

6668
&:hover {
67-
background: #1dd1a1;
69+
background: var(--w-color-success-accent);
6870
}
6971
}
7072

7173
&.warning {
72-
background: #ff9f43;
74+
background: var(--w-color-warning);
75+
color: var(--w-color-warning-fg);
7376

7477
&:hover {
75-
background: #f7aa61;
78+
background: var(--w-color-warning-accent);
7679
}
7780
}
7881

7982
&.alert {
80-
background: #e73f40;
81-
color: var(--w-color-primary);
83+
background: var(--w-color-alert);
84+
color: var(--w-color-alert-fg);
8285

8386
&:hover {
84-
background: #ee5253;
87+
background: var(--w-color-alert-accent);
8588
}
8689
}
8790

‎src/components/Icon/map.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Check from '../../icons/check.svg?raw'
44
import CircleCheck from '../../icons/circle-check.svg?raw'
55
import Github from '../../icons/github.svg?raw'
66
import Info from '../../icons/info.svg?raw'
7+
import Moon from '../../icons/moon.svg?raw'
8+
import Sun from '../../icons/sun.svg?raw'
79
import Warning from '../../icons/warning.svg?raw'
810

911
const iconMap = {
@@ -13,6 +15,8 @@ const iconMap = {
1315
'circle-check': CircleCheck,
1416
'github': Github,
1517
'info': Info,
18+
'moon': Moon,
19+
'sun': Sun,
1620
'warning': Warning
1721
}
1822

‎src/components/Input/input.module.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
color: var(--w-color-primary);
1010
line-height: 20px;
1111
width: 100%;
12-
color-scheme: dark;
12+
color-scheme: var(--w-color-scheme);
1313

1414
&[disabled] {
1515
cursor: no-drop;
@@ -22,6 +22,10 @@
2222
color: var(--w-color-primary);
2323
}
2424

25+
&::placeholder {
26+
color: var(--w-color-primary-30);
27+
}
28+
2529
&[type="color"] {
2630
padding: 0;
2731
}

‎src/components/Menu/Menu.astro

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const containerClasses = [
2424
wrapperClassName
2525
]
2626
27-
const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
27+
const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('default')
2828
---
2929

3030
<header class:list={classes}>
@@ -33,7 +33,7 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
3333
<div slot="wrapper" class={styles.wrapper}>
3434
children
3535
</div>
36-
{logo?.url && !centerLogo && (
36+
{logo?.url && !centerLogo && (
3737
<a href="/">
3838
<img
3939
src={logo.url}
@@ -44,6 +44,12 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
4444
</a>
4545
)}
4646

47+
{!centerLogo && logo?.html && (
48+
<a href="/">
49+
<Fragment set:html={logo.html} />
50+
</a>
51+
)}
52+
4753
{items?.length && (
4854
<ul>
4955
{items.map(item => (
@@ -66,6 +72,12 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
6672
</button>
6773
)}
6874

75+
{centerLogo && logo?.html && (
76+
<a href="/">
77+
<Fragment set:html={logo.html} />
78+
</a>
79+
)}
80+
6981
{logo?.url && centerLogo && (
7082
<a href="/">
7183
<img
@@ -86,7 +98,7 @@ const wrapMenu = logo?.url && items?.length && Astro.slots.has('default')
8698
.querySelector('[data-id="hamburger"]')
8799
?.addEventListener('click', event => {
88100
const hamburger = event.currentTarget as HTMLDivElement
89-
const header = hamburger.parentElement as HTMLHeadElement
101+
const header = hamburger.parentElement?.parentElement as HTMLHeadElement
90102

91103
header.dataset.active = header.dataset.active === 'true'
92104
? 'false'

‎src/components/Menu/Menu.svelte

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
wrapperClassName
2222
])
2323
24-
const wrapMenu = logo?.url && items?.length && $$slots.default
24+
const wrapMenu = (logo?.url || logo?.html) && items?.length && $$slots.default
2525
2626
let active = false
2727
@@ -41,6 +41,10 @@
4141
/>
4242
</a>
4343
{/if}
44+
45+
{#if !centerLogo && logo?.html}
46+
<a href="/">{@html logo.html}</a>
47+
{/if}
4448

4549
{#if items?.length}
4650
<ul>
@@ -63,7 +67,11 @@
6367
<span class={styles.meat}></span>
6468
</button>
6569
{/if}
66-
70+
71+
{#if centerLogo && logo?.html}
72+
<a href="/">{@html logo.html}</a>
73+
{/if}
74+
6775
{#if logo?.url && centerLogo}
6876
<a href="/">
6977
<img

‎src/components/Menu/Menu.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Menu = ({
2525
wrapperClassName
2626
])
2727

28-
const wrapMenu = logo?.url && items?.length && children
28+
const wrapMenu = (logo?.url || logo?.html) && items?.length && children
2929

3030
const toggleMenu = () => setActive(!active)
3131

@@ -51,6 +51,13 @@ const Menu = ({
5151
</a>
5252
)}
5353

54+
{!centerLogo && logo?.html && (
55+
<a
56+
href="/"
57+
dangerouslySetInnerHTML={{ __html: logo.html }}
58+
/>
59+
)}
60+
5461
{!!items?.length && (
5562
<ul>
5663
{items.map((item, index) => (
@@ -73,6 +80,13 @@ const Menu = ({
7380
</button>
7481
)}
7582

83+
{centerLogo && logo?.html && (
84+
<a
85+
href="/"
86+
dangerouslySetInnerHTML={{ __html: logo.html }}
87+
/>
88+
)}
89+
7690
{logo?.url && centerLogo && (
7791
<a href="/">
7892
<img

‎src/components/Menu/menu.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
gap: 20px;
5050
}
5151

52-
img {
52+
img,
53+
svg {
5354
display: block;
5455
}
5556

@@ -86,6 +87,7 @@
8687
padding: 0;
8788
border: 0;
8889
background: transparent;
90+
z-index: 98;
8991
cursor: pointer;
9092

9193
.meat {

‎src/components/Menu/menu.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ export type MenuProps = {
55
target?: string
66
}[]
77
logo?: {
8-
url: string
8+
url?: string
99
alt?: string
1010
width?: number
1111
height?: number
12+
html?: string
1213
} | null
1314
centerLogo?: boolean
1415
className?: string

‎src/components/Rating/rating.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
&.outline .empty {
1010
transform: scale(.9);
1111
transform-origin: left;
12-
color: black;
12+
color: var(--w-rating-empty-background);
1313
letter-spacing: 2px;
1414
text-shadow:
1515
-1px 0 var(--w-rating-empty-color),

0 commit comments

Comments
 (0)