50 lines
1.8 KiB
Plaintext
50 lines
1.8 KiB
Plaintext
export global Theme {
|
|
in-out property <bool> is-dark: true;
|
|
|
|
out property <length> width: 448px;
|
|
|
|
out property <brush> surface-main: is-dark ? #0f172a : #ffffff;
|
|
// out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
|
|
out property <brush> surface-item: is-dark ? #1e293b4d : #f8fafc;
|
|
out property <brush> surface-elevated: is-dark ? #1e293b80 : #f8fafc;
|
|
out property <brush> surface-hover: is-dark ? #1e293b : #ffffff;
|
|
|
|
out property <brush> border-main: is-dark ? #334155 : #e2e8f0;
|
|
|
|
out property <brush> gradient-main: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
|
|
|
|
out property <brush> text-main: is-dark ? #ffffff : #0f172a;
|
|
out property <brush> text-muted: is-dark ? #94a3b8 : #64748b;
|
|
|
|
out property <brush> text-control: is-dark ? #cbd5e1 : #475569;
|
|
out property <brush> text-control-muted: is-dark ? #64748b : #94a3b8;
|
|
|
|
out property <brush> text-hint: is-dark ? #475569 : #475569;
|
|
|
|
out property <color> accent: #3b82f6;
|
|
out property <color> accent-ring: #3b82f680;
|
|
out property <color> accent-soft: #3b82f620;
|
|
out property <color> danger: #ef4444;
|
|
out property <color> danger-soft: #ef444420;
|
|
|
|
out property <brush> shadow-color: is-dark ? #3b82f640 : #3b82f640;
|
|
|
|
out property <length> shadow-primary-x: 0px;
|
|
out property <length> shadow-primary-y: 10px;
|
|
out property <length> shadow-primary-blur: 15px;
|
|
|
|
out property <length> radius: 12px;
|
|
out property <length> radius-lg: 16px;
|
|
|
|
out property <length> spacing-xl: 20px;
|
|
out property <length> spacing-lg: 16px;
|
|
out property <length> spacing-md: 12px;
|
|
out property <length> spacing-sm: 8px;
|
|
out property <length> spacing-xs: 4px;
|
|
|
|
callback toggle();
|
|
toggle => {
|
|
is-dark = !is-dark;
|
|
}
|
|
}
|