chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: color name

Browse source
This commit is contained in:
Methapon2001 2024-04-11 14:17:17 +07:00
parent 7afbd2638f
commit 72426aef87
2 changed files with 31 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/FormDialog.vue
View file

@ -300,12 +300,12 @@ onMounted(async () => {
<style scoped lang="scss"> <style scoped lang="scss">
.close-btn { .close-btn {
color: hsl(var(--negative)); color: hsl(var(--negative-bg));
background-color: hsla(var(--negative) / 0.1); background-color: hsla(var(--negative-bg) / 0.1);
&.dark { &.dark {
background-color: transparent; background-color: transparent;
border: 1px solid hsl(var(--negative)); border: 1px solid hsl(var(--negative-bg));
} }
} }

30
src/css/app.scss
View file

@ -14,12 +14,18 @@ html {
--surface-1: white; --surface-1: white;
--surface-2: var(--gray-1); --surface-2: var(--gray-1);
--surface-3: var(--gray-2); --surface-3: var(--gray-2);
--text-mute: var(--stone-4-hsl); --text-mute: var(--stone-4-hsl);
--info-fg: 0 0% 100%; --info-fg: 0 0% 100%;
--info-bg: var(--blue-6-hsl); --info-bg: var(--blue-6-hsl);
--negative: var(--red-9-hsl);
--negative-fg: 0 0% 100%;
--negative-fg: var(--red-9-hsl);
--gender-male: var(--blue-5-hsl); --gender-male: var(--blue-5-hsl);
--gender-female: var(--pink-7-hsl); --gender-female: var(--pink-7-hsl);
--shadow-color: 220 3% 15%; --shadow-color: 220 3% 15%;
--shadow-strength: 5%; --shadow-strength: 5%;
--inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067); --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067);
@ -29,7 +35,7 @@ html {
} }
:where(.dark, .body--dark) { :where(.dark, .body--dark) {
--brand-1: var(--blue-7); --brand-1: var(--blue-5);
--brand-2: #f50000; --brand-2: #f50000;
--border-color: var(--gray-8); --border-color: var(--gray-8);
--foreground: white; --foreground: white;
@ -38,7 +44,9 @@ html {
--surface-1: var(--gray-11); --surface-1: var(--gray-11);
--surface-2: var(--gray-10); --surface-2: var(--gray-10);
--surface-3: var(--gray-9); --surface-3: var(--gray-9);
--text-mute: var(--stone-8-hsl); --text-mute: var(--stone-8-hsl);
--shadow-color: 220 0% 100%; --shadow-color: 220 0% 100%;
--shadow-strength: 25%; --shadow-strength: 25%;
--inner-shadow-highlight: inset 0 -.5px 0 0 hsla(0, 0%, 100%, .067), inset 0 .5px 0 0 rgba(0, 0, 0, .467); --inner-shadow-highlight: inset 0 -.5px 0 0 hsla(0, 0%, 100%, .067), inset 0 .5px 0 0 rgba(0, 0, 0, .467);
@ -101,3 +109,21 @@ html {
.surface-3 { .surface-3 {
background-color: var(--surface-3) !important; background-color: var(--surface-3) !important;
} }
.app-text-info {
color: hsl(var(--info-bg));
}
.app-bg-info {
color: hsl(var(--info-fg));
background-color: hsl(var(--info-bg));
}
.app-text-danger {
color: hsl(var(--info-bg));
}
.app-bg-danger {
color: hsl(var(--negative-fg));
background-color: hsl(var(--negative-bg));
}