bref-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -0
- package/dist/base/icon/icon.svelte +78 -0
- package/dist/base/icon/icon.svelte.d.ts +7 -0
- package/dist/base/icon/index.d.ts +2 -0
- package/dist/base/icon/index.js +2 -0
- package/dist/base/icon/types.d.ts +8 -0
- package/dist/base/icon/types.js +1 -0
- package/dist/base/index.d.ts +3 -0
- package/dist/base/index.js +3 -0
- package/dist/base/theme/color-tokens.d.ts +38 -0
- package/dist/base/theme/color-tokens.js +148 -0
- package/dist/base/theme/index.d.ts +3 -0
- package/dist/base/theme/index.js +3 -0
- package/dist/base/theme/mode.d.ts +3 -0
- package/dist/base/theme/mode.js +14 -0
- package/dist/base/theme/theme.svelte +200 -0
- package/dist/base/theme/theme.svelte.d.ts +3 -0
- package/dist/base/theme/types.d.ts +30 -0
- package/dist/base/theme/types.js +20 -0
- package/dist/base/types.d.ts +3 -0
- package/dist/base/types.js +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -0
- package/dist/internal/demo-author.svelte +29 -0
- package/dist/internal/demo-author.svelte.d.ts +18 -0
- package/dist/internal/demo-code-snippet.svelte +68 -0
- package/dist/internal/demo-code-snippet.svelte.d.ts +6 -0
- package/dist/internal/demo-header.svelte +57 -0
- package/dist/internal/demo-header.svelte.d.ts +18 -0
- package/dist/internal/demo-icon-section.svelte +46 -0
- package/dist/internal/demo-icon-section.svelte.d.ts +18 -0
- package/dist/internal/demo-section.svelte +52 -0
- package/dist/internal/demo-section.svelte.d.ts +10 -0
- package/dist/internal/demo-types.svelte +61 -0
- package/dist/internal/demo-types.svelte.d.ts +18 -0
- package/package.json +65 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export const toggleThemeMode = (mode) => {
|
|
2
|
+
if (typeof window === 'undefined')
|
|
3
|
+
return console.warn('toggleThemeMode called on server side');
|
|
4
|
+
document.documentElement.setAttribute('data-theme', mode);
|
|
5
|
+
localStorage.setItem('theme-mode', mode);
|
|
6
|
+
};
|
|
7
|
+
export const initializeThemeMode = () => {
|
|
8
|
+
if (typeof window === 'undefined')
|
|
9
|
+
return 'light';
|
|
10
|
+
const stored = localStorage.getItem('theme-mode');
|
|
11
|
+
const resolved = stored ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
12
|
+
toggleThemeMode(resolved);
|
|
13
|
+
return resolved;
|
|
14
|
+
};
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { setCSSProperty, setThemeMode } from './color-tokens.js';
|
|
3
|
+
import { initializeThemeMode } from './mode.js';
|
|
4
|
+
import { DEFAULT_THEME, type ThemeProps } from './types.js';
|
|
5
|
+
|
|
6
|
+
const userTheme: ThemeProps | undefined | Partial<ThemeProps> = $props();
|
|
7
|
+
|
|
8
|
+
const theme: ThemeProps = {
|
|
9
|
+
...DEFAULT_THEME,
|
|
10
|
+
...userTheme,
|
|
11
|
+
paletteHex: {
|
|
12
|
+
...DEFAULT_THEME.paletteHex,
|
|
13
|
+
...(userTheme?.paletteHex ?? {})
|
|
14
|
+
},
|
|
15
|
+
surfaceHex: {
|
|
16
|
+
...DEFAULT_THEME.surfaceHex,
|
|
17
|
+
...(userTheme?.surfaceHex ?? {})
|
|
18
|
+
},
|
|
19
|
+
border: {
|
|
20
|
+
...DEFAULT_THEME.border,
|
|
21
|
+
...(userTheme?.border ?? {})
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
$effect.pre(() => {
|
|
26
|
+
setThemeMode(theme, 'light');
|
|
27
|
+
setThemeMode(theme, 'dark');
|
|
28
|
+
|
|
29
|
+
setCSSProperty(`--border-width`, `${theme.border.widthPx}px`);
|
|
30
|
+
setCSSProperty(`--border-radius`, `${theme.border.radiusRem}rem`);
|
|
31
|
+
setCSSProperty(`--spacing`, `${theme.spacingRem}rem`);
|
|
32
|
+
|
|
33
|
+
initializeThemeMode();
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<style>
|
|
38
|
+
:global(:root),
|
|
39
|
+
:global(:root[data-theme='light']) {
|
|
40
|
+
color-scheme: light;
|
|
41
|
+
--color-primary: var(--color-light-primary);
|
|
42
|
+
--color-primary-soft: var(--color-light-primary-soft);
|
|
43
|
+
--color-primary-base: var(--color-light-primary-base);
|
|
44
|
+
--color-primary-hover: var(--color-light-primary-hover);
|
|
45
|
+
--color-primary-active: var(--color-light-primary-active);
|
|
46
|
+
--color-primary-muted: var(--color-light-primary-muted);
|
|
47
|
+
--color-primary-contrast: var(--color-light-primary-contrast);
|
|
48
|
+
--color-secondary: var(--color-light-secondary);
|
|
49
|
+
--color-secondary-soft: var(--color-light-secondary-soft);
|
|
50
|
+
--color-secondary-base: var(--color-light-secondary-base);
|
|
51
|
+
--color-secondary-hover: var(--color-light-secondary-hover);
|
|
52
|
+
--color-secondary-active: var(--color-light-secondary-active);
|
|
53
|
+
--color-secondary-muted: var(--color-light-secondary-muted);
|
|
54
|
+
--color-secondary-contrast: var(--color-light-secondary-contrast);
|
|
55
|
+
--color-success: var(--color-light-success);
|
|
56
|
+
--color-success-soft: var(--color-light-success-soft);
|
|
57
|
+
--color-success-base: var(--color-light-success-base);
|
|
58
|
+
--color-success-hover: var(--color-light-success-hover);
|
|
59
|
+
--color-success-active: var(--color-light-success-active);
|
|
60
|
+
--color-success-muted: var(--color-light-success-muted);
|
|
61
|
+
--color-success-contrast: var(--color-light-success-contrast);
|
|
62
|
+
--color-warning: var(--color-light-warning);
|
|
63
|
+
--color-warning-soft: var(--color-light-warning-soft);
|
|
64
|
+
--color-warning-base: var(--color-light-warning-base);
|
|
65
|
+
--color-warning-hover: var(--color-light-warning-hover);
|
|
66
|
+
--color-warning-active: var(--color-light-warning-active);
|
|
67
|
+
--color-warning-muted: var(--color-light-warning-muted);
|
|
68
|
+
--color-warning-contrast: var(--color-light-warning-contrast);
|
|
69
|
+
--color-danger: var(--color-light-danger);
|
|
70
|
+
--color-danger-soft: var(--color-light-danger-soft);
|
|
71
|
+
--color-danger-base: var(--color-light-danger-base);
|
|
72
|
+
--color-danger-hover: var(--color-light-danger-hover);
|
|
73
|
+
--color-danger-active: var(--color-light-danger-active);
|
|
74
|
+
--color-danger-muted: var(--color-light-danger-muted);
|
|
75
|
+
--color-danger-contrast: var(--color-light-danger-contrast);
|
|
76
|
+
--color-info: var(--color-light-info);
|
|
77
|
+
--color-info-soft: var(--color-light-info-soft);
|
|
78
|
+
--color-info-base: var(--color-light-info-base);
|
|
79
|
+
--color-info-hover: var(--color-light-info-hover);
|
|
80
|
+
--color-info-active: var(--color-light-info-active);
|
|
81
|
+
--color-info-muted: var(--color-light-info-muted);
|
|
82
|
+
--color-info-contrast: var(--color-light-info-contrast);
|
|
83
|
+
--color-border: var(--color-light-border);
|
|
84
|
+
--color-background: var(--color-light-background);
|
|
85
|
+
--color-foreground: var(--color-light-foreground);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
:global(*) {
|
|
89
|
+
color: var(--color-foreground);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:global(body),
|
|
93
|
+
:global(main) {
|
|
94
|
+
background-color: var(--color-background);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:global(*) {
|
|
98
|
+
gap: var(--spacing);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:global(:root[data-theme='dark']) {
|
|
102
|
+
color-scheme: dark;
|
|
103
|
+
--color-primary: var(--color-dark-primary);
|
|
104
|
+
--color-primary-soft: var(--color-dark-primary-soft);
|
|
105
|
+
--color-primary-base: var(--color-dark-primary-base);
|
|
106
|
+
--color-primary-hover: var(--color-dark-primary-hover);
|
|
107
|
+
--color-primary-active: var(--color-dark-primary-active);
|
|
108
|
+
--color-primary-muted: var(--color-dark-primary-muted);
|
|
109
|
+
--color-primary-contrast: var(--color-dark-primary-contrast);
|
|
110
|
+
--color-secondary: var(--color-dark-secondary);
|
|
111
|
+
--color-secondary-soft: var(--color-dark-secondary-soft);
|
|
112
|
+
--color-secondary-base: var(--color-dark-secondary-base);
|
|
113
|
+
--color-secondary-hover: var(--color-dark-secondary-hover);
|
|
114
|
+
--color-secondary-active: var(--color-dark-secondary-active);
|
|
115
|
+
--color-secondary-muted: var(--color-dark-secondary-muted);
|
|
116
|
+
--color-secondary-contrast: var(--color-dark-secondary-contrast);
|
|
117
|
+
--color-success: var(--color-dark-success);
|
|
118
|
+
--color-success-soft: var(--color-dark-success-soft);
|
|
119
|
+
--color-success-base: var(--color-dark-success-base);
|
|
120
|
+
--color-success-hover: var(--color-dark-success-hover);
|
|
121
|
+
--color-success-active: var(--color-dark-success-active);
|
|
122
|
+
--color-success-muted: var(--color-dark-success-muted);
|
|
123
|
+
--color-success-contrast: var(--color-dark-success-contrast);
|
|
124
|
+
--color-warning: var(--color-dark-warning);
|
|
125
|
+
--color-warning-soft: var(--color-dark-warning-soft);
|
|
126
|
+
--color-warning-base: var(--color-dark-warning-base);
|
|
127
|
+
--color-warning-hover: var(--color-dark-warning-hover);
|
|
128
|
+
--color-warning-active: var(--color-dark-warning-active);
|
|
129
|
+
--color-warning-muted: var(--color-dark-warning-muted);
|
|
130
|
+
--color-warning-contrast: var(--color-dark-warning-contrast);
|
|
131
|
+
--color-danger: var(--color-dark-danger);
|
|
132
|
+
--color-danger-soft: var(--color-dark-danger-soft);
|
|
133
|
+
--color-danger-base: var(--color-dark-danger-base);
|
|
134
|
+
--color-danger-hover: var(--color-dark-danger-hover);
|
|
135
|
+
--color-danger-active: var(--color-dark-danger-active);
|
|
136
|
+
--color-danger-muted: var(--color-dark-danger-muted);
|
|
137
|
+
--color-danger-contrast: var(--color-dark-danger-contrast);
|
|
138
|
+
--color-info: var(--color-dark-info);
|
|
139
|
+
--color-info-soft: var(--color-dark-info-soft);
|
|
140
|
+
--color-info-base: var(--color-dark-info-base);
|
|
141
|
+
--color-info-hover: var(--color-dark-info-hover);
|
|
142
|
+
--color-info-active: var(--color-dark-info-active);
|
|
143
|
+
--color-info-muted: var(--color-dark-info-muted);
|
|
144
|
+
--color-info-contrast: var(--color-dark-info-contrast);
|
|
145
|
+
--color-border: var(--color-dark-border);
|
|
146
|
+
--color-background: var(--color-dark-background);
|
|
147
|
+
--color-foreground: var(--color-dark-foreground);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@media (prefers-color-scheme: dark) {
|
|
151
|
+
:global(:root:not([data-theme='light'])) {
|
|
152
|
+
color-scheme: dark;
|
|
153
|
+
--color-primary: var(--color-dark-primary);
|
|
154
|
+
--color-primary-soft: var(--color-dark-primary-soft);
|
|
155
|
+
--color-primary-base: var(--color-dark-primary-base);
|
|
156
|
+
--color-primary-hover: var(--color-dark-primary-hover);
|
|
157
|
+
--color-primary-active: var(--color-dark-primary-active);
|
|
158
|
+
--color-primary-muted: var(--color-dark-primary-muted);
|
|
159
|
+
--color-primary-contrast: var(--color-dark-primary-contrast);
|
|
160
|
+
--color-secondary: var(--color-dark-secondary);
|
|
161
|
+
--color-secondary-soft: var(--color-dark-secondary-soft);
|
|
162
|
+
--color-secondary-base: var(--color-dark-secondary-base);
|
|
163
|
+
--color-secondary-hover: var(--color-dark-secondary-hover);
|
|
164
|
+
--color-secondary-active: var(--color-dark-secondary-active);
|
|
165
|
+
--color-secondary-muted: var(--color-dark-secondary-muted);
|
|
166
|
+
--color-secondary-contrast: var(--color-dark-secondary-contrast);
|
|
167
|
+
--color-success: var(--color-dark-success);
|
|
168
|
+
--color-success-soft: var(--color-dark-success-soft);
|
|
169
|
+
--color-success-base: var(--color-dark-success-base);
|
|
170
|
+
--color-success-hover: var(--color-dark-success-hover);
|
|
171
|
+
--color-success-active: var(--color-dark-success-active);
|
|
172
|
+
--color-success-muted: var(--color-dark-success-muted);
|
|
173
|
+
--color-success-contrast: var(--color-dark-success-contrast);
|
|
174
|
+
--color-warning: var(--color-dark-warning);
|
|
175
|
+
--color-warning-soft: var(--color-dark-warning-soft);
|
|
176
|
+
--color-warning-base: var(--color-dark-warning-base);
|
|
177
|
+
--color-warning-hover: var(--color-dark-warning-hover);
|
|
178
|
+
--color-warning-active: var(--color-dark-warning-active);
|
|
179
|
+
--color-warning-muted: var(--color-dark-warning-muted);
|
|
180
|
+
--color-warning-contrast: var(--color-dark-warning-contrast);
|
|
181
|
+
--color-danger: var(--color-dark-danger);
|
|
182
|
+
--color-danger-soft: var(--color-dark-danger-soft);
|
|
183
|
+
--color-danger-base: var(--color-dark-danger-base);
|
|
184
|
+
--color-danger-hover: var(--color-dark-danger-hover);
|
|
185
|
+
--color-danger-active: var(--color-dark-danger-active);
|
|
186
|
+
--color-danger-muted: var(--color-dark-danger-muted);
|
|
187
|
+
--color-danger-contrast: var(--color-dark-danger-contrast);
|
|
188
|
+
--color-info: var(--color-dark-info);
|
|
189
|
+
--color-info-soft: var(--color-dark-info-soft);
|
|
190
|
+
--color-info-base: var(--color-dark-info-base);
|
|
191
|
+
--color-info-hover: var(--color-dark-info-hover);
|
|
192
|
+
--color-info-active: var(--color-dark-info-active);
|
|
193
|
+
--color-info-muted: var(--color-dark-info-muted);
|
|
194
|
+
--color-info-contrast: var(--color-dark-info-contrast);
|
|
195
|
+
--color-border: var(--color-dark-border);
|
|
196
|
+
--color-background: var(--color-dark-background);
|
|
197
|
+
--color-foreground: var(--color-dark-foreground);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
</style>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export type ThemeMode = 'light' | 'dark';
|
|
2
|
+
export interface ThemeProps {
|
|
3
|
+
paletteHex: {
|
|
4
|
+
primary: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
success: string;
|
|
7
|
+
warning: string;
|
|
8
|
+
danger: string;
|
|
9
|
+
info: string;
|
|
10
|
+
};
|
|
11
|
+
surfaceHex: {
|
|
12
|
+
background: string;
|
|
13
|
+
foreground: string;
|
|
14
|
+
};
|
|
15
|
+
border: {
|
|
16
|
+
widthPx: number;
|
|
17
|
+
radiusRem: number;
|
|
18
|
+
colorHex: string;
|
|
19
|
+
};
|
|
20
|
+
spacingRem: number;
|
|
21
|
+
}
|
|
22
|
+
export interface ColorTokenProps {
|
|
23
|
+
soft: string;
|
|
24
|
+
base: string;
|
|
25
|
+
hover: string;
|
|
26
|
+
active: string;
|
|
27
|
+
muted: string;
|
|
28
|
+
contrast: string;
|
|
29
|
+
}
|
|
30
|
+
export declare const DEFAULT_THEME: ThemeProps;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export const DEFAULT_THEME = {
|
|
2
|
+
paletteHex: {
|
|
3
|
+
primary: '#736CED',
|
|
4
|
+
secondary: '#E08D79',
|
|
5
|
+
success: '#60935D',
|
|
6
|
+
warning: '#E67F0D',
|
|
7
|
+
danger: '#F03A47',
|
|
8
|
+
info: '#4D9DE0'
|
|
9
|
+
},
|
|
10
|
+
surfaceHex: {
|
|
11
|
+
background: '#eee',
|
|
12
|
+
foreground: '#222'
|
|
13
|
+
},
|
|
14
|
+
border: {
|
|
15
|
+
widthPx: 1,
|
|
16
|
+
radiusRem: 0.5,
|
|
17
|
+
colorHex: '#CCCCCC'
|
|
18
|
+
},
|
|
19
|
+
spacingRem: 1
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Icon from '../base/icon/icon.svelte';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<span>
|
|
6
|
+
Made with <Icon name="favorite" color="danger" filled /> in Paris, by
|
|
7
|
+
<a href="https://github.com/feuersteiner" target="_blank" rel="noopener noreferrer">Feuerstein.</a>
|
|
8
|
+
</span>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
a {
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
color: inherit;
|
|
14
|
+
display: inline-block;
|
|
15
|
+
width: 5rem;
|
|
16
|
+
height: 1.5rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
a:hover {
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
span {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: 0.5rem;
|
|
27
|
+
color: color-mix(in srgb, var(--color-foreground) 50%, var(--color-background));
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const DemoAuthor: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type DemoAuthor = InstanceType<typeof DemoAuthor>;
|
|
18
|
+
export default DemoAuthor;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
snippet
|
|
4
|
+
}: {
|
|
5
|
+
snippet: string;
|
|
6
|
+
} = $props();
|
|
7
|
+
|
|
8
|
+
let hasCopied = $state(false);
|
|
9
|
+
|
|
10
|
+
const onCopyClick = () => {
|
|
11
|
+
navigator.clipboard.writeText(snippet).then(() => {
|
|
12
|
+
hasCopied = true;
|
|
13
|
+
setTimeout(() => (hasCopied = false), 3000);
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div>
|
|
19
|
+
<pre>
|
|
20
|
+
<code>{snippet}</code>
|
|
21
|
+
</pre>
|
|
22
|
+
<button onclick={onCopyClick}>copy</button>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<style>
|
|
26
|
+
div {
|
|
27
|
+
display: flex;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: fit-content;
|
|
30
|
+
padding: 1rem;
|
|
31
|
+
gap: 1rem;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
border-radius: 0.75rem;
|
|
34
|
+
background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
|
|
35
|
+
border: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
|
|
36
|
+
backdrop-filter: blur(8px);
|
|
37
|
+
}
|
|
38
|
+
code {
|
|
39
|
+
white-space: pre-wrap;
|
|
40
|
+
word-break: break-word;
|
|
41
|
+
flex-grow: 1;
|
|
42
|
+
font-family: monospace;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
text-align: left;
|
|
45
|
+
opacity: 60%;
|
|
46
|
+
font-size: small;
|
|
47
|
+
}
|
|
48
|
+
code,
|
|
49
|
+
pre {
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: fit-content;
|
|
52
|
+
}
|
|
53
|
+
pre {
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: flex-start;
|
|
57
|
+
}
|
|
58
|
+
button {
|
|
59
|
+
display: flex;
|
|
60
|
+
padding: 0.5rem 1rem;
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: fit-content;
|
|
63
|
+
text-transform: capitalize;
|
|
64
|
+
align-items: center;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import DemoSection from './demo-section.svelte';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<DemoSection>
|
|
6
|
+
<img src={'favicon.svg'} alt="Logo" />
|
|
7
|
+
<h1>Bref</h1>
|
|
8
|
+
<p>A truly Svelte-esque UI Component Library.</p>
|
|
9
|
+
|
|
10
|
+
<div>
|
|
11
|
+
<span class="word">bref</span>
|
|
12
|
+
<span class="phonetic">/bʁɛf/</span>
|
|
13
|
+
<span class="part-of-speech">adjective</span>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div>
|
|
17
|
+
<span class="origin-label">Origin</span>
|
|
18
|
+
<span class="origin-value">French</span>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<ol>
|
|
22
|
+
<li>Brief, short, concise</li>
|
|
23
|
+
<li><em>In short</em> — used to summarize or conclude</li>
|
|
24
|
+
<li>Components that do more with less</li>
|
|
25
|
+
</ol>
|
|
26
|
+
</DemoSection>
|
|
27
|
+
|
|
28
|
+
<style>
|
|
29
|
+
.word {
|
|
30
|
+
font-size: 1.5rem;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.phonetic {
|
|
35
|
+
font-family: 'Courier New', monospace;
|
|
36
|
+
font-size: 0.95rem;
|
|
37
|
+
opacity: 0.7;
|
|
38
|
+
letter-spacing: 0.02em;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.part-of-speech {
|
|
42
|
+
font-size: 0.75rem;
|
|
43
|
+
font-style: italic;
|
|
44
|
+
opacity: 0.6;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.origin-label {
|
|
48
|
+
opacity: 0.5;
|
|
49
|
+
text-transform: uppercase;
|
|
50
|
+
font-size: 0.65rem;
|
|
51
|
+
letter-spacing: 0.08em;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.origin-value {
|
|
55
|
+
opacity: 0.8;
|
|
56
|
+
}
|
|
57
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const DemoHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type DemoHeader = InstanceType<typeof DemoHeader>;
|
|
18
|
+
export default DemoHeader;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Icon from '../base/icon/icon.svelte';
|
|
3
|
+
import DemoSection from './demo-section.svelte';
|
|
4
|
+
import DemoCodeSnippet from './demo-code-snippet.svelte';
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<DemoSection
|
|
8
|
+
title="Icons"
|
|
9
|
+
id="icons"
|
|
10
|
+
description="Icons with customizable size, color, and fill. Based on Google Material Symbols."
|
|
11
|
+
>
|
|
12
|
+
<h3>Sizes</h3>
|
|
13
|
+
<div>
|
|
14
|
+
<Icon size="x-small" name="person_2" />
|
|
15
|
+
<Icon size="small" name="person_2" />
|
|
16
|
+
<Icon size="medium" name="person_2" />
|
|
17
|
+
<Icon size="large" name="person_2" />
|
|
18
|
+
<Icon size="x-large" name="person_2" />
|
|
19
|
+
</div>
|
|
20
|
+
<h3>Colors</h3>
|
|
21
|
+
<div>
|
|
22
|
+
<Icon name="person_2" color="primary" />
|
|
23
|
+
<Icon name="person_2" color="secondary" />
|
|
24
|
+
<Icon name="person_2" color="success" />
|
|
25
|
+
<Icon name="person_2" color="warning" />
|
|
26
|
+
<Icon name="person_2" color="danger" />
|
|
27
|
+
<Icon name="person_2" color="info" />
|
|
28
|
+
<Icon name="person_2" color="foreground" />
|
|
29
|
+
</div>
|
|
30
|
+
<h3>Filled vs Outlined</h3>
|
|
31
|
+
<div>
|
|
32
|
+
<Icon name="person_2" />
|
|
33
|
+
<Icon name="person_2" filled />
|
|
34
|
+
</div>
|
|
35
|
+
<h3>Usage Example</h3>
|
|
36
|
+
<DemoCodeSnippet snippet={`<Icon size="large" color="primary" name="person_2" filled />`} />
|
|
37
|
+
</DemoSection>
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
div {
|
|
41
|
+
display: flex;
|
|
42
|
+
gap: 1rem;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const DemoIconSection: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type DemoIconSection = InstanceType<typeof DemoIconSection>;
|
|
18
|
+
export default DemoIconSection;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
title,
|
|
7
|
+
description,
|
|
8
|
+
id
|
|
9
|
+
}: {
|
|
10
|
+
children: Snippet;
|
|
11
|
+
title?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
id?: string;
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<section {id}>
|
|
18
|
+
{#if title}
|
|
19
|
+
<h2>{title}</h2>
|
|
20
|
+
{/if}
|
|
21
|
+
{#if description}
|
|
22
|
+
<p>{description}</p>
|
|
23
|
+
{/if}
|
|
24
|
+
{@render children()}
|
|
25
|
+
</section>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
section {
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: 1rem;
|
|
31
|
+
align-items: center;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
background-color: color-mix(in srgb, var(--color-background) 90%, transparent);
|
|
34
|
+
backdrop-filter: blur(2rem);
|
|
35
|
+
padding: 2rem;
|
|
36
|
+
width: 100%;
|
|
37
|
+
max-width: 50rem;
|
|
38
|
+
transition: all 0.3s ease;
|
|
39
|
+
border-radius: 2rem;
|
|
40
|
+
border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
|
|
41
|
+
}
|
|
42
|
+
section:hover {
|
|
43
|
+
border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
|
|
44
|
+
box-shadow: 0 0 3rem color-mix(in srgb, var(--color-background) 50%, transparent);
|
|
45
|
+
}
|
|
46
|
+
h2 {
|
|
47
|
+
font-size: 2rem;
|
|
48
|
+
}
|
|
49
|
+
p {
|
|
50
|
+
font-size: 1.1rem;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
children: Snippet;
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
id?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const DemoSection: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type DemoSection = ReturnType<typeof DemoSection>;
|
|
10
|
+
export default DemoSection;
|