do-ui-design-system 0.0.1 → 0.0.2
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/atoms/Button/Button.svelte +7 -7
- package/dist/atoms/Button/Button.svelte.d.ts +17 -8
- package/dist/atoms/Button/iProps.d.ts +2 -2
- package/dist/atoms/Icons/Icon.svelte +2 -2
- package/dist/do-theme/button.css +43 -30
- package/dist/do-theme/font.css +4 -0
- package/dist/do-theme/index.css +1 -1
- package/dist/do-theme/post-compiled.css +364 -70
- package/dist/do-theme/var-dark.css +26 -14
- package/dist/do-theme/var-light.css +25 -8
- package/dist/molecules/IconButton/IconButton.svelte +16 -17
- package/dist/molecules/IconButton/IconButton.svelte.d.ts +11 -11
- package/dist/molecules/IconButton/iProps.d.ts +3 -3
- package/package.json +1 -1
- package/src/lib/do-theme/index.css +1 -1
- package/dist/do-theme/var-hybrid.css +0 -47
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { iProps } from './iProps.ts';
|
|
3
3
|
|
|
4
|
-
export let
|
|
5
|
-
export let size: iProps['size'] = 'md';
|
|
4
|
+
export let color: iProps['color'] = 'btn-primary';
|
|
5
|
+
export let size: iProps['size'] = 'btn-md';
|
|
6
6
|
export let label: iProps['label'] = '';
|
|
7
7
|
export let disabled: iProps['disabled'] = false;
|
|
8
|
-
export let onClick: iProps['onClick'];
|
|
9
8
|
export let loading: iProps['loading'] = false;
|
|
10
9
|
export let type: iProps['type'] = 'button';
|
|
11
10
|
</script>
|
|
@@ -13,8 +12,8 @@
|
|
|
13
12
|
<!--
|
|
14
13
|
@component
|
|
15
14
|
Props:
|
|
16
|
-
-
|
|
17
|
-
- size
|
|
15
|
+
- color?: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
|
|
16
|
+
- size?: any tailwind size class.
|
|
18
17
|
- label: string
|
|
19
18
|
- onClick: () => void
|
|
20
19
|
- disabled: boolean
|
|
@@ -24,10 +23,11 @@ Props:
|
|
|
24
23
|
<button
|
|
25
24
|
{...$$restProps}
|
|
26
25
|
{type}
|
|
27
|
-
class={['btn',
|
|
26
|
+
class={['btn', `${color}`, `${size}`].join(' ')}
|
|
28
27
|
{disabled}
|
|
29
|
-
on:click
|
|
28
|
+
on:click
|
|
30
29
|
>
|
|
30
|
+
<slot />
|
|
31
31
|
{label}
|
|
32
32
|
<span class="loading loading-spinner hidden" class:!inline={loading}></span>
|
|
33
33
|
</button>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { iProps } from './iProps.ts';
|
|
2
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> {
|
|
3
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
3
|
$$bindings?: Bindings;
|
|
@@ -12,27 +11,37 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
12
11
|
};
|
|
13
12
|
z_$$bindings?: Bindings;
|
|
14
13
|
}
|
|
14
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
15
|
+
default: any;
|
|
16
|
+
} ? Props extends Record<string, never> ? any : {
|
|
17
|
+
children?: any;
|
|
18
|
+
} : {});
|
|
15
19
|
/**
|
|
16
20
|
* Props:
|
|
17
|
-
* -
|
|
18
|
-
* - size
|
|
21
|
+
* - color?: btn-primary | btn-secondary | btn-neutral | btn-accent, or any other tailwind color class
|
|
22
|
+
* - size?: any tailwind size class.
|
|
19
23
|
* - label: string
|
|
20
24
|
* - onClick: () => void
|
|
21
25
|
* - disabled: boolean
|
|
22
26
|
* - loading: boolean
|
|
23
27
|
* - type: 'button' | 'submit' | 'reset'
|
|
24
28
|
*/
|
|
25
|
-
declare const Button: $$__sveltets_2_IsomorphicComponent<{
|
|
29
|
+
declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
26
30
|
[x: string]: any;
|
|
27
|
-
|
|
28
|
-
size?:
|
|
31
|
+
color?: string | undefined;
|
|
32
|
+
size?: string | undefined;
|
|
29
33
|
label?: string | undefined;
|
|
30
34
|
disabled?: boolean | undefined;
|
|
31
|
-
onClick: iProps["onClick"];
|
|
32
35
|
loading?: boolean | undefined;
|
|
33
36
|
type?: "submit" | "reset" | "button" | undefined;
|
|
34
37
|
}, {
|
|
38
|
+
default: {};
|
|
39
|
+
}>, {
|
|
40
|
+
click: MouseEvent;
|
|
41
|
+
} & {
|
|
35
42
|
[evt: string]: CustomEvent<any>;
|
|
36
|
-
}, {
|
|
43
|
+
}, {
|
|
44
|
+
default: {};
|
|
45
|
+
}, {}, string>;
|
|
37
46
|
type Button = InstanceType<typeof Button>;
|
|
38
47
|
export default Button;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
2
2
|
export interface iProps extends HTMLButtonAttributes {
|
|
3
|
-
|
|
3
|
+
color?: 'btn-primary' | 'btn-secondary' | 'btn-neutral' | 'btn-accent' | string;
|
|
4
4
|
type?: 'button' | 'submit' | 'reset';
|
|
5
|
-
size?:
|
|
5
|
+
size?: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
onClick?: () => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { type iProps } from "./iProps.ts";
|
|
3
3
|
|
|
4
|
-
export let name: iProps['name'] = "";
|
|
4
|
+
export let name: iProps['name'] = "icon-contrast";
|
|
5
5
|
export let color: iProps['color'] = "text-inherit";
|
|
6
6
|
export let size: iProps['size'] = "text-base";
|
|
7
7
|
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
|
|
19
19
|
<i
|
|
20
20
|
{...$$restProps}
|
|
21
|
-
class={
|
|
21
|
+
class={`no-underline inline-block py-1.5 px-1 ${name} ${color} ${size}`}
|
|
22
22
|
></i>
|
package/dist/do-theme/button.css
CHANGED
|
@@ -1,57 +1,70 @@
|
|
|
1
|
+
.btn {
|
|
2
|
+
font-weight: 500;
|
|
3
|
+
padding: 6px 16px;
|
|
4
|
+
}
|
|
1
5
|
|
|
6
|
+
.loading-spinner {
|
|
7
|
+
width: 1em;
|
|
8
|
+
height: 1em;
|
|
9
|
+
}
|
|
2
10
|
|
|
3
11
|
.btn-rounded {
|
|
4
|
-
|
|
12
|
+
border-radius: 3rem;
|
|
5
13
|
}
|
|
6
14
|
|
|
7
15
|
.btn-primary {
|
|
8
|
-
|
|
16
|
+
border-color: var(--do-color-border-primary);
|
|
9
17
|
}
|
|
10
18
|
|
|
11
19
|
.btn-primary:hover {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
20
|
+
color: var(--color-primary);
|
|
21
|
+
border-color: var(--do-transparent);
|
|
22
|
+
background-color: var(--do-color-primary-hover);
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
.btn-primary:disabled {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
26
|
+
color: var(--color-primary-content);
|
|
27
|
+
border-color: var(--do-transparent);
|
|
28
|
+
background-color: var(--do-color-primary-disabled);
|
|
21
29
|
}
|
|
22
30
|
|
|
23
31
|
.btn-secondary:hover {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
32
|
+
color: var(--color-primary-content);
|
|
33
|
+
border-color: var(--do-transparent);
|
|
34
|
+
background-color: var(--do-color-secondary-hover);
|
|
27
35
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
|
|
37
|
+
.btn-secondary:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
38
|
+
border-color: var(--do-transparent);
|
|
39
|
+
background-color: var(--do-transparent);
|
|
31
40
|
}
|
|
32
41
|
|
|
33
42
|
.btn-neutral {
|
|
34
|
-
|
|
35
|
-
|
|
43
|
+
border-color: var(--do-transparent);
|
|
44
|
+
background-color: var(--do-transparent);
|
|
45
|
+
text-decoration: underline;
|
|
36
46
|
}
|
|
37
47
|
|
|
38
|
-
.btn-neutral span{
|
|
39
|
-
text-decoration: underline;
|
|
40
|
-
}
|
|
41
48
|
.btn-neutral:hover {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
color: var(--color-primary-content);
|
|
50
|
+
border-color: var(--do-transparent);
|
|
51
|
+
background-color: var(--color-primary);
|
|
45
52
|
}
|
|
46
53
|
|
|
47
|
-
.btn-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
.btn-neutral:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
55
|
+
border-color: var(--do-transparent);
|
|
56
|
+
background-color: var(--do-transparent);
|
|
57
|
+
text-decoration: underline;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.btn-accent:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
61
|
+
color: var(--color-neutral);
|
|
62
|
+
border-color: var(--do-transparent);
|
|
63
|
+
background-color: var(--do-color-accent-disabled);
|
|
51
64
|
}
|
|
52
65
|
|
|
53
66
|
.btn-accent:hover {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
67
|
+
color: var(--color-accent);
|
|
68
|
+
border-color: #dbeafe;
|
|
69
|
+
background-color: var(--color-accent-content);
|
|
70
|
+
}
|
package/dist/do-theme/index.css
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
@import "./var-light.css";
|
|
4
4
|
@import "./var-dark.css";
|
|
5
|
-
@import "./var-hybrid.css";
|
|
6
5
|
@import "./button.css";
|
|
7
6
|
@import "./border.css";
|
|
8
7
|
@import "./color.css";
|
|
9
8
|
@import "./icomoon/icons.css";
|
|
9
|
+
@import "./font.css";
|
|
10
10
|
|
|
11
11
|
/*
|
|
12
12
|
There are 2 ways to modify themes (light [default] and dark):
|
|
@@ -12,9 +12,9 @@ html, :host {
|
|
|
12
12
|
-moz-tab-size: 4;
|
|
13
13
|
-o-tab-size: 4;
|
|
14
14
|
tab-size: 4;
|
|
15
|
-
font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
16
|
-
font-feature-settings: normal;
|
|
17
|
-
font-variation-settings: normal;
|
|
15
|
+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
|
16
|
+
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
17
|
+
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
18
18
|
-webkit-tap-highlight-color: transparent;
|
|
19
19
|
}
|
|
20
20
|
hr {
|
|
@@ -39,9 +39,9 @@ b, strong {
|
|
|
39
39
|
font-weight: bolder;
|
|
40
40
|
}
|
|
41
41
|
code, kbd, samp, pre {
|
|
42
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
43
|
-
font-feature-settings: normal;
|
|
44
|
-
font-variation-settings: normal;
|
|
42
|
+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
|
43
|
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
44
|
+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
45
45
|
font-size: 1em;
|
|
46
46
|
}
|
|
47
47
|
small {
|
|
@@ -811,6 +811,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
811
811
|
}
|
|
812
812
|
}
|
|
813
813
|
}
|
|
814
|
+
.mb-4 {
|
|
815
|
+
margin-bottom: calc(var(--spacing) * 4);
|
|
816
|
+
}
|
|
814
817
|
.status {
|
|
815
818
|
display: inline-block;
|
|
816
819
|
aspect-ratio: 1 / 1;
|
|
@@ -824,7 +827,7 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
824
827
|
background-position: center;
|
|
825
828
|
background-repeat: no-repeat;
|
|
826
829
|
vertical-align: middle;
|
|
827
|
-
color:
|
|
830
|
+
color: color-mix(in srgb, #000 30%, transparent);
|
|
828
831
|
@supports (color: color-mix(in lab, red, red)) {
|
|
829
832
|
color: color-mix(in oklab, var(--color-black) 30%, transparent);
|
|
830
833
|
}
|
|
@@ -847,6 +850,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
847
850
|
.\!inline {
|
|
848
851
|
display: inline !important;
|
|
849
852
|
}
|
|
853
|
+
.block {
|
|
854
|
+
display: block;
|
|
855
|
+
}
|
|
850
856
|
.contents {
|
|
851
857
|
display: contents;
|
|
852
858
|
}
|
|
@@ -859,6 +865,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
859
865
|
.hidden {
|
|
860
866
|
display: none;
|
|
861
867
|
}
|
|
868
|
+
.inline-block {
|
|
869
|
+
display: inline-block;
|
|
870
|
+
}
|
|
862
871
|
.table {
|
|
863
872
|
display: table;
|
|
864
873
|
}
|
|
@@ -868,20 +877,306 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
868
877
|
.flex-row {
|
|
869
878
|
flex-direction: row;
|
|
870
879
|
}
|
|
880
|
+
.flex-wrap {
|
|
881
|
+
flex-wrap: wrap;
|
|
882
|
+
}
|
|
883
|
+
.gap-4 {
|
|
884
|
+
gap: calc(var(--spacing) * 4);
|
|
885
|
+
}
|
|
886
|
+
.gap-\[2rem\] {
|
|
887
|
+
gap: 2rem;
|
|
888
|
+
}
|
|
889
|
+
.rounded {
|
|
890
|
+
border-radius: 0.25rem;
|
|
891
|
+
}
|
|
871
892
|
.loading-spinner {
|
|
872
893
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
|
|
873
894
|
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
|
|
874
895
|
}
|
|
896
|
+
.px-1 {
|
|
897
|
+
padding-inline: calc(var(--spacing) * 1);
|
|
898
|
+
}
|
|
899
|
+
.py-1\.5 {
|
|
900
|
+
padding-block: calc(var(--spacing) * 1.5);
|
|
901
|
+
}
|
|
902
|
+
.text-2xl {
|
|
903
|
+
font-size: var(--text-2xl);
|
|
904
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
905
|
+
}
|
|
906
|
+
.text-3xl {
|
|
907
|
+
font-size: var(--text-3xl);
|
|
908
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
909
|
+
}
|
|
910
|
+
.text-base {
|
|
911
|
+
font-size: var(--text-base);
|
|
912
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
913
|
+
}
|
|
914
|
+
.text-lg {
|
|
915
|
+
font-size: var(--text-lg);
|
|
916
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
917
|
+
}
|
|
918
|
+
.text-sm {
|
|
919
|
+
font-size: var(--text-sm);
|
|
920
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
921
|
+
}
|
|
922
|
+
.text-xl {
|
|
923
|
+
font-size: var(--text-xl);
|
|
924
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
925
|
+
}
|
|
926
|
+
.text-xs {
|
|
927
|
+
font-size: var(--text-xs);
|
|
928
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
929
|
+
}
|
|
930
|
+
.text-blue-600 {
|
|
931
|
+
color: var(--color-blue-600);
|
|
932
|
+
}
|
|
933
|
+
.text-green-600 {
|
|
934
|
+
color: var(--color-green-600);
|
|
935
|
+
}
|
|
875
936
|
.text-inherit {
|
|
876
937
|
color: inherit;
|
|
877
938
|
}
|
|
939
|
+
.text-red-600 {
|
|
940
|
+
color: var(--color-red-600);
|
|
941
|
+
}
|
|
942
|
+
.text-zinc-600 {
|
|
943
|
+
color: var(--color-zinc-600);
|
|
944
|
+
}
|
|
945
|
+
.no-underline {
|
|
946
|
+
text-decoration-line: none;
|
|
947
|
+
}
|
|
878
948
|
.underline {
|
|
879
949
|
text-decoration-line: underline;
|
|
880
950
|
}
|
|
951
|
+
.btn-lg {
|
|
952
|
+
--fontsize: 1.125rem;
|
|
953
|
+
--btn-p: 1.25rem;
|
|
954
|
+
--size: calc(var(--size-field, 0.25rem) * 12);
|
|
955
|
+
}
|
|
956
|
+
.btn-md {
|
|
957
|
+
--fontsize: 0.875rem;
|
|
958
|
+
--btn-p: 1rem;
|
|
959
|
+
--size: calc(var(--size-field, 0.25rem) * 10);
|
|
960
|
+
}
|
|
961
|
+
.btn-sm {
|
|
962
|
+
--fontsize: 0.75rem;
|
|
963
|
+
--btn-p: 0.75rem;
|
|
964
|
+
--size: calc(var(--size-field, 0.25rem) * 8);
|
|
965
|
+
}
|
|
966
|
+
.btn-accent {
|
|
967
|
+
--btn-color: var(--color-accent);
|
|
968
|
+
--btn-fg: var(--color-accent-content);
|
|
969
|
+
}
|
|
970
|
+
.btn-neutral {
|
|
971
|
+
--btn-color: var(--color-neutral);
|
|
972
|
+
--btn-fg: var(--color-neutral-content);
|
|
973
|
+
}
|
|
881
974
|
.btn-primary {
|
|
882
975
|
--btn-color: var(--color-primary);
|
|
883
976
|
--btn-fg: var(--color-primary-content);
|
|
884
977
|
}
|
|
978
|
+
.btn-secondary {
|
|
979
|
+
--btn-color: var(--color-secondary);
|
|
980
|
+
--btn-fg: var(--color-secondary-content);
|
|
981
|
+
}
|
|
982
|
+
@layer theme, base, components, utilities;
|
|
983
|
+
@layer theme {
|
|
984
|
+
:root, :host {
|
|
985
|
+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
986
|
+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
987
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
988
|
+
"Courier New", monospace;
|
|
989
|
+
--color-red-600: oklch(57.7% 0.245 27.325);
|
|
990
|
+
--color-green-600: oklch(62.7% 0.194 149.214);
|
|
991
|
+
--color-blue-600: oklch(54.6% 0.245 262.881);
|
|
992
|
+
--color-zinc-600: oklch(44.2% 0.017 285.786);
|
|
993
|
+
--color-black: #000;
|
|
994
|
+
--spacing: 0.25rem;
|
|
995
|
+
--text-xs: 0.75rem;
|
|
996
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
997
|
+
--text-sm: 0.875rem;
|
|
998
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
999
|
+
--text-base: 1rem;
|
|
1000
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
1001
|
+
--text-lg: 1.125rem;
|
|
1002
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
1003
|
+
--text-xl: 1.25rem;
|
|
1004
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
1005
|
+
--text-2xl: 1.5rem;
|
|
1006
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
1007
|
+
--text-3xl: 1.875rem;
|
|
1008
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
1009
|
+
--default-font-family: var(--font-sans);
|
|
1010
|
+
--default-mono-font-family: var(--font-mono);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
@layer base {
|
|
1014
|
+
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
1015
|
+
box-sizing: border-box;
|
|
1016
|
+
margin: 0;
|
|
1017
|
+
padding: 0;
|
|
1018
|
+
border: 0 solid;
|
|
1019
|
+
}
|
|
1020
|
+
html, :host {
|
|
1021
|
+
line-height: 1.5;
|
|
1022
|
+
-webkit-text-size-adjust: 100%;
|
|
1023
|
+
-moz-tab-size: 4;
|
|
1024
|
+
-o-tab-size: 4;
|
|
1025
|
+
tab-size: 4;
|
|
1026
|
+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
1027
|
+
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
1028
|
+
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
1029
|
+
-webkit-tap-highlight-color: transparent;
|
|
1030
|
+
}
|
|
1031
|
+
hr {
|
|
1032
|
+
height: 0;
|
|
1033
|
+
color: inherit;
|
|
1034
|
+
border-top-width: 1px;
|
|
1035
|
+
}
|
|
1036
|
+
abbr:where([title]) {
|
|
1037
|
+
-webkit-text-decoration: underline dotted;
|
|
1038
|
+
text-decoration: underline dotted;
|
|
1039
|
+
}
|
|
1040
|
+
h1, h2, h3, h4, h5, h6 {
|
|
1041
|
+
font-size: inherit;
|
|
1042
|
+
font-weight: inherit;
|
|
1043
|
+
}
|
|
1044
|
+
a {
|
|
1045
|
+
color: inherit;
|
|
1046
|
+
-webkit-text-decoration: inherit;
|
|
1047
|
+
text-decoration: inherit;
|
|
1048
|
+
}
|
|
1049
|
+
b, strong {
|
|
1050
|
+
font-weight: bolder;
|
|
1051
|
+
}
|
|
1052
|
+
code, kbd, samp, pre {
|
|
1053
|
+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
1054
|
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
1055
|
+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
1056
|
+
font-size: 1em;
|
|
1057
|
+
}
|
|
1058
|
+
small {
|
|
1059
|
+
font-size: 80%;
|
|
1060
|
+
}
|
|
1061
|
+
sub, sup {
|
|
1062
|
+
font-size: 75%;
|
|
1063
|
+
line-height: 0;
|
|
1064
|
+
position: relative;
|
|
1065
|
+
vertical-align: baseline;
|
|
1066
|
+
}
|
|
1067
|
+
sub {
|
|
1068
|
+
bottom: -0.25em;
|
|
1069
|
+
}
|
|
1070
|
+
sup {
|
|
1071
|
+
top: -0.5em;
|
|
1072
|
+
}
|
|
1073
|
+
table {
|
|
1074
|
+
text-indent: 0;
|
|
1075
|
+
border-color: inherit;
|
|
1076
|
+
border-collapse: collapse;
|
|
1077
|
+
}
|
|
1078
|
+
:-moz-focusring {
|
|
1079
|
+
outline: auto;
|
|
1080
|
+
}
|
|
1081
|
+
progress {
|
|
1082
|
+
vertical-align: baseline;
|
|
1083
|
+
}
|
|
1084
|
+
summary {
|
|
1085
|
+
display: list-item;
|
|
1086
|
+
}
|
|
1087
|
+
ol, ul, menu {
|
|
1088
|
+
list-style: none;
|
|
1089
|
+
}
|
|
1090
|
+
img, svg, video, canvas, audio, iframe, embed, object {
|
|
1091
|
+
display: block;
|
|
1092
|
+
vertical-align: middle;
|
|
1093
|
+
}
|
|
1094
|
+
img, video {
|
|
1095
|
+
max-width: 100%;
|
|
1096
|
+
height: auto;
|
|
1097
|
+
}
|
|
1098
|
+
button, input, select, optgroup, textarea, ::file-selector-button {
|
|
1099
|
+
font: inherit;
|
|
1100
|
+
font-feature-settings: inherit;
|
|
1101
|
+
font-variation-settings: inherit;
|
|
1102
|
+
letter-spacing: inherit;
|
|
1103
|
+
color: inherit;
|
|
1104
|
+
border-radius: 0;
|
|
1105
|
+
background-color: transparent;
|
|
1106
|
+
opacity: 1;
|
|
1107
|
+
}
|
|
1108
|
+
:where(select:is([multiple], [size])) optgroup {
|
|
1109
|
+
font-weight: bolder;
|
|
1110
|
+
}
|
|
1111
|
+
:where(select:is([multiple], [size])) optgroup option {
|
|
1112
|
+
padding-inline-start: 20px;
|
|
1113
|
+
}
|
|
1114
|
+
::file-selector-button {
|
|
1115
|
+
margin-inline-end: 4px;
|
|
1116
|
+
}
|
|
1117
|
+
::-moz-placeholder {
|
|
1118
|
+
opacity: 1;
|
|
1119
|
+
}
|
|
1120
|
+
::placeholder {
|
|
1121
|
+
opacity: 1;
|
|
1122
|
+
}
|
|
1123
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
1124
|
+
::-moz-placeholder {
|
|
1125
|
+
color: currentcolor;
|
|
1126
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1127
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1130
|
+
::placeholder {
|
|
1131
|
+
color: currentcolor;
|
|
1132
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1133
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
}
|
|
1137
|
+
textarea {
|
|
1138
|
+
resize: vertical;
|
|
1139
|
+
}
|
|
1140
|
+
::-webkit-search-decoration {
|
|
1141
|
+
-webkit-appearance: none;
|
|
1142
|
+
}
|
|
1143
|
+
::-webkit-date-and-time-value {
|
|
1144
|
+
min-height: 1lh;
|
|
1145
|
+
text-align: inherit;
|
|
1146
|
+
}
|
|
1147
|
+
::-webkit-datetime-edit {
|
|
1148
|
+
display: inline-flex;
|
|
1149
|
+
}
|
|
1150
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
1151
|
+
padding: 0;
|
|
1152
|
+
}
|
|
1153
|
+
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
|
1154
|
+
padding-block: 0;
|
|
1155
|
+
}
|
|
1156
|
+
:-moz-ui-invalid {
|
|
1157
|
+
box-shadow: none;
|
|
1158
|
+
}
|
|
1159
|
+
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
|
1160
|
+
-webkit-appearance: button;
|
|
1161
|
+
-moz-appearance: button;
|
|
1162
|
+
appearance: button;
|
|
1163
|
+
}
|
|
1164
|
+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
1165
|
+
height: auto;
|
|
1166
|
+
}
|
|
1167
|
+
[hidden]:where(:not([hidden="until-found"])) {
|
|
1168
|
+
display: none !important;
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
@layer utilities;
|
|
1172
|
+
.btn {
|
|
1173
|
+
font-weight: 500;
|
|
1174
|
+
padding: 6px 16px;
|
|
1175
|
+
}
|
|
1176
|
+
.loading-spinner {
|
|
1177
|
+
width: 1em;
|
|
1178
|
+
height: 1em;
|
|
1179
|
+
}
|
|
885
1180
|
.btn-rounded {
|
|
886
1181
|
border-radius: 3rem;
|
|
887
1182
|
}
|
|
@@ -903,15 +1198,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
903
1198
|
border-color: var(--do-transparent);
|
|
904
1199
|
background-color: var(--do-color-secondary-hover);
|
|
905
1200
|
}
|
|
906
|
-
.btn-secondary:disabled {
|
|
1201
|
+
.btn-secondary:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
907
1202
|
border-color: var(--do-transparent);
|
|
908
1203
|
background-color: var(--do-transparent);
|
|
909
1204
|
}
|
|
910
1205
|
.btn-neutral {
|
|
911
1206
|
border-color: var(--do-transparent);
|
|
912
1207
|
background-color: var(--do-transparent);
|
|
913
|
-
}
|
|
914
|
-
.btn-neutral span {
|
|
915
1208
|
text-decoration: underline;
|
|
916
1209
|
}
|
|
917
1210
|
.btn-neutral:hover {
|
|
@@ -919,14 +1212,19 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
919
1212
|
border-color: var(--do-transparent);
|
|
920
1213
|
background-color: var(--color-primary);
|
|
921
1214
|
}
|
|
922
|
-
.btn-
|
|
923
|
-
color: var(
|
|
1215
|
+
.btn-neutral:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
1216
|
+
border-color: var(--do-transparent);
|
|
1217
|
+
background-color: var(--do-transparent);
|
|
1218
|
+
text-decoration: underline;
|
|
1219
|
+
}
|
|
1220
|
+
.btn-accent:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
|
|
1221
|
+
color: var(--color-neutral);
|
|
924
1222
|
border-color: var(--do-transparent);
|
|
925
1223
|
background-color: var(--do-color-accent-disabled);
|
|
926
1224
|
}
|
|
927
1225
|
.btn-accent:hover {
|
|
928
1226
|
color: var(--color-accent);
|
|
929
|
-
border-color: #
|
|
1227
|
+
border-color: #dbeafe;
|
|
930
1228
|
background-color: var(--color-accent-content);
|
|
931
1229
|
}
|
|
932
1230
|
@font-face {
|
|
@@ -987,6 +1285,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
987
1285
|
.icon-refresh:before {
|
|
988
1286
|
content: "\e905";
|
|
989
1287
|
}
|
|
1288
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
|
1289
|
+
body {
|
|
1290
|
+
font-family: 'Inter', sans-serif;
|
|
1291
|
+
}
|
|
990
1292
|
@layer base {
|
|
991
1293
|
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
|
|
992
1294
|
color-scheme: light;
|
|
@@ -1214,14 +1516,14 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
1214
1516
|
--color-base-200: oklch(98% 0 0);
|
|
1215
1517
|
--color-base-300: oklch(95% 0 0);
|
|
1216
1518
|
--color-base-content: oklch(21% 0.006 285.885);
|
|
1217
|
-
--color-primary:
|
|
1218
|
-
--color-primary-content:
|
|
1219
|
-
--color-secondary:
|
|
1220
|
-
--color-secondary-content:
|
|
1221
|
-
--color-accent:
|
|
1222
|
-
--color-accent-content:
|
|
1223
|
-
--color-neutral:
|
|
1224
|
-
--color-neutral-content:
|
|
1519
|
+
--color-primary: #27272A;
|
|
1520
|
+
--color-primary-content: #FAFAFA;
|
|
1521
|
+
--color-secondary: #FAFAFA;
|
|
1522
|
+
--color-secondary-content: #27272A;
|
|
1523
|
+
--color-accent: #1D4ED8;
|
|
1524
|
+
--color-accent-content: #EFF6FF;
|
|
1525
|
+
--color-neutral: #FAFAFA;
|
|
1526
|
+
--color-neutral-content: none;
|
|
1225
1527
|
--color-info: oklch(70% 0.2 220);
|
|
1226
1528
|
--color-info-content: oklch(98% 0.01 220);
|
|
1227
1529
|
--color-success: oklch(65% 0.25 140);
|
|
@@ -1238,24 +1540,33 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
1238
1540
|
--border: 1px;
|
|
1239
1541
|
--depth: 1;
|
|
1240
1542
|
--noise: 0;
|
|
1543
|
+
--do-color-primary-hover: #f5f5f5;
|
|
1544
|
+
--do-color-secondary-hover: #3e3e45;
|
|
1545
|
+
--do-color-primary-disabled: #a4a4a6;
|
|
1546
|
+
--do-color-accent-disabled: #a4b6ed;
|
|
1547
|
+
--do-color-border-primary: #3F3F46;
|
|
1548
|
+
--do-color-border-secondary: #F4F4F5;
|
|
1549
|
+
--do-color-border-accent: #2563EB;
|
|
1550
|
+
--do-color-border-accent-hover: #3B82F6;
|
|
1551
|
+
--do-transparent: transparent;
|
|
1241
1552
|
}
|
|
1242
1553
|
}
|
|
1243
1554
|
@layer base {
|
|
1244
1555
|
@media (prefers-color-scheme: dark) {
|
|
1245
1556
|
:root {
|
|
1246
1557
|
color-scheme: dark;
|
|
1247
|
-
--color-base-100: oklch(
|
|
1248
|
-
--color-base-200: oklch(
|
|
1249
|
-
--color-base-300: oklch(
|
|
1250
|
-
--color-base-content: oklch(
|
|
1251
|
-
--color-primary:
|
|
1252
|
-
--color-primary-content:
|
|
1253
|
-
--color-secondary:
|
|
1254
|
-
--color-secondary-content:
|
|
1255
|
-
--color-accent:
|
|
1256
|
-
--color-accent-content:
|
|
1257
|
-
--color-neutral:
|
|
1258
|
-
--color-neutral-content:
|
|
1558
|
+
--color-base-100: oklch(25.33% 0.016 252.42);
|
|
1559
|
+
--color-base-200: oklch(23.26% 0.014 253.1);
|
|
1560
|
+
--color-base-300: oklch(21.15% 0.012 254.09);
|
|
1561
|
+
--color-base-content: oklch(97.807% 0.029 256.847);
|
|
1562
|
+
--color-primary: #27272A;
|
|
1563
|
+
--color-primary-content: #FAFAFA;
|
|
1564
|
+
--color-secondary: #FAFAFA;
|
|
1565
|
+
--color-secondary-content: #27272A;
|
|
1566
|
+
--color-accent: #1D4ED8;
|
|
1567
|
+
--color-accent-content: #EFF6FF;
|
|
1568
|
+
--color-neutral: #FAFAFA;
|
|
1569
|
+
--color-neutral-content: none;
|
|
1259
1570
|
--color-info: oklch(70% 0.2 220);
|
|
1260
1571
|
--color-info-content: oklch(98% 0.01 220);
|
|
1261
1572
|
--color-success: oklch(65% 0.25 140);
|
|
@@ -1272,53 +1583,33 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
1272
1583
|
--border: 1px;
|
|
1273
1584
|
--depth: 1;
|
|
1274
1585
|
--noise: 0;
|
|
1586
|
+
--do-color-primary-hover: #f5f5f5;
|
|
1587
|
+
--do-color-secondary-hover: #3e3e45;
|
|
1588
|
+
--do-color-primary-disabled: #a4a4a6;
|
|
1589
|
+
--do-color-accent-disabled: #a4b6ed;
|
|
1590
|
+
--do-color-border-primary: #3F3F46;
|
|
1591
|
+
--do-color-border-secondary: #F4F4F5;
|
|
1592
|
+
--do-color-border-accent: #2563EB;
|
|
1593
|
+
--do-color-border-accent-hover: #3B82F6;
|
|
1594
|
+
--do-transparent: transparent;
|
|
1275
1595
|
}
|
|
1276
1596
|
}
|
|
1277
1597
|
}
|
|
1278
1598
|
@layer base {
|
|
1279
1599
|
:root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
|
|
1280
1600
|
color-scheme: dark;
|
|
1281
|
-
--color-base-100: oklch(
|
|
1282
|
-
--color-base-200: oklch(
|
|
1283
|
-
--color-base-300: oklch(
|
|
1284
|
-
--color-base-content: oklch(
|
|
1285
|
-
--color-primary: red;
|
|
1286
|
-
--color-primary-content: oklch(98% 0.01 240);
|
|
1287
|
-
--color-secondary: oklch(70% 0.25 200);
|
|
1288
|
-
--color-secondary-content: oklch(98% 0.01 200);
|
|
1289
|
-
--color-accent: oklch(65% 0.25 160);
|
|
1290
|
-
--color-accent-content: oklch(98% 0.01 160);
|
|
1291
|
-
--color-neutral: oklch(50% 0.05 240);
|
|
1292
|
-
--color-neutral-content: oklch(98% 0.01 240);
|
|
1293
|
-
--color-info: oklch(70% 0.2 220);
|
|
1294
|
-
--color-info-content: oklch(98% 0.01 220);
|
|
1295
|
-
--color-success: oklch(65% 0.25 140);
|
|
1296
|
-
--color-success-content: oklch(98% 0.01 140);
|
|
1297
|
-
--color-warning: oklch(80% 0.25 80);
|
|
1298
|
-
--color-warning-content: oklch(20% 0.05 80);
|
|
1299
|
-
--color-error: oklch(65% 0.3 30);
|
|
1300
|
-
--color-error-content: oklch(98% 0.01 30);
|
|
1301
|
-
--radius-selector: 0.25rem;
|
|
1302
|
-
--radius-field: 0.25rem;
|
|
1303
|
-
--radius-box: 0.25rem;
|
|
1304
|
-
--size-selector: 0.25rem;
|
|
1305
|
-
--size-field: 0.25rem;
|
|
1306
|
-
--border: 1px;
|
|
1307
|
-
--depth: 1;
|
|
1308
|
-
--noise: 0;
|
|
1309
|
-
}
|
|
1310
|
-
}
|
|
1311
|
-
@layer base {
|
|
1312
|
-
:where(:root),:root:has(input.theme-controller[value=hybrid]:checked),[data-theme="hybrid"] {
|
|
1313
|
-
color-scheme: light;
|
|
1601
|
+
--color-base-100: oklch(25.33% 0.016 252.42);
|
|
1602
|
+
--color-base-200: oklch(23.26% 0.014 253.1);
|
|
1603
|
+
--color-base-300: oklch(21.15% 0.012 254.09);
|
|
1604
|
+
--color-base-content: oklch(97.807% 0.029 256.847);
|
|
1314
1605
|
--color-primary: #27272A;
|
|
1315
1606
|
--color-primary-content: #FAFAFA;
|
|
1316
1607
|
--color-secondary: #FAFAFA;
|
|
1317
1608
|
--color-secondary-content: #27272A;
|
|
1318
|
-
--color-neutral: #FAFAFA;
|
|
1319
|
-
--color-neutral-content: none;
|
|
1320
1609
|
--color-accent: #1D4ED8;
|
|
1321
1610
|
--color-accent-content: #EFF6FF;
|
|
1611
|
+
--color-neutral: #FAFAFA;
|
|
1612
|
+
--color-neutral-content: none;
|
|
1322
1613
|
--color-info: oklch(70% 0.2 220);
|
|
1323
1614
|
--color-info-content: oklch(98% 0.01 220);
|
|
1324
1615
|
--color-success: oklch(65% 0.25 140);
|
|
@@ -1327,11 +1618,14 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
|
|
|
1327
1618
|
--color-warning-content: oklch(20% 0.05 80);
|
|
1328
1619
|
--color-error: oklch(65% 0.3 30);
|
|
1329
1620
|
--color-error-content: oklch(98% 0.01 30);
|
|
1330
|
-
--size-selector: 0.25rem;
|
|
1331
|
-
--size-field: 0.25rem;
|
|
1332
1621
|
--radius-selector: 0.25rem;
|
|
1333
1622
|
--radius-field: 0.25rem;
|
|
1334
1623
|
--radius-box: 0.25rem;
|
|
1624
|
+
--size-selector: 0.25rem;
|
|
1625
|
+
--size-field: 0.25rem;
|
|
1626
|
+
--border: 1px;
|
|
1627
|
+
--depth: 1;
|
|
1628
|
+
--noise: 0;
|
|
1335
1629
|
--do-color-primary-hover: #f5f5f5;
|
|
1336
1630
|
--do-color-secondary-hover: #3e3e45;
|
|
1337
1631
|
--do-color-primary-disabled: #a4a4a6;
|
|
@@ -2,18 +2,14 @@
|
|
|
2
2
|
name: "dark";
|
|
3
3
|
prefersdark: true;
|
|
4
4
|
color-scheme: dark;
|
|
5
|
-
--color-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
10
|
-
--color-
|
|
11
|
-
--color-
|
|
12
|
-
--color-
|
|
13
|
-
--color-accent: oklch(65% 0.25 160);
|
|
14
|
-
--color-accent-content: oklch(98% 0.01 160);
|
|
15
|
-
--color-neutral: oklch(50% 0.05 240);
|
|
16
|
-
--color-neutral-content: oklch(98% 0.01 240);
|
|
5
|
+
--color-primary:#27272A;
|
|
6
|
+
--color-primary-content: #FAFAFA;
|
|
7
|
+
--color-secondary: #FAFAFA;
|
|
8
|
+
--color-secondary-content: #27272A;
|
|
9
|
+
--color-neutral: #FAFAFA;
|
|
10
|
+
--color-neutral-content: none;
|
|
11
|
+
--color-accent: #1D4ED8;
|
|
12
|
+
--color-accent-content: #EFF6FF;
|
|
17
13
|
--color-info: oklch(70% 0.2 220);
|
|
18
14
|
--color-info-content: oklch(98% 0.01 220);
|
|
19
15
|
--color-success: oklch(65% 0.25 140);
|
|
@@ -22,13 +18,29 @@
|
|
|
22
18
|
--color-warning-content: oklch(20% 0.05 80);
|
|
23
19
|
--color-error: oklch(65% 0.3 30);
|
|
24
20
|
--color-error-content: oklch(98% 0.01 30);
|
|
25
|
-
|
|
21
|
+
|
|
22
|
+
|
|
26
23
|
/* base sizes */
|
|
27
24
|
--size-selector: 0.25rem;
|
|
28
25
|
--size-field: 0.25rem;
|
|
29
|
-
|
|
26
|
+
|
|
30
27
|
/* border radius */
|
|
31
28
|
--radius-selector: 0.25rem;
|
|
32
29
|
--radius-field: 0.25rem;
|
|
33
30
|
--radius-box: 0.25rem;
|
|
31
|
+
|
|
32
|
+
/*variables DO*/
|
|
33
|
+
/*hover color*/
|
|
34
|
+
--do-color-primary-hover: #f5f5f5;
|
|
35
|
+
--do-color-secondary-hover: #3e3e45;
|
|
36
|
+
/*disabled color*/
|
|
37
|
+
--do-color-primary-disabled: #a4a4a6;
|
|
38
|
+
--do-color-accent-disabled: #a4b6ed;
|
|
39
|
+
/*buttons border color*/
|
|
40
|
+
--do-color-border-primary: #3F3F46;
|
|
41
|
+
--do-color-border-secondary: #F4F4F5;
|
|
42
|
+
--do-color-border-accent: #2563EB;
|
|
43
|
+
--do-color-border-accent-hover: #3B82F6;
|
|
44
|
+
/*styles*/
|
|
45
|
+
--do-transparent: transparent;
|
|
34
46
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
|
|
2
1
|
@plugin "daisyui/theme" {
|
|
3
2
|
name: "light";
|
|
4
3
|
default: true;
|
|
5
4
|
color-scheme: light;
|
|
6
|
-
--color-primary:
|
|
7
|
-
--color-primary-content:
|
|
8
|
-
--color-secondary:
|
|
9
|
-
--color-secondary-content:
|
|
10
|
-
--color-
|
|
11
|
-
--color-
|
|
5
|
+
--color-primary: #27272A;
|
|
6
|
+
--color-primary-content: #FAFAFA;
|
|
7
|
+
--color-secondary: #FAFAFA;
|
|
8
|
+
--color-secondary-content: #27272A;
|
|
9
|
+
--color-neutral: #FAFAFA;
|
|
10
|
+
--color-neutral-content: none;
|
|
11
|
+
--color-accent: #1D4ED8;
|
|
12
|
+
--color-accent-content: #EFF6FF;
|
|
12
13
|
--color-info: oklch(70% 0.2 220);
|
|
13
14
|
--color-info-content: oklch(98% 0.01 220);
|
|
14
15
|
--color-success: oklch(65% 0.25 140);
|
|
@@ -18,12 +19,28 @@
|
|
|
18
19
|
--color-error: oklch(65% 0.3 30);
|
|
19
20
|
--color-error-content: oklch(98% 0.01 30);
|
|
20
21
|
|
|
22
|
+
|
|
21
23
|
/* base sizes */
|
|
22
24
|
--size-selector: 0.25rem;
|
|
23
25
|
--size-field: 0.25rem;
|
|
24
|
-
|
|
26
|
+
|
|
25
27
|
/* border radius */
|
|
26
28
|
--radius-selector: 0.25rem;
|
|
27
29
|
--radius-field: 0.25rem;
|
|
28
30
|
--radius-box: 0.25rem;
|
|
31
|
+
|
|
32
|
+
/*variables DO*/
|
|
33
|
+
/*hover color*/
|
|
34
|
+
--do-color-primary-hover: #f5f5f5;
|
|
35
|
+
--do-color-secondary-hover: #3e3e45;
|
|
36
|
+
/*disabled color*/
|
|
37
|
+
--do-color-primary-disabled: #a4a4a6;
|
|
38
|
+
--do-color-accent-disabled: #a4b6ed;
|
|
39
|
+
/*buttons border color*/
|
|
40
|
+
--do-color-border-primary: #3F3F46;
|
|
41
|
+
--do-color-border-secondary: #F4F4F5;
|
|
42
|
+
--do-color-border-accent: #2563EB;
|
|
43
|
+
--do-color-border-accent-hover: #3B82F6;
|
|
44
|
+
/*styles*/
|
|
45
|
+
--do-transparent: transparent;
|
|
29
46
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import Icon from '../../atoms/Icons/Icon.svelte';
|
|
3
|
+
import { Button } from '../../index.ts';
|
|
3
4
|
import type { iProps } from './iProps.ts';
|
|
4
5
|
|
|
5
|
-
export let
|
|
6
|
-
export let size: iProps['size'] = 'md';
|
|
6
|
+
export let color: iProps['color'] = 'btn-primary';
|
|
7
|
+
export let size: iProps['size'] = 'btn-md';
|
|
7
8
|
export let label: iProps['label'] = '';
|
|
8
9
|
export let disabled: iProps['disabled'] = false;
|
|
9
|
-
export let onClick: iProps['onClick'];
|
|
10
10
|
export let loading: iProps['loading'] = false;
|
|
11
11
|
export let iconName: iProps['iconName'] = '';
|
|
12
12
|
export let iconSize: iProps['iconSize'] = 'text-md';
|
|
@@ -16,36 +16,35 @@
|
|
|
16
16
|
|
|
17
17
|
<!-- @component
|
|
18
18
|
```Svelte
|
|
19
|
-
<Button variant='primary' size='md' label="Click me!" onClick={onClick} disabled={false} />
|
|
20
19
|
```
|
|
21
|
-
- `
|
|
22
|
-
- `size`:
|
|
20
|
+
- `color`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
|
|
21
|
+
- `size`: any Tailwind size class
|
|
23
22
|
- `label`: string
|
|
24
23
|
- `onClick`: () => void
|
|
25
24
|
- `disabled`: boolean
|
|
26
25
|
- `loading`: boolean
|
|
27
|
-
- `iconName`:
|
|
28
|
-
- `iconSize`:
|
|
29
|
-
- `iconColor`:
|
|
30
|
-
- `iconPosition`: '
|
|
26
|
+
- `iconName`: any icon name from the Icon component
|
|
27
|
+
- `iconSize`: any Tailwind text size class
|
|
28
|
+
- `iconColor`: any tailwind color class
|
|
29
|
+
- `iconPosition`: 'start' | 'end'
|
|
31
30
|
```
|
|
32
31
|
@endcomponent
|
|
33
32
|
-->
|
|
34
33
|
|
|
35
|
-
<
|
|
34
|
+
<Button {...$$restProps} {color} {size} {disabled} on:click>
|
|
35
|
+
|
|
36
36
|
{#if loading}
|
|
37
37
|
<span
|
|
38
|
-
class=
|
|
38
|
+
class={`loading loading-spinner ${iconPosition === 'start' ? 'order-1' : 'order-2'}`}
|
|
39
39
|
class:!inline={loading}
|
|
40
|
-
role="status"
|
|
41
|
-
style="width: 16px; height: 16px;"> </span
|
|
40
|
+
role="status"> </span
|
|
42
41
|
>
|
|
43
42
|
{:else}
|
|
44
|
-
<div class={iconPosition === 'start' ? 'order-1' : 'order-2'}>
|
|
45
|
-
<Icon name={iconName} size={iconSize} color={iconColor} />
|
|
43
|
+
<div class={`${iconPosition === 'start' ? 'order-1' : 'order-2'}`}>
|
|
44
|
+
<Icon name={iconName} size={iconSize} color={iconColor} class='block'/>
|
|
46
45
|
</div>
|
|
47
46
|
{/if}
|
|
48
47
|
{#if label}
|
|
49
48
|
<span class={iconPosition === 'start' ? 'order-2' : 'order-1'}>{label}</span>
|
|
50
49
|
{/if}
|
|
51
|
-
</
|
|
50
|
+
</Button>
|
|
@@ -14,34 +14,34 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
16
|
* ```Svelte
|
|
17
|
-
* <Button variant='primary' size='md' label="Click me!" onClick={onClick} disabled={false} />
|
|
18
17
|
* ```
|
|
19
|
-
* - `
|
|
20
|
-
* - `size`:
|
|
18
|
+
* - `color`: 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-neutral', or any Tailwind color class
|
|
19
|
+
* - `size`: any Tailwind size class
|
|
21
20
|
* - `label`: string
|
|
22
21
|
* - `onClick`: () => void
|
|
23
22
|
* - `disabled`: boolean
|
|
24
23
|
* - `loading`: boolean
|
|
25
|
-
* - `iconName`:
|
|
26
|
-
* - `iconSize`:
|
|
27
|
-
* - `iconColor`:
|
|
28
|
-
* - `iconPosition`: '
|
|
24
|
+
* - `iconName`: any icon name from the Icon component
|
|
25
|
+
* - `iconSize`: any Tailwind text size class
|
|
26
|
+
* - `iconColor`: any tailwind color class
|
|
27
|
+
* - `iconPosition`: 'start' | 'end'
|
|
29
28
|
* ```
|
|
30
29
|
* @endcomponent
|
|
31
30
|
*/
|
|
32
31
|
declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
|
|
33
32
|
[x: string]: any;
|
|
34
|
-
|
|
35
|
-
size?:
|
|
33
|
+
color?: string | undefined;
|
|
34
|
+
size?: string | undefined;
|
|
36
35
|
label?: string | undefined;
|
|
37
36
|
disabled?: boolean | undefined;
|
|
38
|
-
onClick: iProps["onClick"];
|
|
39
37
|
loading?: boolean | undefined;
|
|
40
|
-
iconName?: iProps["iconName"];
|
|
38
|
+
iconName?: iProps["iconName"] | undefined;
|
|
41
39
|
iconSize?: string | undefined;
|
|
42
40
|
iconColor?: string | undefined;
|
|
43
41
|
iconPosition?: "start" | "end" | undefined;
|
|
44
42
|
}, {
|
|
43
|
+
click: MouseEvent;
|
|
44
|
+
} & {
|
|
45
45
|
[evt: string]: CustomEvent<any>;
|
|
46
46
|
}, {}, {}, string>;
|
|
47
47
|
type IconButton = InstanceType<typeof IconButton>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { IconNames } from '../../
|
|
1
|
+
import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
|
|
2
2
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
3
|
export interface iProps extends HTMLButtonAttributes {
|
|
4
|
-
|
|
5
|
-
size?: 'sm' | 'md' | 'lg';
|
|
4
|
+
color?: 'btn-primary' | 'btn-secondary' | 'btn-neutral' | 'btn-accent' | string;
|
|
5
|
+
size?: 'btn-sm' | 'btn-md' | 'btn-lg' | string;
|
|
6
6
|
label?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
onClick?: () => void | undefined;
|
package/package.json
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
@import "./var-light.css";
|
|
4
4
|
@import "./var-dark.css";
|
|
5
|
-
@import "./var-hybrid.css";
|
|
6
5
|
@import "./button.css";
|
|
7
6
|
@import "./border.css";
|
|
8
7
|
@import "./color.css";
|
|
9
8
|
@import "./icomoon/icons.css";
|
|
9
|
+
@import "./font.css";
|
|
10
10
|
|
|
11
11
|
/*
|
|
12
12
|
There are 2 ways to modify themes (light [default] and dark):
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
@plugin "daisyui/theme" {
|
|
3
|
-
name: "hybrid";
|
|
4
|
-
default: true;
|
|
5
|
-
color-scheme: light;
|
|
6
|
-
--color-primary: #27272A;
|
|
7
|
-
--color-primary-content: #FAFAFA;
|
|
8
|
-
--color-secondary: #FAFAFA;
|
|
9
|
-
--color-secondary-content: #27272A;
|
|
10
|
-
--color-neutral: #FAFAFA;
|
|
11
|
-
--color-neutral-content: none;
|
|
12
|
-
--color-accent: #1D4ED8;
|
|
13
|
-
--color-accent-content: #EFF6FF;
|
|
14
|
-
--color-info: oklch(70% 0.2 220);
|
|
15
|
-
--color-info-content: oklch(98% 0.01 220);
|
|
16
|
-
--color-success: oklch(65% 0.25 140);
|
|
17
|
-
--color-success-content: oklch(98% 0.01 140);
|
|
18
|
-
--color-warning: oklch(80% 0.25 80);
|
|
19
|
-
--color-warning-content: oklch(20% 0.05 80);
|
|
20
|
-
--color-error: oklch(65% 0.3 30);
|
|
21
|
-
--color-error-content: oklch(98% 0.01 30);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
/* base sizes */
|
|
25
|
-
--size-selector: 0.25rem;
|
|
26
|
-
--size-field: 0.25rem;
|
|
27
|
-
|
|
28
|
-
/* border radius */
|
|
29
|
-
--radius-selector: 0.25rem;
|
|
30
|
-
--radius-field: 0.25rem;
|
|
31
|
-
--radius-box: 0.25rem;
|
|
32
|
-
|
|
33
|
-
/*variables DO*/
|
|
34
|
-
/*hover color*/
|
|
35
|
-
--do-color-primary-hover: #f5f5f5;
|
|
36
|
-
--do-color-secondary-hover: #3e3e45;
|
|
37
|
-
/*disabled color*/
|
|
38
|
-
--do-color-primary-disabled: #a4a4a6;
|
|
39
|
-
--do-color-accent-disabled: #a4b6ed;
|
|
40
|
-
/*buttons border color*/
|
|
41
|
-
--do-color-border-primary: #3F3F46;
|
|
42
|
-
--do-color-border-secondary: #F4F4F5;
|
|
43
|
-
--do-color-border-accent: #2563EB;
|
|
44
|
-
--do-color-border-accent-hover: #3B82F6;
|
|
45
|
-
/*styles*/
|
|
46
|
-
--do-transparent: transparent;
|
|
47
|
-
}
|