Skip to content

Commit 0f62aed

Browse files
mskocikmskocik
committed
correct theme example and clean warnings on build
1 parent 5a3a7a7 commit 0f62aed

8 files changed

Lines changed: 156 additions & 22 deletions

File tree

‎src/documentation/07-theme/App.svelte‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,48 @@
22
import SveltyPicker from 'svelty-picker';
33
</script>
44

5+
The picker's mode responds to website light/dark mode setting.
56
<SveltyPicker pickerOnly />
67

8+
<style>
9+
:global(.dark) {
10+
--sdt-bg-main: #585858;
11+
--sdt-shadow-color: #ccc;
12+
--sdt-color: #eee;
13+
--sdt-primary: #e1ac4a;
14+
--sdt-disabled-date: #b22222;
15+
--sdt-disabled-date-bg: var(--sdt-bg-main);
16+
--sdt-btn-bg-hover: #777;
17+
--sdt-btn-header-bg-hover: #777;
18+
--sdt-color-selected: #fff;
19+
--sdt-today-indicator: #ccc;
20+
--sdt-clock-bg: #999;
21+
/* custom buttons */
22+
--sdt-today-bg: #e4a124;
23+
--sdt-today-color: #fff;
24+
--sdt-clear-color: #666;
25+
--sdt-clear-bg: #ddd;
26+
--sdt-clear-hover-color: #fff;
27+
--sdt-clear-hover-bg: #dc3545;
28+
}
29+
:global(.light) {
30+
--sdt-bg-main: #fff;
31+
--sdt-shadow-color: #ccc;
32+
--sdt-color: inherit;
33+
--sdt-primary: #286090;
34+
--sdt-disabled-date: #b22222;
35+
--sdt-disabled-date-bg: var(--sdt-bg-main);
36+
--sdt-btn-bg-hover: #eee;
37+
--sdt-btn-header-bg-hover: #dfdfdf;
38+
--sdt-color-selected: #fff;
39+
--sdt-today-indicator: #ccc;
40+
--sdt-clock-bg: #eeeded;
41+
/* custom buttons */
42+
--sdt-today-bg: #1e486d;
43+
--sdt-today-color: #fff;
44+
--sdt-clear-color: #dc3545;
45+
--sdt-clear-bg: #fff;
46+
--sdt-clear-hover-color: #fff;
47+
--sdt-clear-hover-bg: #dc3545;
48+
}
49+
</style>

‎src/documentation/07-theme/page.svx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,28 @@
22
title: Theme
33
---
44

5-
> TODO...
5+
Component exposes following CSS variables to customize it's appearance as you can see through whole in example below or on the homepage.
6+
7+
```css
8+
:root {
9+
--sdt-bg-main: #fff;
10+
--sdt-shadow-color: #ccc;
11+
--sdt-color: #000;
12+
--sdt-primary: #286090;
13+
--sdt-disabled-date: #b22222;
14+
--sdt-disabled-date-bg: var(--sdt-bg-main);
15+
--sdt-btn-bg-hover: #eee;
16+
--sdt-btn-header-bg-hover: #dfdfdf;
17+
--sdt-color-selected: var(--sdt-bg-main);
18+
--sdt-today-indicator: #ccc;
19+
--sdt-clock-bg: #eeeded;
20+
/* action buttons */
21+
--sdt-today-bg: #1e486d;
22+
--sdt-today-color: var(--sdt-bg-main);
23+
--sdt-clear-color: #dc3545;
24+
--sdt-clear-bg: transparent;
25+
--sdt-clear-hover-color: var(--sdt-bg-main);
26+
}
27+
```
28+
29+
You can play with them here:

‎src/routes/+layout.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
4141
onDestroy(() => {
4242
!isWide && typeof document !== 'undefined' && document.removeEventListener('click', outsideNavClick);
43-
theme.subscribe(val => console.log('Theme val', val));
4443
});
4544
4645
function outsideNavClick(e) {
@@ -67,10 +66,11 @@
6766
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12" />
6867
<line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" />
6968
</svg>
70-
<span class="leading-4">Menu</span>
69+
<span class="leading-4 hidden sm:block">Menu</span>
7170
</button>
7271
</div>
73-
<a href="{base}/" class="home-link flex-1 lg:flex-none text-center lg:text-left">📅 Svelty Picker</a>
72+
<a href="{base}/" class="home-link flex-1 lg:flex-none text-center lg:text-left">
73+
<span class="hidden sm:inline">📅</span> Svelty Picker</a>
7474
</div>
7575
<div class="flex items-center">
7676
<a class="inline-flex" href="https://github.com/mskocik/svelty-picker" target="_blank" rel="noreferrer" title="GitHub repository">

‎src/routes/TableOfContents.svelte‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,6 @@
4444
margin: 0 0 1em 0;
4545
}
4646
47-
.section-title {
48-
display: block;
49-
padding: 0 0 0.8rem 0;
50-
font: 400 var(--sk-text-xs) var(--sk-font);
51-
text-transform: uppercase;
52-
letter-spacing: 0.12em;
53-
font-weight: 700;
54-
}
55-
5647
div {
5748
display: flex;
5849
flex-direction: row;
@@ -83,11 +74,4 @@
8374
a:hover {
8475
color: var(--sk-text-1);
8576
}
86-
87-
.repl-link {
88-
flex: 0 1 auto;
89-
font-size: 1.2rem;
90-
font-weight: 700;
91-
margin-right: 2.5rem;
92-
}
9377
</style>

‎src/routes/_generated/data.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/styles/markdown.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ ul {
2424
margin: var(--spacing-4) auto var(--spacing-18);
2525
box-shadow: var(--shadow-elevation-medium);
2626
overflow-x: auto;
27-
max-width: var(--max-width-full);
2827
}
2928

3029
.highlight-line {

‎src/styles/tokens.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,28 @@
8686

8787
--toggle-dark: block;
8888
--toggle-light: none;
89+
90+
91+
--sdt-bg-main: #585858;
92+
--sdt-shadow-color: #ccc;
93+
--sdt-color: #eee;
94+
--sdt-primary: #e1ac4a;
95+
--sdt-disabled-date: #b22222;
96+
--sdt-disabled-date-bg: var(--sdt-bg-main);
97+
--sdt-btn-bg-hover: #777;
98+
--sdt-btn-header-bg-hover: #777;
99+
--sdt-color-selected: #fff;
100+
--sdt-today-indicator: #ccc;
101+
102+
--sdt-clock-bg: #999;
103+
104+
/* custom buttons */
105+
--sdt-today-bg: #e4a124;
106+
--sdt-today-color: #fff;
107+
--sdt-clear-color: #666;
108+
--sdt-clear-bg: #ddd;
109+
--sdt-clear-hover-color: #fff;
110+
--sdt-clear-hover-bg: #dc3545;
89111
}
90112

91113
html.light {
@@ -134,6 +156,26 @@
134156

135157
--toggle-dark: none;
136158
--toggle-light: block;
159+
160+
161+
--sdt-bg-main: #fff;
162+
--sdt-shadow-color: #ccc;
163+
--sdt-color: inherit;
164+
--sdt-primary: #286090;
165+
--sdt-disabled-date: #b22222;
166+
--sdt-disabled-date-bg: var(--sdt-bg-main);
167+
--sdt-btn-bg-hover: #eee;
168+
--sdt-btn-header-bg-hover: #dfdfdf;
169+
--sdt-color-selected: #fff;
170+
--sdt-today-indicator: #ccc;
171+
--sdt-clock-bg: #eeeded;
172+
/* custom buttons */
173+
--sdt-today-bg: #1e486d;
174+
--sdt-today-color: #fff;
175+
--sdt-clear-color: #dc3545;
176+
--sdt-clear-bg: #fff;
177+
--sdt-clear-hover-color: #fff;
178+
--sdt-clear-hover-bg: #dc3545;
137179
}
138180
}
139181

@@ -199,7 +241,27 @@
199241

200242
--toggle-dark: none;
201243
--toggle-light: block;
244+
202245

246+
/* picker */
247+
--sdt-bg-main: #fff;
248+
--sdt-shadow-color: #ccc;
249+
--sdt-color: inherit;
250+
--sdt-primary: #286090;
251+
--sdt-disabled-date: #b22222;
252+
--sdt-disabled-date-bg: var(--sdt-bg-main);
253+
--sdt-btn-bg-hover: #eee;
254+
--sdt-btn-header-bg-hover: #dfdfdf;
255+
--sdt-color-selected: #fff;
256+
--sdt-today-indicator: #ccc;
257+
--sdt-clock-bg: #eeeded;
258+
/* custom buttons */
259+
--sdt-today-bg: #1e486d;
260+
--sdt-today-color: #fff;
261+
--sdt-clear-color: #dc3545;
262+
--sdt-clear-bg: #fff;
263+
--sdt-clear-hover-color: #fff;
264+
--sdt-clear-hover-bg: #dc3545;
203265
}
204266

205267
html.dark {
@@ -246,6 +308,26 @@
246308

247309
--toggle-dark: block;
248310
--toggle-light: none;
311+
312+
313+
--sdt-bg-main: #585858;
314+
--sdt-shadow-color: #ccc;
315+
--sdt-color: #eee;
316+
--sdt-primary: #126cbb;
317+
--sdt-disabled-date: #b22222;
318+
--sdt-disabled-date-bg: var(--sdt-bg-main);
319+
--sdt-btn-bg-hover: #777;
320+
--sdt-btn-header-bg-hover: #777;
321+
--sdt-color-selected: #fff;
322+
--sdt-today-indicator: #ccc;
323+
--sdt-clock-bg: #999;
324+
/* custom buttons */
325+
--sdt-today-bg: #1e486d;
326+
--sdt-today-color: #fff;
327+
--sdt-clear-color: #666;
328+
--sdt-clear-bg: #ddd;
329+
--sdt-clear-hover-color: #fff;
330+
--sdt-clear-hover-bg: #dc3545;
249331
}
250332
}
251333

‎svelte.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const config = {
1212
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
1313
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
1414
adapter: adapter({
15+
pages: 'docs',
16+
assets: 'docs',
1517
fallback: 'app.html'
1618
}),
1719
},

0 commit comments

Comments
 (0)