@okaapp/oka-ui-sv 0.1.3 → 0.2.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/dist/components/core/button/button.css +2 -2
- package/dist/components/core/dialog/Dialog.svelte +72 -0
- package/dist/components/core/dialog/Dialog.svelte.d.ts +14 -0
- package/dist/components/core/dialog/dialog.css +181 -0
- package/dist/components/core/select/MultiSelect.svelte +0 -1
- package/dist/components/core/select/SingleSelect.svelte +1 -2
- package/dist/components/core/select/select.css +5 -2
- package/dist/components/core/tooltips/Tooltips.svelte +0 -0
- package/dist/components/core/tooltips/Tooltips.svelte.d.ts +26 -0
- package/dist/components/styling/oka-style-provider/oka-style.css +29 -29
- package/dist/components/styling/theme-switcher/theme-switcher.css +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
.button {
|
|
2
|
-
width:
|
|
3
|
-
min-width: 128px;
|
|
2
|
+
width: fit-content;
|
|
4
3
|
cursor: pointer;
|
|
5
4
|
border-radius: 12px;
|
|
6
5
|
display: inline-flex;
|
|
@@ -9,6 +8,7 @@
|
|
|
9
8
|
gap: 8px;
|
|
10
9
|
font-weight: 500;
|
|
11
10
|
transition: all 300ms ease;
|
|
11
|
+
flex-shrink: 0;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.button:active {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import "./dialog.css";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
import { Dialog, type WithoutChild } from "bits-ui";
|
|
5
|
+
import X from "phosphor-svelte/lib/X";
|
|
6
|
+
import Separator from "../separator/Separator.svelte";
|
|
7
|
+
|
|
8
|
+
type Props = Dialog.RootProps & {
|
|
9
|
+
trigger: Snippet;
|
|
10
|
+
title: Snippet;
|
|
11
|
+
subtitle?: Snippet;
|
|
12
|
+
description?: Snippet;
|
|
13
|
+
contentProps?: WithoutChild<Dialog.ContentProps>;
|
|
14
|
+
actionButtons?: Snippet;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
let {
|
|
18
|
+
open = $bindable(false),
|
|
19
|
+
children,
|
|
20
|
+
contentProps,
|
|
21
|
+
trigger,
|
|
22
|
+
title,
|
|
23
|
+
subtitle,
|
|
24
|
+
description,
|
|
25
|
+
actionButtons,
|
|
26
|
+
...restProps
|
|
27
|
+
}: Props = $props();
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<Dialog.Root bind:open {...restProps}>
|
|
31
|
+
<Dialog.Trigger>
|
|
32
|
+
{@render trigger()}
|
|
33
|
+
</Dialog.Trigger>
|
|
34
|
+
<Dialog.Portal>
|
|
35
|
+
<Dialog.Overlay class="dialog-overlay" />
|
|
36
|
+
<Dialog.Content {...contentProps} class="dialog-content">
|
|
37
|
+
<div class="dialog-topbar">
|
|
38
|
+
<div class="dialog-topbar-content">
|
|
39
|
+
<Dialog.Title class="dialog-title">
|
|
40
|
+
{@render title()}
|
|
41
|
+
</Dialog.Title>
|
|
42
|
+
{#if subtitle}
|
|
43
|
+
<div class="dialog-subtitle">
|
|
44
|
+
{@render subtitle()}
|
|
45
|
+
</div>
|
|
46
|
+
{/if}
|
|
47
|
+
</div>
|
|
48
|
+
<Dialog.Close class="dialog-close">
|
|
49
|
+
<div>
|
|
50
|
+
<X class="dialog-close-icon" />
|
|
51
|
+
<span class="sr-only">Close</span>
|
|
52
|
+
</div>
|
|
53
|
+
</Dialog.Close>
|
|
54
|
+
</div>
|
|
55
|
+
<Separator orientation="horizontal" />
|
|
56
|
+
<div class="dialog-body">
|
|
57
|
+
{#if description}
|
|
58
|
+
<Dialog.Description class="dialog-description">
|
|
59
|
+
{@render description()}
|
|
60
|
+
</Dialog.Description>
|
|
61
|
+
{/if}
|
|
62
|
+
{@render children?.()}
|
|
63
|
+
</div>
|
|
64
|
+
<Separator orientation="horizontal" />
|
|
65
|
+
{#if actionButtons}
|
|
66
|
+
<div class="dialog-botbar">
|
|
67
|
+
{@render actionButtons()}
|
|
68
|
+
</div>
|
|
69
|
+
{/if}
|
|
70
|
+
</Dialog.Content>
|
|
71
|
+
</Dialog.Portal>
|
|
72
|
+
</Dialog.Root>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import "./dialog.css";
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
3
|
+
import { Dialog, type WithoutChild } from "bits-ui";
|
|
4
|
+
type Props = Dialog.RootProps & {
|
|
5
|
+
trigger: Snippet;
|
|
6
|
+
title: Snippet;
|
|
7
|
+
subtitle?: Snippet;
|
|
8
|
+
description?: Snippet;
|
|
9
|
+
contentProps?: WithoutChild<Dialog.ContentProps>;
|
|
10
|
+
actionButtons?: Snippet;
|
|
11
|
+
};
|
|
12
|
+
declare const Dialog: import("svelte").Component<Props, {}, "open">;
|
|
13
|
+
type Dialog = ReturnType<typeof Dialog>;
|
|
14
|
+
export default Dialog;
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
.dialog-overlay {
|
|
2
|
+
position: fixed;
|
|
3
|
+
inset: 0;
|
|
4
|
+
z-index: 50;
|
|
5
|
+
background-color: rgba(29, 40, 56, 0.4);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.dialog-overlay[data-state="open"] {
|
|
9
|
+
animation: fadeIn 150ms ease-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.dialog-overlay[data-state="closed"] {
|
|
13
|
+
animation: fadeOut 150ms ease-in;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.dialog-content {
|
|
17
|
+
position: fixed;
|
|
18
|
+
left: 50%;
|
|
19
|
+
top: 50%;
|
|
20
|
+
z-index: 50;
|
|
21
|
+
width: fit-content;
|
|
22
|
+
max-width: 800px;
|
|
23
|
+
min-width: 480px;
|
|
24
|
+
border-radius: 12px;
|
|
25
|
+
background-color: var(--surface-primary);
|
|
26
|
+
transform: translate(-50%, -50%);
|
|
27
|
+
outline: none;
|
|
28
|
+
overflow: clip;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dialog-content[data-state="open"] {
|
|
32
|
+
animation: fadeIn 150ms ease-out, zoomIn 150ms ease-out;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dialog-content[data-state="closed"] {
|
|
36
|
+
animation: fadeOut 150ms ease-in, zoomOut 150ms ease-in;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dialog-topbar {
|
|
40
|
+
display: flex;
|
|
41
|
+
padding: 16px;
|
|
42
|
+
align-items: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dialog-botbar {
|
|
46
|
+
display: flex;
|
|
47
|
+
padding: 16px;
|
|
48
|
+
justify-content: end;
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.dialog-topbar-content {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.dialog-title {
|
|
60
|
+
display: flex;
|
|
61
|
+
width: 100%;
|
|
62
|
+
align-items: center;
|
|
63
|
+
font-size: 20px;
|
|
64
|
+
line-height: 1.2;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
text-overflow: ellipsis;
|
|
67
|
+
line-clamp: 1;
|
|
68
|
+
color: var(--content-primary);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.dialog-subtitle {
|
|
72
|
+
display: flex;
|
|
73
|
+
width: 100%;
|
|
74
|
+
align-items: center;
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
line-height: 1.5;
|
|
77
|
+
font-weight: 400;
|
|
78
|
+
text-overflow: ellipsis;
|
|
79
|
+
line-clamp: 1;
|
|
80
|
+
color: var(--content-secondary);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.dialog-body {
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
width: fit-content;
|
|
87
|
+
min-width: 480px;
|
|
88
|
+
max-width: 480px;
|
|
89
|
+
padding: 16px;
|
|
90
|
+
gap: 16px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.dialog-description {
|
|
94
|
+
font-size: 14px;
|
|
95
|
+
color: var(--content-secondary);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.dialog-close {
|
|
99
|
+
border-radius: 8px;
|
|
100
|
+
width: 40px;
|
|
101
|
+
height: 40px;
|
|
102
|
+
flex-shrink: 0;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: center;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.dialog-close:hover {
|
|
109
|
+
background-color: var(--action-secondary-hover);
|
|
110
|
+
transition: all;
|
|
111
|
+
transition-duration: 300ms;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.dialog-close:focus-visible {
|
|
115
|
+
outline: none;
|
|
116
|
+
box-shadow: 0 0 0 2px var(--accent-primary);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.dialog-close:active {
|
|
120
|
+
scale: 0.98;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.dialog-close-icon {
|
|
124
|
+
padding-top: 4px;
|
|
125
|
+
width: 24px;
|
|
126
|
+
height: 24px;
|
|
127
|
+
color: var(--content-primary);
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sr-only {
|
|
132
|
+
position: absolute;
|
|
133
|
+
width: 1px;
|
|
134
|
+
height: 1px;
|
|
135
|
+
padding: 0;
|
|
136
|
+
margin: -1px;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
clip: rect(0, 0, 0, 0);
|
|
139
|
+
white-space: nowrap;
|
|
140
|
+
border-width: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@keyframes fadeIn {
|
|
144
|
+
from {
|
|
145
|
+
opacity: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
to {
|
|
149
|
+
opacity: 1;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@keyframes fadeOut {
|
|
154
|
+
from {
|
|
155
|
+
opacity: 1;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
to {
|
|
159
|
+
opacity: 0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@keyframes zoomIn {
|
|
164
|
+
from {
|
|
165
|
+
transform: translate(-50%, -50%) scale(0.95);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
to {
|
|
169
|
+
transform: translate(-50%, -50%) scale(1);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@keyframes zoomOut {
|
|
174
|
+
from {
|
|
175
|
+
transform: translate(-50%, -50%) scale(1);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
to {
|
|
179
|
+
transform: translate(-50%, -50%) scale(0.95);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
...props
|
|
16
16
|
} = $props();
|
|
17
17
|
|
|
18
|
-
// let value = $state<string>("");
|
|
19
18
|
const selectedLabel = $derived(
|
|
20
19
|
value ? items.find((item) => item.value === value)?.label : placeholder,
|
|
21
20
|
);
|
|
@@ -58,7 +57,7 @@
|
|
|
58
57
|
{/if}
|
|
59
58
|
</div>
|
|
60
59
|
{#if selected}
|
|
61
|
-
<div class="
|
|
60
|
+
<div class="left-margin-push">
|
|
62
61
|
<Check
|
|
63
62
|
aria-label="Đang được chọn"
|
|
64
63
|
class="select-item-check"
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.select-trigger:hover {
|
|
27
|
-
background-color: var(--surface-secondary);
|
|
28
27
|
border-color: var(--stroke-medium);
|
|
29
28
|
}
|
|
30
29
|
|
|
@@ -86,7 +85,7 @@
|
|
|
86
85
|
background-color: var(--surface-primary);
|
|
87
86
|
outline: none;
|
|
88
87
|
z-index: 50;
|
|
89
|
-
height:
|
|
88
|
+
height: fit-content;
|
|
90
89
|
max-height: var(--bits-select-content-available-height);
|
|
91
90
|
width: var(--bits-select-anchor-width);
|
|
92
91
|
min-width: var(--bits-select-anchor-width);
|
|
@@ -178,6 +177,10 @@
|
|
|
178
177
|
animation: select-content-out 300ms ease;
|
|
179
178
|
}
|
|
180
179
|
|
|
180
|
+
.left-margin-push {
|
|
181
|
+
margin-left: auto;
|
|
182
|
+
}
|
|
183
|
+
|
|
181
184
|
@keyframes select-content-in {
|
|
182
185
|
from {
|
|
183
186
|
opacity: 0;
|
|
File without changes
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default Tooltips;
|
|
2
|
+
type Tooltips = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const Tooltips: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
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> {
|
|
15
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
+
$$bindings?: Bindings;
|
|
17
|
+
} & Exports;
|
|
18
|
+
(internal: unknown, props: {
|
|
19
|
+
$$events?: Events;
|
|
20
|
+
$$slots?: Slots;
|
|
21
|
+
}): Exports & {
|
|
22
|
+
$set?: any;
|
|
23
|
+
$on?: any;
|
|
24
|
+
};
|
|
25
|
+
z_$$bindings?: Bindings;
|
|
26
|
+
}
|
|
@@ -322,9 +322,9 @@ body.nord-light {
|
|
|
322
322
|
--accent-primary: #88C0D0;
|
|
323
323
|
--accent-primary-content: #2E3440;
|
|
324
324
|
--accent-primary-surface: #D8DEE9;
|
|
325
|
-
--accent-secondary: #
|
|
326
|
-
--accent-secondary-content: #
|
|
327
|
-
--accent-secondary-surface: #
|
|
325
|
+
--accent-secondary: #b93552;
|
|
326
|
+
--accent-secondary-content: #52212d;
|
|
327
|
+
--accent-secondary-surface: #f7e0e8;
|
|
328
328
|
--action-primary: #88C0D0;
|
|
329
329
|
--action-primary-hover: #8FBCBB;
|
|
330
330
|
--action-primary-muted: #C0CAD6;
|
|
@@ -351,9 +351,9 @@ body.nord-dark {
|
|
|
351
351
|
--accent-primary: #88C0D0;
|
|
352
352
|
--accent-primary-content: #ECEFF4;
|
|
353
353
|
--accent-primary-surface: #3B4252;
|
|
354
|
-
--accent-secondary: #
|
|
355
|
-
--accent-secondary-content: #
|
|
356
|
-
--accent-secondary-surface: #
|
|
354
|
+
--accent-secondary: #b83556;
|
|
355
|
+
--accent-secondary-content: #f7e0e8;
|
|
356
|
+
--accent-secondary-surface: #52212d;
|
|
357
357
|
--action-primary: #88C0D0;
|
|
358
358
|
--action-primary-hover: #8FBCBB;
|
|
359
359
|
--action-primary-muted: #4C566A;
|
|
@@ -437,10 +437,10 @@ body.nord-dark {
|
|
|
437
437
|
|
|
438
438
|
body.fengshui-kim {
|
|
439
439
|
--accent-primary: #F99D1B;
|
|
440
|
-
--accent-primary-content: #
|
|
440
|
+
--accent-primary-content: #442f07;
|
|
441
441
|
--accent-primary-surface: #FFF3D6;
|
|
442
442
|
--accent-secondary: #FFD463;
|
|
443
|
-
--accent-secondary-content: #
|
|
443
|
+
--accent-secondary-content: #463500;
|
|
444
444
|
--accent-secondary-surface: #FFEFBE;
|
|
445
445
|
|
|
446
446
|
--action-primary: #dfa30a;
|
|
@@ -452,7 +452,7 @@ body.fengshui-kim {
|
|
|
452
452
|
--action-secondary-press: #FFE6A0;
|
|
453
453
|
|
|
454
454
|
--content-inversed: #FFF8E9;
|
|
455
|
-
--content-muted: #
|
|
455
|
+
--content-muted: #dad1bc;
|
|
456
456
|
--content-primary: #2C1B00;
|
|
457
457
|
--content-secondary: #5C4500;
|
|
458
458
|
--content-tertiary: #8C7C5C;
|
|
@@ -470,15 +470,15 @@ body.fengshui-kim {
|
|
|
470
470
|
|
|
471
471
|
body.fengshui-moc {
|
|
472
472
|
--accent-primary: #BDE23A;
|
|
473
|
-
--accent-primary-content: #
|
|
473
|
+
--accent-primary-content: #314419;
|
|
474
474
|
--accent-primary-surface: #F4FBE4;
|
|
475
|
-
--accent-secondary: #
|
|
476
|
-
--accent-secondary-content: #
|
|
477
|
-
--accent-secondary-surface: #
|
|
475
|
+
--accent-secondary: #31ba1f;
|
|
476
|
+
--accent-secondary-content: #133f12;
|
|
477
|
+
--accent-secondary-surface: #99e78a;
|
|
478
478
|
|
|
479
479
|
--action-primary: #89c014;
|
|
480
480
|
--action-primary-hover: #BDE23A;
|
|
481
|
-
--action-primary-muted: #
|
|
481
|
+
--action-primary-muted: #e4ebd5;
|
|
482
482
|
--action-primary-press: #93C82A;
|
|
483
483
|
--action-secondary: #e3eccc;
|
|
484
484
|
--action-secondary-hover: #E9F5C2;
|
|
@@ -503,11 +503,11 @@ body.fengshui-moc {
|
|
|
503
503
|
|
|
504
504
|
body.fengshui-thuy {
|
|
505
505
|
--accent-primary: #0E93D3;
|
|
506
|
-
--accent-primary-content: #
|
|
507
|
-
--accent-primary-surface: #
|
|
508
|
-
--accent-secondary: #
|
|
509
|
-
--accent-secondary-content: #
|
|
510
|
-
--accent-secondary-surface: #
|
|
506
|
+
--accent-primary-content: #0c3547;
|
|
507
|
+
--accent-primary-surface: #d6e8f1;
|
|
508
|
+
--accent-secondary: #37e8e8;
|
|
509
|
+
--accent-secondary-content: #0e4444;
|
|
510
|
+
--accent-secondary-surface: #d7fbfc;
|
|
511
511
|
|
|
512
512
|
--action-primary: #37B2E8;
|
|
513
513
|
--action-primary-hover: #0E93D3;
|
|
@@ -518,7 +518,7 @@ body.fengshui-thuy {
|
|
|
518
518
|
--action-secondary-press: #CDEBFA;
|
|
519
519
|
|
|
520
520
|
--content-inversed: #F1FAFF;
|
|
521
|
-
--content-muted: #
|
|
521
|
+
--content-muted: #ccdae2;
|
|
522
522
|
--content-primary: #031F2C;
|
|
523
523
|
--content-secondary: #08384F;
|
|
524
524
|
--content-tertiary: #547C91;
|
|
@@ -530,16 +530,16 @@ body.fengshui-thuy {
|
|
|
530
530
|
--stroke-xtrabold: #031F2C;
|
|
531
531
|
|
|
532
532
|
--surface-primary: #FFF;
|
|
533
|
-
--surface-secondary: #
|
|
534
|
-
--surface-tertiary: #
|
|
533
|
+
--surface-secondary: #ebf4fa;
|
|
534
|
+
--surface-tertiary: #d6e8f1;
|
|
535
535
|
}
|
|
536
536
|
|
|
537
537
|
body.fengshui-hoa {
|
|
538
538
|
--accent-primary: #F5272E;
|
|
539
|
-
--accent-primary-content: #
|
|
539
|
+
--accent-primary-content: #3d0f0e;
|
|
540
540
|
--accent-primary-surface: #FFF4F2;
|
|
541
541
|
--accent-secondary: #FF6B3E;
|
|
542
|
-
--accent-secondary-content: #
|
|
542
|
+
--accent-secondary-content: #42160f;
|
|
543
543
|
--accent-secondary-surface: #FFE3DA;
|
|
544
544
|
|
|
545
545
|
--action-primary: #FF6B3E;
|
|
@@ -551,7 +551,7 @@ body.fengshui-hoa {
|
|
|
551
551
|
--action-secondary-press: #FFD2C8;
|
|
552
552
|
|
|
553
553
|
--content-inversed: #FFF4F2;
|
|
554
|
-
--content-muted: #
|
|
554
|
+
--content-muted: #e4cdca;
|
|
555
555
|
--content-primary: #280403;
|
|
556
556
|
--content-secondary: #512620;
|
|
557
557
|
--content-tertiary: #7A4138;
|
|
@@ -569,10 +569,10 @@ body.fengshui-hoa {
|
|
|
569
569
|
|
|
570
570
|
body.fengshui-tho {
|
|
571
571
|
--accent-primary: #683820;
|
|
572
|
-
--accent-primary-content: #
|
|
572
|
+
--accent-primary-content: #3d271b;
|
|
573
573
|
--accent-primary-surface: #F7EFE8;
|
|
574
574
|
--accent-secondary: #A26D4B;
|
|
575
|
-
--accent-secondary-content: #
|
|
575
|
+
--accent-secondary-content: #3f240f;
|
|
576
576
|
--accent-secondary-surface: #F1E3D8;
|
|
577
577
|
|
|
578
578
|
--action-primary: #A26D4B;
|
|
@@ -584,8 +584,8 @@ body.fengshui-tho {
|
|
|
584
584
|
--action-secondary-press: #EBDACF;
|
|
585
585
|
|
|
586
586
|
--content-inversed: #FCF7F3;
|
|
587
|
-
--content-muted: #
|
|
588
|
-
--content-primary: #
|
|
587
|
+
--content-muted: #ddd7c7;
|
|
588
|
+
--content-primary: #3f281b;
|
|
589
589
|
--content-secondary: #533B2C;
|
|
590
590
|
--content-tertiary: #8C7766;
|
|
591
591
|
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
outline: none;
|
|
60
60
|
background-color: var(--surface-primary);
|
|
61
61
|
z-index: 50;
|
|
62
|
-
height:
|
|
63
|
-
min-height:
|
|
62
|
+
height: fit-content;
|
|
63
|
+
min-height: 280px;
|
|
64
64
|
max-height: var(--bits-select-content-available-height);
|
|
65
65
|
width: 520px;
|
|
66
66
|
min-width: var(--bits-select-anchor-width);
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Avatar } from './components/core/avatar/Avatar.svelte';
|
|
|
2
2
|
export { default as Badge } from './components/core/badge/Badge.svelte';
|
|
3
3
|
export { default as Button } from './components/core/button/Button.svelte';
|
|
4
4
|
export { default as Checkbox } from './components/core/checkbox/Checkbox.svelte';
|
|
5
|
+
export { default as Dialog } from './components/core/dialog/Dialog.svelte';
|
|
5
6
|
export { default as Input } from './components/core/input/Input.svelte';
|
|
6
7
|
export { default as Loading } from './components/core/loading/Loading.svelte';
|
|
7
8
|
export { default as Pagination } from './components/core/pagination/Pagination.svelte';
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { default as Avatar } from './components/core/avatar/Avatar.svelte';
|
|
|
3
3
|
export { default as Badge } from './components/core/badge/Badge.svelte';
|
|
4
4
|
export { default as Button } from './components/core/button/Button.svelte';
|
|
5
5
|
export { default as Checkbox } from './components/core/checkbox/Checkbox.svelte';
|
|
6
|
+
export { default as Dialog } from './components/core/dialog/Dialog.svelte';
|
|
6
7
|
export { default as Input } from './components/core/input/Input.svelte';
|
|
7
8
|
export { default as Loading } from './components/core/loading/Loading.svelte';
|
|
8
9
|
export { default as Pagination } from './components/core/pagination/Pagination.svelte';
|